Movfix
Built a responsive movie discovery web app using React.js and the TMDB API, allowing users to browse movies and TV shows, search content, view ratings, cast information, reviews, recommendations, and watch trailers directly inside the app.
Purpose of the project
I built this project because I enjoy watching movies and wanted to create a movie website with my own style and viewing experience.
The goal was to make a web app where users can discover movies, check ratings and reviews, watch trailers, and browse related content through an interface that I could customize based on my personal taste.
The Process
The project started in July 2023. At first, I worked on it with a friend, but my friend mainly created the GitHub repository while I implemented most of the application.
This was my first real project after learning React.js, so it was a big challenge. I had to learn how to structure pages, manage routes, fetch data from an external API, and break the UI into reusable components.
I built pages for home, movie listing, TV shows, search results, genre filtering, movie detail, person detail, contact, and pricing. The app uses React Router for navigation and the TMDB API to load movie data dynamically.
Lesson learned
Learned how to build a complete React.js single-page application with multiple public routes using React Router DOM.
Practiced fetching and rendering real data from the TMDB API, including movies, TV shows, genres, cast, recommendations, videos, and reviews.
Built reusable UI components such as.
Implemented dynamic detail pages using URL params, allowing the same detail page to support both movies and TV shows.
Used SCSS Modules with classNames/bind to organize component-level styling and avoid class name conflicts.
Added interactive UI features such as pagination, load more, responsive sliders with React Slick, YouTube trailer modal playback, rating stars, loading states, and responsive layouts.
Learned the importance of consistent UI structure, data formatting, and separating pages/components to make the project easier to maintain.