RetroFlix
A full-stack movie information app inspired by Netflix, built with the MERN stack. It allows users to view details about movies, manage their profile, and curate lists of favorites or movies to watch.
The Overview
RetroFlix was designed to provide users with a seamless way to browse and store information about movies. The app is connected to a MongoDB database through a RESTful API built with Node.js and Express, delivering JSON-formatted data to the front end.
The goal was to create a functional full-stack application that could handle authentication, manage user data, and allow interaction with a database and server through a React-based interface.
The Approach
I started by creating the MongoDB database and designing collections to store movies, users, and lists. I then built a RESTful API using Node.js and Express to interact with the database via standard HTTP methods (GET, POST, PUT, DELETE), returning JSON data for the frontend.
After the API was functional, I created a React-based interface, including multiple views: a movie view, login and registration views, and a profile page where users can update their info and manage their favorites and to-watch lists. Security was implemented through JWT authentication, password hashing, and CORS handling. The app was deployed using Heroku and Netlify.
The Challenges
The main challenge was connecting all parts of the MERN stack for the first time. Ensuring smooth communication between the React frontend, the Node/Express API, and the MongoDB database required planning and debugging. Handling authentication securely and managing state between different views also took significant effort.
The Outcome
RetroFlix is now a fully functional, deployed application. Users can browse movie details, manage profiles, and store favorites or to-watch lists. Building this app significantly improved my understanding of full-stack development, API design, and React state management.
View the app here:
Future Steps
Future improvements: Possible next steps for RetroFlix include:
- Enhancing the UI/UX with more polished designs
- Implementing better error handling for API requests
- Adding search, filter, and sorting functionality for movies
- Integrating external movie APIs to enrich the database with more content
