Discover your next favorite movie with MovieMate - the ultimate movie guide with a hand-picked selection of the best films.
MovieMate is a movies showcasing web app built using the MERN Stack. On MovieMate, how can see our curated list of content, immersive detail of movie and find out the perfect movie to watch. MovieMate uses the power of NextJS and ReactJS to provide blazing fast content and a great user experience. From Static Side Generation to ServerSide Rendering to API Routes, it's all there in MovieMate.
You can try MovieMate by visiting: https://moviemate-app.vercel.app/
 |
 |
 |
 |
 |
 |
 |
 |
- MovieMate is created using NextJS, ReactJS and MaterialUI.
- MovieMate uses the power of NextJS ServerSide rendering to provide content blazing fast.
- The HomeScreen of MovieMate uses Static Site Generation with Incremental Static Regeneration set to every hour which makes it load instantly, so you dont have to wait.
- MovieMate uses the power of NextJs Api routes to make api calls to TMDB Api and prepare data for the screen
- MovieMate is highly responsive and looks great on all devices.
- All the React components and package structure is properly organized.
- NextJs - Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.
- React - The library for web and native user interfaces.
- MaterialUI - MUI offers a comprehensive suite of UI tools to help you ship new features faster.
- Axios - Promise based HTTP client for the browser and node.js
- TMDB API - The Movie Database (TMDb) is a community built movie and TV database.
- Typescript - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
To clone this project and customize it further, you need to do a couple of tasks first:
-
Clone this project. You can directly download the source code .zip file, or you can use the git clone command in terminal
-
Once successful, open your preferred IDE and run some tasks and write some setup code.
-
Run the following commands in your terminal
npm install -
After this, create a new file with the exact name of ".env.local"
-
In the .env file, write:
TMDB_API_KEY=Your TMDB API Key BASE_URL=For development use http://localhost:3000 and for production use the domain on which you are hosting the app -
You are all set up now! To start the app in development mode, run:
next dev -
And to start the frontend in production mode, run:
next build next start -
Then write localhost:3000 in your browser to be able to use MovieMate!
If you need any help, you can connect with me.
Visit:- Vaibhav Jaiswal