← Back to projects

Recommendations · UX

Entertainment Engine
Find your next obsession in three clicks

Year 2025
Stack React · Claude API · Vite
Deployed via Vercel
Live site View project →
01

The Original Prompt

The exact words I gave Claude to kick this off.

Create a web app that recommends TV shows, movies, podcasts, documentaries and books. Users can input an example or multiple examples and then the app generates a recommendation with details of the show, trailer, rottentomatoes.com rating, where to stream and a synopsis (no spoilers). Users can also add a filter if they want to find something under a certain time size, or rating. The outcome will be 3 examples of recommendations.

02

Explain It Like I'm 5

How it works, why it was built this way, and the thinking behind each decision.

❓

What it solves

We've all been there. Kid is asleep and we have about 1-2 hours before we fall asleep. Last thing you want to do is spend 30 minutes scrolling through Netflix, etc to find your next watch.

⚙️

What it does

You type in a few things you already love — say, Breaking Bad, Sapiens, and Serial — and the app uses AI to figure out your taste and suggest three new things to watch, read, or listen to. Each recommendation comes with a spoiler-free synopsis, a Rotten Tomatoes score, which streaming services carry it, and a link to the trailer. You can also set filters — like "only show me things under 45 minutes" or "nothing above PG-13" — before hitting go.

🧱

How it's built

The interface is built in React with Vite — a fast, modern setup for building interactive web apps. When you hit "Get Recommendations," the app sends your inputs to a small serverless function hosted on Vercel, which securely calls Claude's API on the server side. Claude returns a structured JSON response containing all the recommendation data — title, synopsis, RT score, streaming platforms, mood, and more — which the app then renders into the cards you see on screen.

🤔

Why this approach

React was chosen because the UI updates dynamically — tags appear as you type, cards animate in on response, filters toggle live. The API key lives in a Vercel Edge Function rather than the browser so it can never be stolen by someone inspecting the page source. Claude was prompted to return raw JSON (no markdown, no prose) so the app can reliably parse and display the data without brittle text scraping. The whole thing was intentionally kept stateless — no database, no accounts — to keep it fast and friction-free.

🚀

How it's deployed

The project was exported as a zip, pushed to GitHub, and connected to Vercel. Vercel automatically detects it as a Vite project, runs npm run build, and hosts the output on its global CDN. The Anthropic API key is stored as an environment variable in Vercel's dashboard — never in the code — and injected at runtime into the serverless Edge Function that proxies the API calls.

03

What's Next

Where this project could go with more time and feedback.

Near-term

Add a share button that generates a link to your specific recommendations — so you can send three picks directly to a friend without them needing to re-enter your inputs.

Medium-term

Add a "Save for later" feature backed by a lightweight database, so users can build a personal watchlist across sessions without creating an account — just a bookmark-style link tied to a unique ID.

Ambitious

Connect to real-time data sources — the Rotten Tomatoes API, JustWatch for streaming availability, and a trailer embed from YouTube — so every card shows live, accurate information rather than AI-generated estimates. Pair this with a taste profile that improves the more you use it.

04

Share Your Thoughts

Feedback, ideas, and questions are welcome — I read everything.

Responses go to a private Google Sheet — no spam, ever.