MovieDb

Watch your favorites

MovieDb is a full-stack application that allows users to search for any movie and view detailed information using the OMDb API. Designed to replicate the sleek, engaging style of popular movie databases and streaming platforms like Netflix, Disney+, and Amazon Prime Video, the app delivers a familiar yet custom experience.

Users can explore movie details, watch trailers, add or remove titles from their favorites list, and even shop for the movie via Google Shopping integration. Movie information is displayed in an interactive modal, creating a clean, immersive user interface.

Built with the MERN Stack—MongoDB, Express, React, and Node.js—this project also utilizes React Bootstrap, React Router DOM, Mongoose, React FontAwesome, and React Notifications Component. I developed all aspects of the application, including:

  • Designing the MongoDB schema and database structure.
  • Implementing multiple OMDb API queries to retrieve rich movie data.
  • Creating API routes through Mongoose and React for storing and retrieving favorites.
  • Building full CRUD functionality and implementing smooth UI animations.
  • Ensuring mobile responsiveness and deploying the app to Heroku.

One of the most challenging (and rewarding) features to develop was the toggle button for adding and removing movies from the favorites list. This feature required coordinating multiple actions with a single click—sending API requests, updating the database, and triggering the correct animations based on the movie’s status. This problem-solving experience strengthened my ability to integrate backend logic with intuitive frontend interactions.