Movflix
A film, TV series, and anime discovery app — browse and search millions of titles, track what you've watched, and get personalised recommendations based on your history and favourites.
Overview
Movflix started as a way to consolidate the five tabs I'd open whenever I wanted to find something worth watching — IMDb for ratings, Wikipedia for cast, Google for trailers. The goal was one clean interface with enough context to make a decision without leaving the page.
It grew considerably beyond that. The app now covers films, TV series, and a full anime section backed by MyAnimeList data — including real genre filters, character pages, OP/ED themes, and related entries. Users can sign in via Clerk, track what they've watched, rate titles, and get personalised recommendations based on that history.
Role
Solo — design, frontend, API integration
Status
Live — deployed on GitHub Pages
Year
2024 – 2025
Key features
Anime section (MAL-powered)
Full anime catalogue via the Jikan API — top-rated, current season, and popular lists with real genre filters (Shonen, Seinen, Shoujo, and more). Show pages are enriched with MAL scores, character lists, OP/ED themes, and related entries injected alongside the TMDB data.
Watch tracking & personalised picks
Sign in with email or Google via Clerk. Favourite, watchlist, and watched lists are persisted across sessions. Star ratings (1–5) feed into a recommendation engine that surfaces similar titles based on your history — a step beyond genre-based filtering.
Full catalogue depth
Season and episode guides for TV shows. Cast and crew pages with individual filmography. Regional streaming provider data ("Where to Watch"). Four languages (EN / RU / ES / FR) via react-i18next. Dark and light theme.
Browse view
Anime browse
Tech stack
UI & State
- React 18 + TypeScript
- Redux Toolkit + redux-persist
- TanStack Query (server state)
- Tailwind CSS
- Framer Motion
Data & Auth
- TMDB API (movies & TV)
- OMDb API (ratings)
- Jikan API v4 (MAL / anime)
- Clerk (email + Google auth)
Tooling & i18n
- React Router v6
- react-i18next (EN/RU/ES/FR)
- react-helmet-async (SEO)
- GitHub Pages (gh-pages)
Challenges
- TMDB, OMDb, and Jikan all return different schemas for what is conceptually the same data. Building a normalisation layer that stitched them together cleanly — so that an anime show page felt as consistent as a film page — required careful upfront data modelling.
- The Jikan API (unofficial MAL wrapper) has strict rate limits and no API key. Building a request queue with debouncing and local caching inside the Jikan client was necessary to avoid 429s during normal browsing.
- Persisting watchlist, ratings, and favourites locally with redux-persist while also syncing them against Clerk's auth state introduced edge cases around account switching and first-load hydration.
What I learned
- Separating server state (TanStack Query) from client state (Redux) made the codebase significantly easier to reason about as the feature count grew. The boundary between the two forced clearer thinking about what actually needs to be global.
- Internationalising a React app across four languages is straightforward at the component level but requires discipline at the data layer — dynamically translated content from APIs doesn't fit neatly into i18n namespaces.
- Deploying a React SPA to GitHub Pages has real constraints around routing — hash routing vs. history mode, 404 fallbacks, and environment variables baked at build time. Small project, good lesson in deployment trade-offs.
What I'd improve next
The recommendation engine is purely client-side right now — it matches on genres and ratings, but doesn't have a model behind it. A lightweight backend that could log interactions and build proper collaborative filtering would make the "personalised picks" feature genuinely useful rather than a heuristic. I'd also like to move the Jikan caching from in-memory to a proper server-side layer to reduce cold-load times on the anime section.