This project utilizes the MERN (MongoDB, Express.js, React.js, Node.js) stack to create a comprehensive platform for exploring entertainment content. Leveraging the TMDB API, it provides detailed information about movies, TV series, and personalities. The user interface is designed using Material-UI (MUI), ensuring a modern and intuitive experience. Whether you're looking for the latest movies, binge-worthy TV shows, or insights into your favorite actors, our website offers a seamless way to discover and explore entertainment content.
MoonFlix is a comprehensive platform designed to explore and discover information about movies, TV shows, and personalities. Leveraging the TMDB API, the website offers a seamless user experience with a focus on detailed content and intuitive navigation.
The purpose of is to provide users with a centralized hub where they can access detailed information about:
- Movies: Explore details such as plot summaries, cast members, ratings, and release dates.
- TV Shows: Discover information about seasons, episodes, cast members, and more.
- Persons: Explore information about actors and their credits within the entertainment industry.
-
Trending Section: Display trending movies and web series.
-
Media Categories:
- Popular
- Top Rated
- Now Playing
- Upcoming
-
Detailed Media Pages: Each media page includes:
- Poster
- Overview
- Cast
- Videos
- Backdrops
- Reviews
- Recommendations
-
Detailed Persons Pages: Each person's page includes:
- Biography
- Credits
-
Filtering: Filter content based on genres.
-
Sorting Options: Sort content by criteria such as:
- Vote Count
- Popularity
- Revenue
-
Search Functionality: Search for movies, TV series, and persons.
-
User Authentication:
- Sign In
- Sign Up
- Password Reset
-
User Interaction:
- Favorite Lists
- User Reviews
- React.js - JavaScript library for building user interfaces. Reference
- HTML/CSS - Standard web technologies for structuring and styling web pages.
- Material-UI (MUI) - React components library for building UI components. Reference
- Node.js - JavaScript runtime for server-side applications. Reference
- Express.js - Web framework for Node.js, used for building APIs and handling HTTP requests. Reference
- MongoDB - NoSQL database used for storing application data. Reference
- axios - HTTP client for making requests to the TMDB API and server. GitHub
- jsonwebtoken - Library for generating and verifying JSON Web Tokens (JWTs) for authentication. GitHub
- mongoose - ODM library for MongoDB and Node.js. Reference
- react-router-dom - DOM bindings for React Router, for handling navigation and routing. GitHub
- react-redux - Official Redux binding for React to manage state. GitHub
- formik - Form library for React. GitHub
- yup - Schema validation library for JavaScript objects. GitHub
- The Movie Database (TMDB) - API for retrieving movie and TV show data. Reference
Before starting, ensure you have the following installed:
- Node.js: Download and install Node.js from nodejs.org, which includes npm.
Clone the project repository from GitHub:
git clone https://github.com/Nikhil241103/Movies-Website.git
cd Movies-Website
Client (Frontend)
cd client
npm install
Server (Backend)
cd ../server
npm install
- Create a .env file in the server directory according to .env.example file.
- Update the variables in .env as necessary for your local setup. Ensure you add .env to your .gitignore file to keep sensitive information secure.
Client (Frontend)
cd client
npm start
Access the frontend at http://localhost:3000.
Server (Backend)
cd ../server
npm start
The backend runs at http://localhost:5000.
Open your web browser and go to http://localhost:3000 to view the frontend application.
-
Video Tutorial: I would like to acknowledge the YouTube video tutorial by Tran Anh Tuat for providing valuable insights during the development of this project.
-
GitHub Repository: I referenced code and ideas from the GitHub repository by Tran Anh Tuat at github.com/trananhtuat/fullstack-mern-movie-2022. It served as a helpful resource throughout the development process.