This is a beautiful Movie application built using React that allows users to browse, search, and explore movies and TV shows. The app offers a clean and user-friendly interface, showcasing trending, popular, and top-rated movies in carousel form. Users can also filter, sort, and view detailed information for each movie or TV show, including trailers, cast, and similar recommendations.
Note: Due to restrictions on Jio network or Jio SIM data, the TMDB API may not work on this network. To view this site, please use a VPN.
Movies App by Jitendra - Live Demo
-
Home Page
The homepage displays trending, popular, and top-rated movies in a visually appealing layout. -
Movie Details Page
This page provides detailed information about a selected movie or TV show, including trailers, cast, and similar movies.
- Trending Movies: Display trending movies, giving users the option to filter by day or week.
- Popular and Top Rated Movies: Show what's popular and the top-rated movies and TV shows, presented in carousel form.
- Carousel Navigation: For larger screens, provide buttons to navigate left or right within the carousels.
- Movie/TV Show Selection: Allow users to choose between popular movies or TV shows, and see top-rated content.
- Search Functionality: Users can search for any movie or TV show through the search bar.
- Detailed Information: Display detailed information about selected movies or TV shows, such as:
- Poster image
- Rating
- Genres
- Release date
- Filters and Sorting: Let users apply filters and sorting options to their movie or TV show searches.
- Trailer Playback: Give users the option to watch official trailers.
- Similar Movies: Show a list of similar movies or TV shows on the details page.
- Favorites: Allow users to mark movies or TV shows as favorites.
- Search Movies or TV Shows: The search bar allows users to easily find their favorite content.
- Trending Section: Users can toggle between trending movies for the day or week.
- Popular and Top Rated Movies/TV Shows: The app highlights the most popular and highest-rated content.
- Detailed View: Clicking on a movie or TV show will bring up a detailed view with information such as:
- Name
- Rating
- Overview
- Status, release date, runtime
- Director, writers, and top cast (with images and roles)
- Official Videos: Users can view trailers and other official videos related to the movie or show.
- Recommendations: Similar and recommended content is displayed to help users discover more movies or TV shows.
- Favorites: Users can save their favorite movies or TV shows for easy access.
- Home: General landing section.
- Trending: Displays trending movies for the day or week.
- What's Popular: Highlights popular movies or TV shows.
- Top Rated: Shows top-rated content based on user ratings.
- Movie Details Home: Overview of the selected movie or TV show.
- Top Cast: Displays the top cast with their images and roles.
- Official Videos: Trailers and official content related to the movie.
- Similar Movies: A list of movies similar to the current selection.
- Recommendations: Additional movie or TV show recommendations.
- React: For building the user interface.
- TMDB API: To fetch movies and TV shows data.
- Axios: For making HTTP requests to the API.
- Day.js: To handle and format dates.
- react-icons: For icons throughout the app.
- react-circular-progressbar: For displaying progress bars (e.g., ratings).
- react-lazy-load-image-component: For lazy loading images, improving performance.
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/jitendrasuthar995/movies-app.git
-
Navigate to the project directory:
cd movies-app -
Install dependencies:
npm install
-
Start the development server:
npm start
The project will be available at http://localhost:3000/.
This project is open-source and available under the MIT License.
This project provides an excellent foundation for movie and TV show discovery apps, integrating APIs, lazy loading, and responsive design to deliver a smooth and visually rich user experience.