Movflix
A film, TV series, and actor catalogue designed to make the "what should I watch?" decision as fast and frictionless as possible.
Overview
Movflix started as a personal project to solve a specific problem: I kept opening five different tabs whenever I wanted to find something worth watching — IMDb for ratings, Wikipedia for cast, Google for trailers, and so on. The goal was to consolidate that into one clean interface with enough context to make a decision without leaving the page.
The project grew into a full catalogue covering films, TV series, and actors, with filtering, search, and detail pages for each entry. The design priority was speed — both in terms of performance and the time it takes a user to land on something they want to watch.
Role
Solo — design, frontend, API integration
Status
Live and maintained
Year
2024
Key features
Browse & search
Search across films, shows, and actors simultaneously. Results are ranked by relevance and freshness.
Filter by genre, year, rating
Layered filtering that narrows results without hiding the context of what you're filtering out.
Detail pages
Each film, series, and actor has a dedicated page with cast, related titles, ratings, and a short synopsis.
Responsive across all devices
Built mobile-first. Browsing from a phone on the couch was a primary use case, not an afterthought.
Film detail page
Search results view
Tech stack
Frontend
- React + TypeScript
- Tailwind CSS
- React Router
Data
- TMDB REST API
- Axios for fetching
- Client-side caching
Tooling
- Vite
- ESLint + Prettier
- Git + GitHub
Challenges
- The TMDB API returns inconsistent data shapes depending on media type. Normalising those into a predictable structure early saved a lot of conditional rendering downstream.
- Pagination and infinite scroll needed to feel seamless — users shouldn't lose their place when navigating back from a detail page.
- Search had to feel instant. Implemented debouncing and request cancellation to avoid race conditions on fast typists.
What I learned
- How to design a component library around uncertain data — building defensively for missing fields, long strings, and empty states.
- The value of investing in a solid data-fetching layer early. Retrofitting it later costs more time than doing it right the first time.
- TypeScript's generics became genuinely useful here for typing API responses. It pushed me to think more carefully about data contracts.
What I'd improve next
A watchlist feature with local persistence is the most-requested thing missing. I'd also like to add a "similar to" recommendation engine on detail pages, and improve the filtering UI for mobile — the current approach works but feels cramped on smaller screens. Performance-wise, switching from client-side caching to a proper server-side layer would make the initial loads more consistent.