AniMatch: Anime Recommendation

Overview

A Next.js 16 App Router web app that delivers anime recommendations from BERT embeddings stored in MongoDB. Users pick multiple titles, which are merged into weighted vectors (descriptions, genres, demographics, ratings, themes) and processed in a web worker to keep the UI responsive. The interface persists choices in localStorage, exposes trending/top-ranked lists, and uses Radix UI + Tailwind 4 for mobile-first layouts.

Key Features

Multi-select recommendations: Combine several chosen titles into a single weighted similarity query
Web worker scoring: Offloads cosine similarity across embeddings to avoid blocking the UI
Weighted embeddings: Adjustable weights across descriptions, genres, themes, demographics, and ratings
MongoDB-backed API: Fetches embeddings and metadata via Next.js API routes
Persistent choices: localStorage keeps user selections across visits
Responsive UI kit: Radix UI + Tailwind 4 with motion flourishes
Discovery views: Trending and top-ranked sections plus CTA to browse more

Solution

Next.js 16 handles the UI, API routes, and worker host. A MongoDB-backed API serves both metadata and BERT embedding vectors; a client web worker computes cosine similarity with configurable weights to aggregate multiple selected titles. State is persisted client-side for fast revisit flows, and UI primitives come from Radix + Tailwind, with Framer Motion for subtle motion cues.

Outcome

Delivers responsive, multi-title recommendations without UI jank by offloading similarity math to a worker and persisting choices. Users can explore trending and top-ranked lists, then refine picks to surface contextually similar anime based on rich embedding signals.

Project Information

Technologies

TypeScript

Next.js 16

React 19

Tailwind CSS 4

Radix UI

Framer Motion

MongoDB

Web Workers

BERT embeddings

View Live Project View Source Code