Build a Movie Review App Node & React - MERN Stack 2023
Loại khoá học: Web Development
Practice your MERN Skills By Building Real World Projects - MongoDB, Express, React, Node, Cloudinary, Tailwind etc.
Mô tả
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.
Bạn sẽ học được gì
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
Yêu cầu
- Basic knowledge about HTML and CSS
- Some programming knowledge with JavaScript
- Who are really ready to face the challenge
Nội dung khoá học
37 sections
Important Note - Before You Purchase
00:31
The Project Itself
05:20
How to Get Most?
01:00
Where is The Source Code
00:15
Show Me Final App
00:31
Misconceptions in node js
02:43
Backend API
02:04
API Routes & Controllers
02:55
Installing Node JS
03:44
Setting up VS Code
02:16
Project Initialization
03:48
First Node JS Code
02:12
Our First Express Server
08:48
Refactoring with MVC Pattern
09:15
Think from the front end perspective
02:39
Installing Postman
03:21
API Prefix and The Nodemon
06:59
Post and Receving JSON
05:30
Installing MongoDB Locally
02:24
Connecting to Local MongoDB
05:23
What is NPM
01:52
Mongoose Models
04:13
Creating New User
05:25
Hashing Password
06:09
Preventing Duplicate User
04:59
Middlewares inside Express
05:53
Express Validator
08:30
Email Verification Why and How
03:16
Setting up mailtrap
03:19
Email Verification Token Schema
06:43
Sending Verification Email
08:53
Verifying Email Verification Token (OTP)
05:55
Comparing Hashed OTP to Verify Email Verification Token
10:44
Resend Email Verification Token (OTP)
10:43
Refactor
09:53
Model For Password Reset Token
02:26
Password Reset Controller
03:49
Sending Password Reset Link
11:32
Middleware to Check Reset Pass Token
09:51
Changing The User Password
11:36
User Sign-in
13:22
Environment Variables
05:33
Async Await Error Handling
07:59
Design Something First
02:22
Important! New Update From React 18
00:20
Initializing Project With React and Tailwind CSS
09:04
Creating User Navbar
10:56
Using react-icons
06:33
Sign in Form
16:14
Refactoring Signin Form
05:01
Finalizing Signin Form
04:49
Signup Form
02:02
Setting up React Router DOM
10:48
Forget Password Form
02:40
Email Verification OTP Form UI
11:09
For Firefox Support
00:11
Moving to Next OTP Field
11:10
Updating OTP State
04:17
Moving to Previous OTP Field
05:00
Update for React 18 - Breaking Changes For OTP Field
01:07
Moving to Previous From Empty OTP Field
02:24
Confirm Password Form
05:36
Fixing Navigation Login and Home Route
01:58
Understanding Context API
07:42
Enabling Dark Mode
02:14
Adding Dark Theme Class
04:24
Toggling Theme
03:39
Refactoring Theme Code
03:28
Different Color for Light & Dark Mode
06:20
Finalizing Theme
08:52
Signup State (userInfo)
07:28
Validating Signup Form
08:14
Fixing Create User Respnse and Setting up Axios
03:34
Sending User Info to Backend for Signup
08:26
Fixing CORS Error
04:27
Fixing 404 Not Found
03:06
Rendering Verification Page For Only Valid User
08:40
Handle Submit For OTP Form
02:53
OTP Validation
09:15
Verifing User Email With OTP
06:54
Notification Context & The Component
09:49
Updating Notification
11:26
Signing Token on Email Verification
04:26
Setting up Auth Context
11:02
Signin with Email and Password
10:35
Rendering Busy Indicator on Sign-in
04:52
Creating The isAuth Middleware
14:25
Making Request to is-auth
06:05
Redirect User to Home If Already Logged in
05:22
Handling Logout
03:16
Auto Sign in After Email Verification
07:05
Understanding Reset Password
01:35
Method for Forget Password & Handling Form State
08:45
Reading Query Params
06:37
Rendering Reset Password isVerifying Indicator
03:30
Handling Invalid and Valid Token
07:51
Fixing Small Bug
01:39
Validating New Password
07:01
Resetting New Password
08:24
Component to Resend Email Verification
06:02
Conditionally Rendering Resend Email Verification
02:51
Navigating to Resend Email Verification Component
03:09
Link to Reapply Email Verification OTP
02:51
Resending Email Verification Token
05:20
Refactoring Resend Email Verification Component
02:36
Actor Schema
03:31
Setting up Router For Actor
04:26
Multer Configuration
04:36
Middleware to Validate Actor
03:04
Configuring Cloudinary (A Cloud Storage)
06:35
Uploading Image To Cloudinary
06:59
Optionally Uploading Image
02:13
Updating Actor
10:52
Image Optimization
03:53
Deleting an Actor
04:21
Search Actor
06:30
Fetching Latest Actors (Records)
04:14
Fetching Single Actor (Record)
02:24
Refactoring Actor Controller
09:17
Different Role For Different User
03:07
isAdmin Middleware
02:03
Routes Only For Admin
02:44
Creating Schema
13:27
How We Will Upload
03:03
Trailer Upload Route
05:27
Uploading Trailer Video to The Cloud
06:34
The First Step Towards Uploading a Movie
04:38
Data Structure of The Movie
03:34
The Complex Validation Logics
19:05
Fixing a Bug
01:21
Sending and Receiving Array and Objects
08:23
Parse Data
04:50
Creating a New Movie
05:40
Uploading Poster With Multiple Sizes
10:13
Storing Multiple Thumbnails
10:00
Update Movie
03:14
Update Movie Without Poster
08:43
Update Movie With Poster
10:50
Removing Movie From DB + Cloud
09:06
Before We Move Further
03:39
Sending Admin Role From Backend
02:57
Finding out if user is an Admin or Not
02:05
Different Navigator for Admin
03:37
Fixing Navigation Issue
04:09
Creating Navbar
06:30
Adding Icons For Nav Items
05:14
Logout Button
05:38
Making Admin Nav Visible Everywhere
06:58
Handling Logout from Admin Panel
01:41
Creating Search Bar and Create Button
06:17
Rendering Create Options
04:44
Refactoring Create Options
01:52
Toggling Options Modal
01:41
Adding Animation to Options Modal
04:08
Closing Modal on Clicking Outside
08:18
Important! issue with dropdown
01:45
Closing Options With Animation
07:12
Let Me Explain What We Did So Far
07:05
Refactoring Header Component
01:23
Theme Toggling Button Inside Admin Panel
05:36
Understanding The Movie Uploading Process
05:07
Listining to Clicks Options
04:32
Creating Modal Container
04:33
React Drag Files to Upload Trailer Video
03:39
Rendering React Drag Drop Files
04:36
Accepting Only Video Files
05:00
Upload Trailer Method
05:26
Uploading Trailer From Our Frontend
04:24
Separate Component to Select Trailer Video
05:29
Component to Display Upload Progress
06:18
Refactoring Upload Progress Component
02:51
Getting Actual Upload Progress
05:50
Late Response From The Server Why?
06:56
Uploading Trailer in The Background
10:12
Movie Title Input Field
08:22
35 Refactoring Classes for Input Field
05:53
Creating Fake Input For Tags
06:43
Styling Tag Component
03:37
Separating Tags by Comma and Enter
07:18
Handling Backspace
04:34
Removing Tag on X Click
02:11
While Using Multiple Buttons inside A Form
01:59
Fixing Multiline Tag & Cutom Scroll Bar
04:38
Tags Input Scroll Into View
03:14
onFocus and onBlur on Fake Input Field
04:01
Input For Live Search
03:07
Live Search Result Container
02:56
Live Search Result Item
04:55
Show & Hide Search Results
03:22
Moving Selection Up & Down
07:16
Creating Infinite Selection Loop
04:31
Scroll Into Result View
03:36
Reset Selection Index
02:44
Select Result On Enter Press
03:21
Fixing onClick on Results
14:04
Refactor Live Search Component Part 1
13:18
Refactor Live Search Component Part 2
11:17
Managing Form States
05:50
Updating Tags Change inside Movie Info
03:31
ISSUE: Tags are Not Updating Properly
00:06
Selecting Director Profile
02:58
Handling Writer Selection
04:35
Fixing Live Search Overlapping Problem
03:13
Badge to Display Selected Profiles
07:55
Reusable Modal Container
07:31
Modal to Display Writers Profile
04:03
Adding Styles to Writers Profile
03:23
Optionally Remove Container inside Modal
03:24
Removing Selected Writers
04:06
Understanding Cast & Crew Form
03:02
Cast & Crew Form
06:58
Managing Cast Form State
06:36
Validating & Submitting Cast & Crew Form
06:00
Rendering Tool Tip
01:27
Hiding Label & View All Button
03:51
Cast Modal to Display Selected Cast & Crew
07:47
Removing Selected Cast
01:41
Refactor For Better User Experience
07:51
Little Fix inside Tags Input Component
01:43
Date Selector
02:39
Poster Input UI
05:13
Selecting & Rendering Poster
06:06
Genres Selector Button
04:38
Creating Genres Modal
08:06
Refactor Genre Buttons
03:16
Select & Unselect Genres
04:34
Submitting Selected Genres
04:25
Updating Genres inside Movie Info
01:26
Rendering Selected Genres Count
01:57
Rendering Previously Selected Genres
01:39
Select Option Component
04:20
Select Options
02:58
onChange for Select Options
03:59
Update For Live Search
03:00
We need to fix something
01:00
Refactoring Movie Upload Modal
04:14
Closing Options and Fixing Auto Scroll Issue
02:48
Creating Actor Upload Modal
02:18
Creating Actor Upload Form
08:01
Refactoring Poster Selector Component
02:04
Handling Actor Form State
05:11
Little Fix Before Submitting The Form
04:30
Accepting Gender Also
04:48
Actor Form Validation
06:48
Method to Create an Actor
03:08
Finally Creating an Actor
03:28
Closing Modal After Success Response
03:14
Little Refactor Again
03:12
Rendering Busy Indicator
04:56
Section Introduction
01:10
Understanding Live Search
02:55
What is debounce function
03:03
Debounce is Just a Fancy Name
02:24
Writing our own debounce function
10:03
New Context to Handle Search
09:33
Creating useSearch Hook
01:11
Fianlly Searchig Actual Actor Profiles
07:39
Fixing Search Issue
05:05
Handling Writers State Change
02:14
Problem While Searching Writers
03:40
Separating Writers and Directors State
04:50
Resetting Writers Input and Fixing Auto Form Close Issue
02:10
Let's Make updaterFun an Optional Parameter
02:30
Refactoring Director Selector Component
09:12
Refactoring Writer Selector Component
04:02
Reset Live Search After Writer Selection
00:14
Search Profile for Cast Form
05:39
Little More Refactor
02:08
Movie Form Validation
09:02
Fixing Movie Validation Logic
02:18
Making Poster an Optional Field in our Backend API
01:41
Handling Form Submission
03:07
Adding Values inside Form Data
06:19
Another Way to Generate Form Data
03:28
Let's Include Trailer Info As Well
02:36
Create Method to Upload Movie
03:54
Fixing Cast and Crew Object
02:56
Fixing UI & Rendering Busy Icon
03:43
Creating Info Container
02:44
Rendering 3 Containers in a Row
02:19
Refactoring Info Container
01:54
Design Idea for Latest Uploads
01:17
Container for Latest Uploads
04:26
Latest Uploads Movie Card
11:31
Refactor Time for Movie Card
05:59
Component for Actor Profile
05:50
Rendering Overlay on Actor Profile
04:09
Toggling Overlay
01:44
Styling Edit and Delete Button
02:12
Refactoring Actor Profile Component
07:28
Section Intro
01:33
Logic For Pagination System
04:32
Writing Logic For Pagination
06:20
Fetching Actors
03:44
Fixing The Pagination Logic
02:21
Rendering the Actor Profiles
04:50
Button For Next & Prev Page
02:44
The Working Next Button
03:40
Preventing Unwanted Fetch Request
03:16
Going Back To Previous Page
04:29
Fixing UI For Long Names
04:47
Refactoring Next and Previous Button
05:17
New Pagination Route For Movies
06:53
Making Movies Component Ready To Render Movies
05:49
Fetching and Rendering Movies
06:13
Moving to The Next Movies Page
04:07
Understanding What We Did So Far
04:06
Going Back to Previous Movies Page
03:23
Fixing a Little Bug
02:34
Handeling on edit click
02:17
Update Actor Modal
03:38
Passing Actor Info To Form
04:42
Updating an Actor
03:48
Changing Updated Profile Values Instantly
06:12
Actor Search Form
04:08
Handling Actor Search Form State
03:22
Searching & Rendering Actor Profiles
05:30
Rendering Search Reset Icon
03:44
Resetting Actor Search
03:40
Record Not Found
03:11
43 Fixing a Bug Inside Search Provider
02:48
Hiding Next and Prev With Little Refactor
04:39
Changing Search Logic Inside Backend
03:02
Prevent From Empty Form Submission
03:38
Confirm Modal
13:53
Delete Actor onConfirm
08:53
Fixing Selector Component Style
02:56
Handling On Edit Click for Movie
02:16
Movie Update Form (Modal)
02:50
Why Updating Movie is Not Easy
02:09
Creating Route to Get Data to Update Uovie
07:23
Format data before sending to frontend
06:21
Rendering movie data inside update movie form
07:00
Fixing Date Issue
02:28
Changing the Update Movie Method (Backend)
05:16
Create Update Method & Change Button Title
03:03
Finishing The Update Movie Part
11:24
Opening Movie Delete Confirm Modal
05:45
Finally Deleting The Movie
06:06
Fetching Latest Uploads For Admin
06:41
Movie Delete From Dashboard
08:42
Opening Update Form
03:56
Updating Movie
03:27
Search Movie Route
04:12
Search Move Route (Frontend)
02:32
Navigating to Search Movies on Form Submit
04:04
Grabbing query from the URL
05:16
Searching Movies
07:50
Rendering Result Not Found
02:52
New Context for Movies
10:45
Moving latest uploads to MoviesContext
03:19
Deleting Movie From Directly Inside MovieListItem
11:25
Updating Movie From Directly Inside MovieListItem
15:59
UI Update After Delete & Update Inside Search Page
08:25
Creating Review Modal
04:51
Setting up Review Router
06:17
Adding New Review Part 1
07:54
Adding New Review Part 2
06:41
Updating Review
06:30
Removing Review
10:40
Fixing Remove Review Logic
02:39
Get Reviews By Movie
08:29
Formatting review before sending to frontend
03:34
Understanding What Next
02:07
Route For Latest Uploads
06:59
Route For Single Movie
04:32
Formating Data For Single Movie
07:03
Calculating Average Ratings
01:31
What is Aggregations?
03:50
Calculating Average Ratings With Aggregation Pipeline
14:08
Refactoring response for reviews
04:13
Related Movies by Tags
02:05
Fetching Related Movies with Aggregation
12:41
Average ratings for related movies
05:25
Awaiting for all promises to be resolved
03:13
Route to get most rated movies
11:59
Average ratings for most rated movies
03:45
Plans For Upcoming Videos
02:03
Five Columns Grid Layout
05:25
Creating Responsive Grid Columns
04:45
Fetching Top Rated Movies
06:08
Styling Movie Cards Part 1
04:03
Styling Movie Cards Part 2
06:18
Refactoring Movie List Component
06:35
Fetching More Top Rated Movies
04:03
Navigating to Single Movie Page
03:18
The Slider
01:53
Rendering Slide
03:49
Fetching Latest Uploads
03:56
Slide Show Controllers
07:58
Upadting Next Slide
03:37
Making Our Slider Infinite
03:31
Before Adding Animation
02:17
Slide in From Right
04:54
Slide in Animation For Every Slide
02:33
The Problem With Slider
02:43
Infinite Illusion With Cloned Slide
07:09
Handling Previous Slides
08:49
The Problem With Auto Slide
03:17
Clear Interval While Unmounting Component
03:47
Stop Slider While Opening Next Tab
06:12
Pause Slider While Clicking on Buttons
03:20
Rendering Movie Title
07:39
Refactoring Slide Component
08:30
Array Slice
02:55
Creating Upnext Slides
06:39
Rendering Up Next Slides
03:07
Navigating to Single Movie Page
02:20
Fixing The Slider
00:57
Fetching Single Movie
05:20
Rendering Not Ready State
02:46
Rendering Movie Info
06:52
Refactor Rating Stars Component
03:26
Different Format For More Than 999 Reviews
02:44
Rate The Movie Button
01:02
Rendering Director & Writers Name
05:18
Rendering Cast Language & Other Important Things
05:18
Rendering Genres & Type
02:07
Rendering Cast Profiles
07:12
Rendering Related Movies
07:57
Redirect User to Signin Page
03:13
Creating Rating Modal
05:38
Text area & Submit Button
02:45
Different Icons for Selected Ratings
05:44
Rendering only Selected Ratings
02:04
Form State & Submission
03:20
Refactoring Review Form
05:19
Handling State For Rating Modal
03:36
Fixing The NaN Bug
00:56
Adding New Review
05:46
Updating UI on New Review
04:23
Custom Button Link
05:16
Refactoring Single Movie UI
07:48
Refactoring Cast Profiles
06:10
Making a Little Bit Responsive
02:48
Fixing Gradient Problem
01:35
Let's Use The AbortController
07:00
AbortController for Every Component
07:08
Sending Back Responsive Images
06:36
Rendering Smaller Images
06:08
Fixing Double Opening Trailer Selector
01:21
Fixing Auto Form Closing on Error
03:15
Not Getting Trailer Selector in Second Time
04:27
Creating Actor Profile Modal
06:47
Fetching & Styling Actor Profile Modal
05:56
Movie Reviews Page
04:39
Review Card Component
06:31
Fetching & Rendering Reviews
06:00
Finding Profile Owners Review
09:40
Edit & Delete Button For Review
02:16
Display Confirm Modal
02:38
Deleting The Review
05:48
No Reviews if Empty
01:09
Rendering Movie Title
02:59
Review Edit Modal
08:37
Updating Review
03:07
Updating UI on Update Review
08:26
Route to Get App Info
04:38
Fetching & Rendering App Info
05:35
Converting to Local String
01:28
Route For Most Rated From All Types
03:44
Fetching Most Rated Movies
03:38
Styling Most Rated Movies List
05:22
Rating Not Allowed for Not Verified User
02:55
Making Home Page Responsive
02:28
Fixing Lag inside SlideShow
08:19
Refactoring App Search Form
03:36
Making Navbar Responsive
04:09
Search Public Movies API Route
04:34
Search Movie Method (frontend)
00:59
Search Movies For Normal Users
06:25
Navigating to Search Movies
03:03
The Plan
02:08
Creating Real Mongodb Database
05:48
Pushing React App To Github
07:03
Pushing Node API To Github
03:30
Free Hosting
00:05
Creating Digitalocen Account
02:43
Deploying Our Frontend App
06:05
Deploying Our Backend API
06:39
Fixing Node Version
08:43
Bringing back all old movies
03:20
Changing The Base URL
02:51
Setting up Sendin Blue
08:25
Adding New Custom Domain
04:52
Domain Verification and Configure New Send Email Method
08:37
Changing Mail Trap WIth Sendin Blue
07:19
Updating new environment variables
01:43
Lets See Our Final Result
06:50
Viết Bình Luận
Khoá học liên quan
![[NEW] Spring Boot 3, Spring 6 & Hibernate for Beginners](/uploads/courses/udemy/647428_be28_10.jpg)
![Machine Learning A-Z: AI, Python & R + ChatGPT Prize [2024]](/uploads/courses/udemy/950390_270f_3.jpg)
![Flutter & Dart - The Complete Guide [2024 Edition]](/uploads/courses/udemy/1708340_7108_5.jpg)
![ROS2 Nav2 [Navigation 2 Stack] - with SLAM and Navigation](/uploads/courses/udemy/5044760_62af.jpg)
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng