Welcome to the Movie Room project, a platform where you can explore a vast collection of movies and TV series using The Movie Database (TMDB) API. Additionally, this project features a custom backend powered by MongoDB for managing your movie preferences, such as adding to favorites or applying a custom ration to a particular movie/TV serial, updating the user's profile data, etc.
This project is a labor of love that originated from the desire to gain hands-on experience with cutting-edge web development technologies and tools. I set out with several goals in mind:
-
Learn Next.js 12: Next.js is a powerful and popular framework for building React applications. By using Next.js 12, I aimed to explore its latest features and capabilities. -
Implement Authentication with Next Auth: Security and user authentication are crucial aspects of any web application. I chose Next Auth to simplify the implementation of authentication and user management. -
Utilize The Movie Database (TMDB) API: Leveraging external APIs, like TMDB, allowed us to work with real-world data, create engaging user experiences, and learn about API integration. -
Practice MongoDB with Mongoose: Building a custom backend with MongoDB and Mongoose was an opportunity to delve into database design, schema modeling, and data persistence and provide a way to handle some specific project's features in a custom way and not depend on a third parties libraries and tools implementations. -
Explore Modern Web Development Patterns, tools, and libraries: Throughout the project, I aimed to adhere to best practices and modern development patterns, including component-based architecture responsive design, etc. Apart from that, one of the main goal of this project was to gain hands-on experience with cutting-edge web development technologies and tools.
Whether you're a seasoned developer looking to explore new technologies or a beginner eager to get your hands dirty with web development, I genuinely hope this project serves as a valuable resource and a source of inspiration.
-
Search and Browse: Easily search for movies and TV series and browse through a vast collection of titles. -
Movies and TV serials by genre and type: Easily browse movies and TV serials by their genre and types. -
Movie and TV serial trailer: Easily enjoy watching a trailer for a specific movie or TV serial. -
Detailed Information: Get detailed information about movies and TV series, including cast, ratings, release dates, trailers, etc.
-
Favorite Collection: Save your favorite movies and TV series to your personal collection for quick access. -
Ratings: Rate movies and TV series to share your opinions with the community. -
User Profile: Make needed updates in the Profile page, such as updating password, name, uploading avatar image, etc.
-
Custom Backend: Utilize a custom backend powered by MongoDB for data storage and retrieval. -
API Integration: Integrate seamlessly with The Movie Database (TMDB) API to access up-to-date movie and TV series information.
Next JS 12Next AuthReactReact QueryTypescriptTailwind CssMongoDBMongooseFormikYupJestReact Testing libraryReact infinite scroll componentReact loading skeletonReact dropzone, etc.
To get started with the Movie Room project, follow these steps:
-
Clone the repository via
HTTPSorSSHkey:via HTTPS
https://github.com/Dmytro1991ua/next-js-movie-app.gitvia SSH key
[email protected]:Dmytro1991ua/next-js-movie-app.git -
Install needed dependencies from the
rootdirectory:npm install -
Create a
.env.localfile in the root directory and set the following environment variables:Copy the following template into your .env.local file and replace the placeholders
(e.g., your_github_client, your_mongodb_uri, etc.)with your own credentials for services like GitHub, MongoDB, Google, NextAuth, and TMDB.GITHUB_CLIENT=your_github_client GITHUB_SECRET_KEY=your_github_secret_key GOOGLE_CLIENT=your_google_client GOOGLE_SECRET=your_google_secret NEXTAUTH_URL=your_nextauth_url NEXTAUTH_URL_INTERNAL=your_nextauth_url_internal NEXTAUTH_JWT_SECRET=your_nextauth_jwt_secret NEXTAUTH_SECRET=your_nextauth_secret MONGODB_URI=your_mongodb_uri NEXT_PUBLIC_TMDB_BASE_URL=your_tmdb_base_url NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key NEXT_PUBLIC_TMDB_IMAGE_URL=your_tmdb_image_url NEXT_PUBLIC_TMDB_SMALL_IMAGE_URL=your_tmdb_small_image_url
-
In order to run the project locally, run the following command from the root directory
npm run dev -
Open your browser and navigate to
http://localhost:3000to access theMovie Room.
Sign-in Page
Sign-up Page
Home Page
Movies Page
Serials Page
See More page
Search results Page
Profile Page
In order to work with real movie/TV serial data, I decided to leverage external API, like TMDB, and it allowed us to have access to a wide range of different kinds of data from TMDB API, such as movie or TV serial by their type, genre, casting, etc.
Endpoint
GET: /api/auth/session - Returns the current session (data) of the authenticated user
Example of returned data
{
"name": "Alex Smith 2",
"email": "[email protected]",
"id": "649fedb32d5b50662c0203b5",
"isCredentialsProvider": true
}
Endpoint
POST: /api/auth/sign-up - Creates a new user via Next Auth Credentials provider
Payload
{
"name": "Alex",
"password": "test-password",
"email": "[email protected]"
}
Example of returned data (response) when user exists in DB
{
"success": true,
"message": "User was successfully created"
}
Example of returned data (response) when user does not exist in DB
{
"success": true,
"message": "User is already exist",
}
Endpoint
PUT: /api/avatar - Returns the avatar data of the authenticated user
Payload
{
"user": {
"name": "Alex",
"email": "[email protected]",
"id": "64fc1b1f5aa3a15a8846ed04",
"isCredentialsProvider": true
}
}
Example of returned data
{
"success": true,
"data": {
"image": "data:image/png;base64,test-image",
"name": "Alex"
}
}
Endpoint
POST: /api/favorites - Returns user's favorite movies or TV serials
Payload
{
"name": "Alex",
"email": "[email protected]",
"id": "64fc1b1f5aa3a15a8846ed04",
"isCredentialsProvider": true
}
Example of returned data
{
"success": true,
"data": [
{
"genre_ids": [],
"origin_country": [],
"_id": "64fc29615aa3a15a8846ed07",
"adult": false,
"backdrop_path": "/tmU7GeKVybMWFButWEGl2M4GeiP.jpg",
"id": 238,
"original_language": "en",
"original_title": "The Godfather",
"overview": "Spanning the years 1945 to 1955, a chronicle of the fictional Italian-American Corleone crime family. When organized crime family patriarch, Vito Corleone barely survives an attempt on his life, his youngest son, Michael steps in to take care of the would-be killers, launching a campaign of bloody revenge.",
"popularity": 129.258,
"poster_path": "/3bhkrj58Vtu7enYsRolD1fZdja1.jpg",
"release_date": "1972-03-14",
"title": "The Godfather",
"video": false,
"vote_average": 8.706,
"vote_count": 18590,
"user": "64fc1b1f5aa3a15a8846ed04",
"isFavorite": true,
"createdAt": "2023-09-09T08:14:25.022Z",
"updatedAt": "2023-09-09T08:14:25.022Z",
"__v": 0
}
]
}
Endpoint
PUT: /api/rating - Returns user's custom rating data of a particular movie or TV serials
Payload
{
"user": {
"name": "Alex",
"email": "[email protected]",
"id": "64fc1b1f5aa3a15a8846ed04",
"isCredentialsProvider": true
}
}
Example of returned data
{
"success": true,
"data": [
{
"_id": "64fc29415aa3a15a8846ed06",
"id": 238,
"name": "The Godfather",
"rating": 10,
"user": "64fc1b1f5aa3a15a8846ed04",
"createdAt": "2023-09-09T08:13:53.667Z",
"updatedAt": "2023-09-09T08:13:53.667Z",
"__v": 0
}
]
}
Endpoint
PATCH: /api/profile - Returns updated user's profile data, such as avatar, name, password
Payload
{
"userInfo": {
"name": "Alex Smith",
"image": "data:image/png;base64,new-user-image",
"password": ""
},
"user": {
"name": "Alex",
"email": "[email protected]",
"id": "64fc1b1f5aa3a15a8846ed04",
"isCredentialsProvider": true
}
}
Example of returned data
{
"message": "Profile data has been updated successfully",
"success": true
}
In order to test the project's functionality I chose a combination of
JestandReact Testing Library
npm run test
In order to check application's tests coverage, you need to proceed with the following command within the root directory:
npm run test:coverage
