Deploying a Movie Recommendation API with FastAPI and Next.js

Overview

In this project, I developed a movie recommendation system that combines a Python backend (FastAPI) with an interactive React frontend built using Next.js. While I’ve worked with APIs in prior coursework, this project pushed me further by managing the full development-to-deployment workflow across services and tools I wanted deeper experience with.

Approach

The backend exposes a simple API with three main endpoints:

• Retrieve available genres
• Browse movies filtered by genre
• Select a movie and get similar recommendations

The recommendation engine itself is lightweight and built around content similarity—no user tracking, just genre- and title-based matching. This keeps the logic understandable and the performance consistent for showcasing.

Stack & Deployment

I containerized the FastAPI backend using Docker and deployed it to Render. On the frontend, I used TypeScript with Next.js (App Router) to build a dynamic UI that fetches data from the API and walks the user through genre and movie selection.

This was also an opportunity to practice:

• Cross-origin communication between backend and frontend
• Error and loading state handling in React
• Environment-based configuration for dev vs. production

What I Learned

This project helped solidify my understanding of deploying Dockerized Python services and connecting them to a live frontend. I’ve used APIs in previous projects, but this was my first time deploying one to a public endpoint, integrating it into my own portfolio site, and making it user-facing.

What’s Next

I'd like to extend the recommender engine to incorporate collaborative filtering or external movie databases (like TMDb) for more robust suggestions. But for now, this project represents a well-rounded example of building, deploying, and integrating a full-stack application—something I'm proud to have running live on my site.