FlickList is a React application allowing users to discover popular movies, search for their favorite films and create a personalised list of favourites. Built with React and powered by The Movie Database (TMDB) API, it offers a seamless movie browsing experience.
- Browse popular movies from TMDB
- Search functionality to find specific movies
- Add/remove movies to favourites
- Persistent favourites storage using localStorage
- Responsive movie grid layout
- Real-time search results
- Clean and intuitive user interface
- React
- React Router for navigation
- Context API for state management
- TMDB API for movie data
- Vite as the build tool
- CSS for styling
- Node.js (v14 or higher)
- npm
- TMDB API key
- Clone the repository:
git clone https://github.com/yourusername/flicklist.git
cd flicklist- Install dependencies:
npm install- Create a
.envfile in the root directory and add your TMDB API key:
VITE_API_KEY=your_tmdb_api_key_here- Start the development server:
npm run devflicklist/
├── src/
│ ├── components/
│ │ ├── MovieCard.jsx
│ │ └── NavBar.jsx
│ ├── contexts/
│ │ └── MovieContext.jsx
│ ├── pages/
│ │ ├── Home.jsx
│ │ └── Favourites.jsx
│ ├── services/
│ │ └── api.js
│ ├── css/
│ ├── App.jsx
│ └── main.jsx
- Displays a grid of popular movies on initial load
- Search functionality to find specific movies
- Responsive movie cards with poster images and basic information
- Add/remove movies to your favourites list
- Persistent storage using localStorage
- Dedicated favorites page to view all saved movies
- Toggle favorite status directly from movie cards
- Display movie poster
- Show movie title and release year
- Interactive favorite button
- Hover effects for better user experience
The application uses the TMDB API to fetch:
- Popular movies
- Search results
- Movie posters and details
- Vite API Issues How I solved npm not finding my API call