MovieApp

MovieApp is a React + Vite project I built for browsing movies quickly without a complicated UI.

You can load popular movies, search by title, save favorites, and open a full details page for each movie.

Tech Stack

React · Vite · TMDB API · React Router · Local Storage

Live Demo

https://my-app-fdd8.onrender.com/

Source Code

https://github.com/SAJIBxD/my-app

Screenshot

Home view of MovieApp deployed on Render.

What It Does

• Shows popular movies on first load.
• Lets users search by movie title.
• Supports add/remove favorite with a heart toggle.
• Saves favorites in browser local storage.
• Includes a details page with runtime, genres, rating, budget, and revenue.

Implementation Notes

• Routing: I used React Router for Home, Favorite, and Movie details (/movie/:id).
• State management: Favorites are handled through a MovieContext so the state stays shared and predictable.
• Persistence: Favorites are synced to localStorage, so refresh doesn’t clear everything.
• API layer: Data is fetched from TMDB using env variables (VITE_API_KEY, VITE_BASE_URL).
• Card behavior: Clicking a card opens details, while the heart button only toggles favorite state.

Challenges & Learnings

• Getting card interactions right took care (favorite toggle vs navigation click).
• Reusing one card component in both Home and Favorites kept the UI more consistent.
• Context + local storage is enough for this scope and keeps the app lightweight.

Next Improvements

• Add pagination or infinite scroll.
• Add filters for genre, year, and rating.
• Improve empty/error states with better loading feedback.
• Add user auth so favorites can sync across devices.