You can view the live version of this application here: Cinemate Live Demo
Cinemate is a React application that allows users to explore movies, view actor details, create favorite lists, and manage their movie watchlist using The Movie Database (TMDb) API. The application includes features like search functionality, pagination, theming, and user authentication, all integrated with Redux and Material-UI.
- Search and Filter: Browse movies by genre, category (e.g., popular, top-rated), or keyword search.
- Movie Details: View movie information including cast, runtime, and rating.
- Actor Profiles: Access actor profiles and see the movies they've appeared in.
- User Authentication: Login using TMDb API for a personalized experience, including favorites and watchlist management.
- Responsive Design: Optimized for mobile and desktop screens.
- Light/Dark Mode: Toggle between light and dark themes.
- Pagination: Load more movies with pagination for a smoother browsing experience.
- React with Hooks
- Redux Toolkit for state management
- React Router for client-side routing
- Material-UI for UI components and theming
- TMDb API for movie data
- Axios for HTTP requests
Make sure you have the following installed:
- Node.js (v14+)
- npm or yarn
-
Clone the repository:
git clone https://github.com/MAlkisla/CineMate-MovieApp.git cd CineMate-MovieApp
-
Install dependencies:
npm install
or if you're using yarn:
yarn install
-
Set up Environment Variables:
Create a
.env
file in the root directory and add your TMDb API key:REACT_APP_TMDB_KEY=your_tmdb_api_key
-
Start the development server:
npm start
or if using yarn:
yarn start
The app will be available at
http://localhost:3000
.
- Browse Movies: By default, the home page shows a list of popular movies. Use the categories and genre filter in the sidebar to explore more.
- Search: Use the search bar to find movies by title.
- Movie Details: Click on any movie to see detailed information, cast, and recommendations.
- Actor Profiles: From the movie details page, click on an actor's name to view their profile.
- Favorites & Watchlist: After logging in, you can add movies to your favorites or watchlist.
- User Profile: Access your profile to view your favorite movies and watchlist.
- Light/Dark Mode: Toggle between light and dark themes using the sun/moon icon in the navbar.
The project is organized into main folders like components, features, services, and styles. Below is an overview of the project structure and the role of each file:
.
├── build # Compiled production build files
├── public
│ └── index.html # HTML template for React App
├── src # Main source code for the application
│ ├── app # Redux store configration
│ ├── assets # Images and other static assets
│ ├── components # Reusable and independent React components
│ │ ├── Actors # Component to display actor details
│ │ ├── MovieInformation # Component for displaying movie details
│ │ ├── Movies # Main component to list movies
│ │ ├── NavBar # Navigation bar component with search and login
│ │ ├── Sidebar # Sidebar with genre and category filters
│ │ ├── Profile # User profile component to display favorites and watchlist
│ │ ├── Search # Search input component
│ │ └── Pagination # Component to handle pagination functionality
│ ├── features # Redux slices for state management
│ │ ├── auth.js # Manages user authentication state
│ │ └── currentGenreOrCategory.js # Manages genre or category selection state
│ ├── services # API services (TMDb)
│ │ └── TMDB.js # TMDb API setup and endpoints configuration
│ ├── utils # Utility functions and color mode toggle
│ │ ├── ToggleColorMode.jsx # Dark/Light mode toggle context provider
│ │ └── index.js # Utility functions for API token management
│ ├── index.js # Entry point for rendering App
│ └── index.css # Global CSS style
├── .env # Environment variables
├── .gitignore # Files and directories ignored by Git
├── README.md # Project documentation
└── package.json # Dependencies and scripts for the project
If found helpful please press a ⭐.
Meriç Alkışla
Mail ID | LinkedIn | GitHub | HackerRank
"Any suggestions would be appreciated"