Build a Movie Review App Node & React - MERN Stack 2022
Practice your MERN Skills By Building Real World Projects - MongoDB, Express, React, Node, Cloudinary, Tailwind etc.
4.54 (54 reviews)
392
students
41.5 hours
content
Aug 2022
last update
$19.99
regular price
What you will learn
Actual hand on hand practice of React, Node JS, Express, Cloudinary and MongoDB
Create a beautiful web UI using Hot indemand tech React & Tailwind CSS
To put all the pieces together you have learned so far
To create a project which will make your portfolio stronger than ever.
New tips and tricks on the MongoDB, React, Node JS and the Cloud
Description
Welcome to this real world practical guide where we are going to practice our MERN or Full Stack Skills by building a Movie Review App like imdb. Where we will have our own API, admin panel to upload movies and the app for normal users. This course is for those who really want to learn the core concepts without using any libraries. We will use Node.js, Express, React (functional components), MongoDB, Tailwind, Mailtrap, Cloudinary, Sendinblue etc. We will build the entire frontend with React Functional components and Context API.
Inside this course we will build an advance movie review app like IMDB where you will have your own admin pannel to upload movies and users can rate the movie from 1 to 10. As admin you can see the progress, add, update or delete the movies.
Also you can create new actors whom you can then add inside movies as they are the actors of that particular movie. At the frontend we are going to create an advance UI like slider, live search, rating models, multiple forms, and many more using React JS and Tailwind CSS.
Building complete backend API with Node.js, Express, MongoDB, Cloudinary.
Role Based Authentication (Admin & Normal User).
User Authentication With Email Verification.
Protected Routes According to Role.
Password Reset Route.
Cloud Storage for Images and Videos
Advanced MongoDB Aggregation Concepts.
Building our Admin Panel With React & Tailwind.
Advance Form with complex validation and live search fields.
Custom auto scroll slider to display featured movies.
Building Complex UI with just React & Context API.
Handling Complex Form Without any library.
To Build this project we are going to Windows System.
Who is this course for.
This course is NOT for those who don't know anything about React and Node JS. This course is mainly for those people who want to practice their Full Stack Skills. If you already know a little bit of React and how to install node js inside your computer you can easily enroll into this course and rest you can leave it to me.
IMPORTANT:
All of this course is recorded on windows machine so take this course only if you can install Node, MongoDB and Github on Mac or Linux.
Screenshots
Content
Before we begin
Important Note - Before You Purchase
The Project Itself
How to Get Most?
Where is The Source Code
Basic Node Express & Project Initialization
Misconceptions in node js
Backend API
API Routes & Controllers
Installing Node JS
Setting up VS Code
Project Initialization
First Node JS Code
Our First Express Server
Refactoring with MVC Pattern
Think from the front end perspective
Creating New User (Sign up)
Installing Postman
API Prefix and The Nodemon
Post and Receving JSON
Installing MongoDB Locally
Connecting to Local MongoDB
What is NPM
Mongoose Models
Creating New User
Hashing Password
Preventing Duplicate User
Middlewares inside Express
Express Validator
Email Verification
Email Verification Why and How
Setting up mailtrap
Email Verification Token Schema
Sending Verification Email
Verifying Email Verification Token (OTP)
Comparing Hashed OTP to Verify Email Verification Token
Resend Email Verification Token (OTP)
Refactor
Reset Password
Model For Password Reset Token
Password Reset Controller
Sending Password Reset Link
Middleware to Check Reset Pass Token
Changing The User Password
User Sign In - Environment Variables & Error Handling
User Sign-in
Environment Variables
Async Await Error Handling
Creating Authentication UI
Design Something First
New Update From React 18
Initializing Project With React and Tailwind CSS
Creating User Navbar
Using react-icons
Sign in Form
Refactoring Signin Form
Finalizing Signin Form
Signup Form
Setting up React Router DOM
Forget Password Form
Email Verification OTP Form UI
Moving to Next OTP Field
Updating OTP State
Moving to Previous OTP Field
Moving to Previous From Empty OTP Field
Confirm Password Form
Fixing Navigation Login and Home Route
Understanding Context API
Enabling Dark Mode
Adding Dark Theme Class
Toggling Theme
Refactoring Theme Code
Different Color for Light & Dark Mode
Finalizing Theme
Signup State (userInfo)
Validating Signup Form
Fixing Create User Respnse and Setting up Axios
Sending User Info to Backend for Signup
Fixing CORS Error
Fixing 404 Not Found
Rendering Verification Page For Only Valid User
Handle Submit For OTP Form
OTP Validation
Verifing User Email With OTP
Notification Context & The Component
Updating Notification
Signing Token on Email Verification
Setting up Auth Context
Signin with Email and Password
Rendering Busy Indicator on Sign-in
Creating The isAuth Middleware
Making Request to is-auth
Redirect User to Home If Already Logged in
Handling Logout
Auto Sign in After Email Verification
Understanding Reset Password
Method for Forget Password & Handling Form State
Reading Query Params
Rendering Reset Password isVerifying Indicator
Handling Invalid and Valid Token
Fixing Small Bug
Validating New Password
Resetting New Password
Component to Resend Email Verification
Conditionally Rendering Resend Email Verification
Navigating to Resend Email Verification Component
Link to Reapply Email Verification OTP
Resending Email Verification Token
Refactoring Resend Email Verification Component
Uploading Actor
Actor Schema
Setting up Router For Actor
Missing Content
Middleware to Validate Actor
Multer Configuration
Configuring Cloudinary (A Cloud Storage)
Uploading Image To Cloudinary
Optionally Uploading Image
Updating Actor
Image Optimization
Deleting an Actor
Search Actor
Fetching Latest Actors (Records)
Fetching Single Actor (Record)
Refactoring Actor Controller
Role Based Authentication
Different Role For Different User
isAdmin Middleware
Routes Only For Admin
Movie Upload API
Creating Schema
How We Will Upload
Trailer Upload Route
Uploading Trailer Video to The Cloud
The First Step Towards Uploading a Movie
Data Structure of The Movie
The Complex Validation Logics
Fixing a Bug
Sending and Receiving Array and Objects
Creating a New Movie
Uploading Poster With Multiple Sizes
Storing Multiple Thumbnails
Update Movie API
Update Movie
Update Movie Without Poster
Update Movie With Poster
Removing Movie From DB + Cloud
Creating Admin Navbar
Before We Move Further
Sending Admin Role From Backend
Finding out if user is an Admin or Not
Different Navigator for Admin
Fixing Navigation Issue
Creating Navbar
Adding Icons For Nav Items
Logout Button
Making Admin Nav Visible Everywhere
Handling Logout from Admin Panel
Creating Search Bar and Create Button
Rendering Create Options
Refactoring Create Options
Toggling Options Modal
Adding Animation to Options Modal
Theme Toggling Button Inside Admin Panel
Closing Modal on Clicking Outside
Closing Options With Animation
Let Me Explain What We Did So Far
Refactoring Header Component
Movie Upload Modal
Understanding The Movie Uploading Process
Listining to Clicks Options
Creating Modal Container
React Drag Files to Upload Trailer Video
Rendering React Drag Drop Files
Accepting Only Video Files
Upload Trailer Method
Uploading Trailer From Our Frontend
Separate Component to Select Trailer Video
Component to Display Upload Progress
Refactoring Upload Progress Component
Getting Actual Upload Progress
Late Response From The Server Why?
Uploading Trailer in The Background
Movie Title Input Field
35 Refactoring Classes for Input Field
Creating Fake Input For Tags
Styling Tag Component
Separating Tags by Comma and Enter
Handling Backspace
Removing Tag on X Click
While Using Multiple Buttons inside A Form
Fixing Multiline Tag & Cutom Scroll Bar
Tags Input Scroll Into View
onFocus and onBlur on Fake Input Field
Live Search Field
Input For Live Search
Live Search Result Container
Live Search Result Item
Show & Hide Search Results
Moving Selection Up & Down
Creating Infinite Selection Loop
Scroll Into Result View
Reset Selection Index
Select Result On Enter Press
Fixing onClick on Results
Refactor Live Search Component Part 1
Refactor Live Search Component Part 2
Handling Form State
Managing Form States
Updating Tags Change inside Movie Info
Selecting Director Profile
Handling Writer Selection
Fixing Live Search Overlapping Problem
Badge to Display Selected Profiles
Reusable Modal Container
Modal to Display Writers Profile
Adding Styles to Writers Profile
Optionally Remove Container inside Modal
Removing Selected Writers
Creating Cast & Crew Form
Understanding Cast & Crew Form
Cast & Crew Form
Managing Cast Form State
Validating & Submitting Cast & Crew Form
Rendering Tool Tip
Hiding Label & View All Button
Cast Modal to Display Selected Cast & Crew
Removing Selected Cast
Refactor For Better User Experience
Let's Complete Movie Form
Little Fix inside Tags Input Component
Date Selector
Poster Input UI
Selecting & Rendering Poster
Genres Selector Button
Creating Genres Modal
Refactor Genre Buttons
Select & Unselect Genres
Submitting Selected Genres
Updating Genres inside Movie Info
Rendering Selected Genres Count
Rendering Previously Selected Genres
Select Option Component
Select Options
onChange for Select Options
Creating New Actors
We need to fix something
Refactoring Movie Upload Modal
Closing Options and Fixing Auto Scroll Issue
Creating Actor Upload Modal
Creating Actor Upload Form
Refactoring Poster Selector Component
Handling Actor Form State
Little Fix Before Submitting The Form
Accepting Gender Also
Actor Form Validation
Method to Create an Actor
Finally Creating an Actor
Closing Modal After Success Response
Little Refactor Again
Rendering Busy Indicator
Searching Real Actors
Section Introduction
Understanding Live Search
What is debounce function
Debounce is Just a Fancy Name
Writing our own debounce function
New Context to Handle Search
Creating useSearch Hook
Fianlly Searchig Actual Actor Profiles
Fixing Search Issue
Handling Writers State Change
Problem While Searching Writers
Separating Writers and Directors State
Resetting Writers Input and Fixing Auto Form Close Issue
Let's Make updaterFun an Optional Parameter
Refactoring Director Selector Component
Refactoring Writer Selector Component
Search Profile for Cast Form
Little More Refactor
Uploading Movies
Movie Form Validation
Fixing Movie Validation Logic
Making Poster an Optional Field in our Backend API
Handling Form Submission
Adding Values inside Form Data
Another Way to Generate Form Data
Let's Include Trailer Info As Well
Create Method to Upload Movie
Fixing Cast and Crew Object
Fixing UI & Rendering Busy Icon
Dashboard UI For Movie & Actor
Creating Info Container
Rendering 3 Containers in a Row
Refactoring Info Container
Design Idea for Latest Uploads
Container for Latest Uploads
Latest Uploads Movie Card
Refactor Time for Movie Card
Component for Actor Profile
Rendering Overlay on Actor Profile
Toggling Overlay
Styling Edit and Delete Button
Refactoring Actor Profile Component
Fetching & Rendering Movies & Actors With Pagination
Section Intro
Logic For Pagination System
Writing Logic For Pagination
Fetching Actors
Fixing The Pagination Logic
Rendering the Actor Profiles
Button For Next & Prev Page
The Working Next Button
Preventing Unwanted Fetch Request
Going Back To Previous Page
Fixing UI For Long Names
Refactoring Next and Previous Button
New Pagination Route For Movies
Making Movies Component Ready To Render Movies
Fetching and Rendering Movies
Moving to The Next Movies Page
Understanding What We Did So Far
Going Back to Previous Movies Page
Fixing a Little Bug
Update Delete & Search Actor
Handeling on edit click
Update Actor Modal
Passing Actor Info To Form
Updating an Actor
Changing Updated Profile Values Instantly
Actor Search Form
Handling Actor Search Form State
Searching & Rendering Actor Profiles
Rendering Search Reset Icon
Resetting Actor Search
Record Not Found
43 Fixing a Bug Inside Search Provider
Prevent From Empty Form Submission
Hiding Next and Prev With Little Refactor
Changing Search Logic Inside Backend
Confirm Modal
Delete Actor onConfirm
Fixing Selector Component Style
Update & Delete Movie
Handling On Edit Click for Movie
Movie Update Form (Modal)
Why Updating Movie is Not Easy
Creating Route to Get Data to Update Uovie
Format data before sending to frontend
Rendering movie data inside update movie form
Fixing Date Issue
Changing the Update Movie Method (Backend)
Create Update Method & Change Button Title
Finishing The Update Movie Part
Opening Movie Delete Confirm Modal
Finally Deleting The Movie
Fetching Latest Uploads For Admin
Movie Delete From Dashboard
Opening Update Form
Updating Movie
Search Movies
Search Movie Route
Search Move Route (Frontend)
Navigating to Search Movies on Form Submit
Grabbing query from the URL
Searching Movies
Rendering Result Not Found
Centralizing All Movies
New Context for Movies
Moving latest uploads to MoviesContext
Deleting Movie From Directly Inside MovieListItem
Updating Movie From Directly Inside MovieListItem
UI Update After Delete & Update Inside Search Page
Review API
Creating Review Modal
Setting up Review Router
Adding New Review Part 1
Adding New Review Part 2
Updating Review
Removing Review
Fixing Remove Review Logic
Get Reviews By Movie
Formatting review before sending to frontend
API for Normal Users
Understanding What Next
Route For Latest Uploads
Route For Single Movie
Formating Data For Single Movie
Calculating Average Ratings
What is Aggregations?
Calculating Average Ratings With Aggregation Pipeline
Refactoring response for reviews
Related Movies by Tags
Fetching Related Movies with Aggregation
Average ratings for related movies
Awaiting for all promises to be resolved
Route to get most rated movies
Average ratings for most rated movies
UI For Normal User (TopRatedMovies)
Plans For Upcoming Videos
Five Columns Grid Layout
Creating Responsive Grid Columns
Fetching Top Rated Movies
Styling Movie Cards Part 1
Styling Movie Cards Part 2
Refactoring Movie List Component
Fetching More Top Rated Movies
Navigating to Single Movie Page
UI For Normal User - The Slide Show
The Slider
Rendering Slide
Fetching Latest Uploads
Slide Show Controllers
Upadting Next Slide
Making Our Slider Infinite
Before Adding Animation
Slide in From Right
Slide in Animation For Every Slide
The Problem With Slider
Infinite Illusion With Cloned Slide
Handling Previous Slides
The Problem With Auto Slide
Clear Interval While Unmounting Component
Stop Slider While Opening Next Tab
Pause Slider While Clicking on Buttons
Rendering Movie Title
Refactoring Slide Component
Array Slice
Creating Upnext Slides
Rendering Up Next Slides
Navigating to Single Movie Page
Fixing The Slider
Single Movie Page
Fetching Single Movie
Rendering Not Ready State
Rendering Movie Info
Refactor Rating Stars Component
Different Format For More Than 999 Reviews
Rate The Movie Button
Rendering Director & Writers Name
Rendering Cast Language & Other Important Things
Rendering Genres & Type
Rendering Cast Profiles
Rendering Related Movies
Redirect User to Signin Page
Adding Review
Creating Rating Modal
Text area & Submit Button
Different Icons for Selected Ratings
Rendering only Selected Ratings
Form State & Submission
Refactoring Review Form
Handling State For Rating Modal
Fixing The NaN Bug
Adding New Review
Updating UI on New Review
Refactor & Fixing Problems
Custom Button Link
Refactoring Single Movie UI
Refactoring Cast Profiles
Making a Little Bit Responsive
Fixing Gradient Problem
Let's Use The AbortController
AbortController for Every Component
Sending Back Responsive Images
Rendering Smaller Images
Fixing Double Opening Trailer Selector
Fixing Auto Form Closing on Error
Not Getting Trailer Selector in Second Time
Creating Actor Profile Modal
Fetching & Styling Actor Profile Modal
Let's Work WIth Movie Reviews
Movie Reviews Page
Review Card Component
Fetching & Rendering Reviews
Finding Profile Owners Review
Edit & Delete Button For Review
Display Confirm Modal
Deleting The Review
No Reviews if Empty
Rendering Movie Title
Review Edit Modal
Updating Review
Updating UI on Update Review
Finishing Up Admin Panel
Route to Get App Info
Fetching & Rendering App Info
Converting to Local String
Route For Most Rated From All Types
Fetching Most Rated Movies
Styling Most Rated Movies List
Rating Not Allowed for Not Verified User
Finishing Up User UI
Making Home Page Responsive
Fixing Lag inside SlideShow
Refactoring App Search Form
Making Navbar Responsive
Search Public Movies API Route
Search Movie Method (frontend)
Search Movies For Normal Users
Navigating to Search Movies
Deploying Our Apps
The Plan
Creating Real Mongodb Database
Pushing React App To Github
Pushing Node API To Github
Creating Digitalocen Account
Deploying Our Frontend App
Deploying Our Backend API
Fixing Node Version
Bringing back all old movies
Changing The Base URL
Setting up Sendin Blue
Adding New Custom Domain
Domain Verification and Configure New Send Email Method
Changing Mail Trap WIth Sendin Blue
Updating new environment variables
Lets See Our Final Result
Reviews
Kyoya
July 11, 2022
I have taken several MERN stack tutorials and this is definitely the best.
His explanations are thorough and clear.
Lots of aha moments and very informative.
Thanks to Niraj for your great work.
I look forward to your future tutorials.
Jordan
June 20, 2022
Amazing tutorial for begginers who want to start making a good project and polishing their skills along the way
Shubhayu
June 7, 2022
Not a beginner friendly course you need to have an advanced knowledge of JS, React JS and basics of Node JS.
Stressunfit
June 6, 2022
So far its a good experience. Instructor makes it easy to understand. I'll update my review as I move through the course.
Charts
Price
Rating
Enrollment distribution
Related Topics
4527016
udemy ID
2/1/2022
course created date
5/2/2022
course indexed date
Bot
course submited by