overview
a small react app i built as my first non-trivial react project after a coursework react module. two pages — a browse page that hits a movie api, and a favourites page that persists what the user has saved.
the goal wasn't a polished product. it was to internalise the patterns i'd seen in courses: hooks for local state, the context api for state that crosses components, and a service layer that keeps the api call out of the components themselves.
what's in it
services/api.js— isolates the third-party api call. if i ever swap providers, only this file changes.contexts/MovieContext.jsx— wraps the app and exposes the favourites list plus a toggle action. no redux, no zustand — context is the right tool for state this small.components/MovieCard.jsx— the per-film card, dumb and reusable.pages/Home.jsx— the browse view.pages/Favorites.jsx— reads the same context, renders the saved list.
what i learned
the first version put the api call directly inside Home.jsx. it worked, but the moment i added the favourites page i had to copy the fetch logic. pulling it out into services/api.js was the small lesson that stuck — components shouldn't know how data arrives, only that it does.
context api was the second lesson. i'd reached for prop drilling out of habit. once i switched to a context, the favourites toggle worked from any component without threading callbacks through the tree.
what it's not
this was a learning project, and the codebase shows it — plain css files per component, no test suite, no error boundaries. the polish would come from a rebuild on next.js with proper data fetching and server components, which is on the roadmap.