ZZZ - Movie Recommender

Inspiration

The refreshed ZZZ Movie Recommendation System focuses on delivering a responsive, cinematic experience that works anywhere without heavyweight infrastructure. We wanted to pair a modern React/Next.js interface with a lightweight latent semantic model so movie lovers can explore suggestions instantly, whether they start from a favorite title or a free-form vibe.

What it does

The carousel blends a curated movie dataset with a compact latent semantic model built from TF-IDF features and truncated SVD. Every query — title-based or descriptive — is projected into that latent space, scored against the catalog, and returned with:

Top five recommendations ranked by cosine similarity
Match percentages and narrative insights that explain the pairing
Guaranteed poster art thanks to on-the-fly SVG placeholders when source images are missing

A live demo is hosted at zzz-movie-rec-system.vercel.app so anyone can try the experience immediately.

How we built it

Next.js + TypeScript power both the React front end (pages/index.tsx) and the API routes that serve /api/recommendations, /api/movies, and /api/health.
Custom latent factorization in TypeScript loads a curated subset of movie plots (data/sample-movies.json), tokenizes text, builds TF-IDF vectors, and projects them into a reduced SVD embedding augmented with genre and release-year metadata (lib/recommender.ts).
Responsive carousel UI renders insights, posters, and controls with accessible keyboard navigation and tight viewport constraints defined in styles/globals.css.
Static preview assets (see public/preview.svg) illustrate the interface for readers who cannot run the app locally.

Challenges we ran into

Balancing visual richness with a compact above-the-fold layout required iterative tuning of typography, spacing, and component structure.
Ensuring reliable artwork meant building a deterministic SVG poster generator so every card has a meaningful thumbnail even without remote assets.
Shipping a reproducible build flow inside a restricted environment pushed us toward a zero-dependency ML pipeline implemented entirely in TypeScript.

What we learned

We gained hands-on experience crafting a recommendation engine without TensorFlow or external vector databases, instead leaning on classical NLP tools and careful engineering in TypeScript. On the product side, we refined our understanding of how to explain recommendations with concise insights, and how to design responsive carousel interactions that feel great on desktop and mobile.

What's next for ZZZ - Movie Recommender

Personalize the latent profile by learning from individual browsing history or explicit feedback.
Expand the dataset with richer metadata (cast, crew, keywords) to unlock deeper narrative insights.
Explore incremental model updates so newly added titles can be embedded on the fly.

Note

This repository now bundles the Next.js experience, the curated dataset, and the TypeScript recommender. For historical context, the original preprocessing scripts and the earlier semantic search client remain available: