A modern React application for discovering, tracking, and managing movies. Built with React, Vite, and TMDB API, this app allows users to explore random movies, search for specific titles, and maintain personal watchlists.
- Random Movie Discovery: Explore random popular movies with a refresh option
- Search Functionality: Search for movies using TMDB's extensive database
- Personal Watchlists:
- Add movies to "To Watch" list
- Mark movies as "Watched"
- Remove movies from either list
- Responsive Design: Seamless experience across all devices
- Modern, minimal design
- Intuitive navigation
- Smooth animations and transitions
- Consistent movie card layout across all views
- React 19
- React Router v7 for navigation
- Context API for state management
- Vite for build tooling
- TMDB API for movie data
- Font Awesome for icons
- CSS3 for styling (no external UI libraries)
- Node.js (v14 or higher)
- npm or yarn
- TMDB API key
- Clone the repository:
git clone https://github.com/Nimasaghi-dev/movie-app.git- Install dependencies:
cd movie-app
npm install- Create a
.envfile in the root directory:
VITE_TMDB_KEY=your_tmdb_api_key_here- Start the development server:
npm run dev- Browse random popular movies
- Click "Refresh" to load new movies
- Add movies to your watchlist or mark as watched
- Click "+ Add" in the navigation
- Search for movies by title
- Add movies to your lists directly from search results
- "To Watch": View and manage your watchlist
- "Watched": Track movies you've watched
- Easy movement between lists with intuitive controls
- Movie poster
- Title and release year
- Action buttons for list management
- Hover effects for better interaction
- Responsive header
- Clear navigation links
- Active state indicators
- TMDB for their extensive movie database
- Font Awesome for the icons