MERN Stack Advanced Project: A Movie Booking System (2023)

Focused View

Indian Coders

7:22:52

74 View

1. Introduction

1. Introduction.mp4

03:58

2. Introduction To MERN Stack

1. Introduction To Topics.mp4

05:53

2. Creating NodeJS Simple Application.mp4

03:41

3. Creating a Simple API With Node & Express.mp4

03:59

4. Summary.html

3. Creating Backend

1. Connecting Application To MongoDB.mp4

12:18

2. Creating User Model.mp4

05:50

3. Adding Routes and Controllers Of User.mp4

07:32

4. Testing The API Request.mp4

01:55

5. Creating Signup Request For User (POST METHOD).mp4

10:04

6. Hashing Users Password.mp4

02:53

7. Creating User Details Update Functionality.mp4

06:20

8. Adding User Delete Functionality.mp4

03:19

9. Adding Login and Completing Users Operations.mp4

06:00

4. Backend ADMINs Functionality

1. Adding Admins Functionality.mp4

12:30

2. Creating Admin Login Request.mp4

05:14

3. Introduction to JWT Tokens.mp4

02:46

4. Signing a JWT Token.mp4

04:57

5. Backend Adding Movies Functionality

1. Adding Movie Models.mp4

04:45

2. Verifying JWT Token and Adding Movies.mp4

18:47

3. Adding More Routes For Movie.mp4

02:59

4. Getting Movie By ID.mp4

02:44

6. Backend Adding Bookings Feature

1. Adding Booking Functionality.mp4

09:43

7. Adding Relations Between All Models and Collections

1. About Relations.mp4

02:57

2. Modifying The Models.mp4

02:35

3. Linking Admin and Movies.mp4

09:03

4. Completing Relations.mp4

10:22

5. Adding get Booking By ID.mp4

02:57

6. Deleting Bookings.mp4

09:52

8. Building Frontend

1. Introduction and Start Building Application.mp4

03:21

9. Building Header and Navigation

1. Adding Header Component.mp4

02:46

2. Adding Application Logo and Header.mp4

10:35

3. More On Header.mp4

06:56

4. Sending Request To Backend For getting All Movies.mp4

05:29

5. Rendering Movies In Autocomplete.mp4

01:16

6. Adding React Router For Navigation.mp4

08:16

10. Building Homepage

1. Designing Homepage.mp4

02:13

2. Adding Card Layout On Homepage.mp4

08:21

3. Fixing Cards Design.mp4

02:54

4. Rendering Real Data.mp4

08:04

5. Optimizing Card.mp4

01:07

6. Adding All Movies Page.mp4

06:38

7. Summary.html

11. Frontend Working On Authentication Screens and Functionality

1. Designing Authentication Form.mp4

12:52

2. Handling Forms Data.mp4

09:06

3. Using Independent Form Component In Parent COmponents.mp4

06:57

4. Adding Logic To Identify the Request Type (LoginSignup).mp4

01:40

5. Sending User Authentication Request To Backend.mp4

08:02

6. Sending Admin Authentication Request To Backend.mp4

04:32

7. Adding Redux - A State Management Library.mp4

14:31

8. Storing User and Admins Credentials and Keeping Them Logged In After Exit.mp4

14:01

9. Optimization - Modifying Header Authentication States.mp4

07:55

12. Frontend Adding Bookings Feature

1. Adding Booking Pages.mp4

09:07

2. Rendering Movie Details.mp4

09:03

3. Designing Booking Form.mp4

08:13

4. Completing Bookings Functionality By Sending API Request.mp4

04:33

13. Frontend Adding Remaining Screens

1. User getting Users Details.mp4

06:13

2. Designing Users Profile Page.mp4

06:59

3. Adding Booking List Of User.mp4

07:29

4. Fixing User Profile.mp4

12:17

5. Designing Add Movie Form.mp4

11:50

6. Working On Form Layout.mp4

10:10

7. Sending Request To Backend To Add New Movie.mp4

08:28

8. Building Admin Profile Page.mp4

08:56

14. Optimizations

1. Optimization Fixes 1.mp4

05:26

2. Optimizations 2.mp4

09:56

15. Summary

1. Summary.mp4

00:47

Description

Learn MERN Stack By Building A Real-World Movie Booking Application With MERN.

What You'll Learn?

How to Build Advance MERN Stack Application
Learn Backend Building For Real World Application Cases
Learn Dynamic UI Designing
Learn How To Create Optimized and Structured Web Apps

Who is this for?

Beginner React/Web Developers Who Aim To Become Full Stack MERN Developer

ReactJS Developers Who Wants To Learn The MERN Stack

More details

Description
Hi Developer,
I know that you want to become the MERN Stack Developer and you are tired of seeing normal and beginner tutorials.
So here I came up with this idea to create a REAL-WORLD Application With MERN Stack.
This course contains so many things that you can't believe.
This course is designed for beginner web developers and React Developers who want to take their skills to the next level by building a completely advanced application with MERN Stack.

Functionality Of Project:

2 Different Users - Admin / User
Admin Logs In With JWT Verification
Admin Adds Movies
We show all records of the Admin's added movies
Connected With Movies Collection
Users can log in with encryption
Can Create Bookings From The Screen
Navigation Bar Links Will Change Upon Admin and User
The States is being handled by Redux
Profiles For Admin and User
Users can create/delete bookings of any movie
MERN Stack:
MERN stands for MongoDB, Express, React, and Node, after the four key technologies that make up the stack.
MongoDB â€” document database
Express(.js) â€” Node.js web framework
React(.js) â€” a client-side JavaScript framework
Node(.js) â€” the premier JavaScript web server

Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js is a popular and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.
React.js front end
The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple components, connect them to data on your back-end server, and render them as HTML.
Reactâ€™s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles youâ€™d expect from a modern web framework: great support for forms, error handling, events, lists, and more.
Express.js and Node.js server tier
The next level down is the Express.js server-side framework, running inside a Node.js server. Express.js bills itself as a â€œfast, unopinionated, minimalist web framework for Node.js,â€ and that is indeed exactly what it is. Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses.
By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front end, you can connect to Express.js functions that power your application. Those functions, in turn, use MongoDBâ€™s Node.js drivers, either via callbacks or using promises, to access and update data in your MongoDB database.
MongoDB database tier
If your application stores any data (user profiles, content, comments, uploads, events, etc.), then youâ€™re going to want a database thatâ€™s just as easy to work with as React, Express, and Node.
Thatâ€™s where MongoDB comes in: JSON documents created in your React.js front end can be sent to the Express.js server, where they can be processed and (assuming theyâ€™re valid) stored directly in MongoDB for later retrieval. Again, if youâ€™re building in the cloud, youâ€™ll want to look at Atlas. If youâ€™re looking to set up your own MERN stack, read on!

A Movie Booking Application
Where we handle Backend + Frontend + API Calls Between Them

The Backend is included with:

2 Users - Admin and User
NodeJS
ExpressJS
MongoDB
4 Interconnected Collections (Tables) of MongoDB
MVC (Model View Controllers) Approach
Password Encryption
RESTÂ API
JWT Encryption
JWT Verifications
Authentication and Authorization

The Frontend is included with:

ReactJS
Material UI
Redux State Management (Modern Redux)
Axios API Calls
Icons
Responsive Design
Dynamic State Handling
React Hooks
React Router Dom Navigation
2 Different Scenarios For Admin and User
Authentication, Add Forms
Protected Routes
Keeping User Logged In After Browser Exit / Refresh
And Much More To Go.

So don't waste your time and enroll in it and become a perfect MERN Stack Developer
Who this course is for:
Beginner React/Web Developers Who Aim To Become Full Stack MERN Developer
ReactJS Developers Who Wants To Learn The MERN Stack

User Reviews

Rating

average 0

Total votes0

Focused display

MERN Stack

Indian Coders

Instructor's Courses

Hi,We are Indian Coders, helping you out in Web Development, Game Development, and much more. We are motivated to provide content to the Students which they actually require to understand and without wasting much time they can learn and build things on their own.So If you have doubts and need support, just refer to the comment section for the doubts and we are always ready to help you out.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.