MERN Stack : MongoDB Node Express & React + Redux-Toolkit

Focused View

Saumitra Vishal

12:19:42

8 View

1. Introduction

1. Introduction.mp4

03:43

2. App Demo.mp4

07:17

3. What is MERN and How its work .mp4

02:54

4. Why we should use MERN .mp4

01:55

5. Environment Set-up.mp4

01:11

2. Set-Up Backend

1. Project Set-Up.mp4

03:28

2. Express Server Set-up.mp4

02:48

3. Connecting Backend to MongoDB.mp4

08:05

4. Folder Structure.mp4

00:36

3. Backend Authentication

1. Auth Model.mp4

02:44

2. Sign-Up Controller.mp4

06:47

3. Adding Sign-Up Route.mp4

02:14

4. Testing API using Postman.mp4

01:50

5. Sign-In Controller.mp4

05:02

6. Adding & Testing Sign-In API using Postman.mp4

02:15

4. Optional Understand Redux-Toolkit

1. Intro.mp4

00:28

2. What is Redux and why we use it .mp4

02:29

3. What is Redux-Toolkit .mp4

03:16

4. Understand Redux-Toolkit API.mp4

02:54

5. Understand createAsyncThunk.mp4

03:03

5. Set-Up Frontend

1. create-react-app and installing packages.mp4

03:26

2. Clean-up, Configure MDB, toastify and Structuring App.mp4

03:00

3. Enable Routing.mp4

03:04

6. Frontend Authentication

1. Working on Login Page.mp4

10:38

2. Set-Up Redux-Toolkit.mp4

05:01

3. Writing & Dispatching Login Action.mp4

13:05

4. Handling Error.mp4

05:00

5. Working on Register Page.mp4

05:05

6. Writing & Dispatching Register Action.mp4

07:33

7. Adding Google Sign-In Button.mp4

04:07

8. Configure Google Client ID.mp4

03:39

9. Google Sign-In Controller.mp4

05:13

10. Writing & Dispatching Google Sign-In Action.mp4

07:25

11. Working on Header.mp4

10:45

12. Customize Header on Login.mp4

03:45

13. Persiste User and Logout.mp4

09:17

7. Creating New Tour

1. Tour Model.mp4

03:17

2. Tour Controller and Route.mp4

06:38

3. Create Tour Form - Part 1.mp4

09:39

4. Create Tour Form - Part 2.mp4

09:58

5. Redux Create Tour Action.mp4

05:34

6. Dispatching Create Tour Action.mp4

08:31

8. Middleware

1. Backend Middleware.mp4

08:12

2. Add Authorization Header in Axios Request.mp4

05:01

9. Home, Tour Detail & Dashboard

1. Redux Tours Action.mp4

03:25

2. Working on Hompage.mp4

06:50

3. Show Tours with Card Component.mp4

10:06

4. Single Tour API - Controller.mp4

01:39

5. Redux Action Single Tour.mp4

03:38

6. Single Tour Page.mp4

11:55

7. User Tours Controller and Route.mp4

04:07

8. Dashboard - User Tours Redux Action.mp4

03:50

9. Dashboard - Dispatch User Tours Action.mp4

06:19

10. Dashboard - Display User Tours.mp4

10:40

10. Route Protection and Spinner

1. Adding Spinner.mp4

04:17

2. Redirect User for Unauthorized access.mp4

07:19

11. Delete and Update Tour

1. Delete Tour Controller.mp4

02:58

2. Update Tour Controller.mp4

03:13

3. Delete Tour using Redux Action.mp4

09:21

4. Update Tour Action.mp4

04:00

5. Populate Tour Data in Form.mp4

03:47

6. Update Tour using Redux Action.mp4

03:20

7. Page not found (404).mp4

01:55

8. Fix App Issue.mp4

06:26

12. Search Functionality

1. Search Tour Controller.mp4

04:11

2. Adding Search Input Field.mp4

04:53

3. Search Implentation with Redux Action.mp4

05:31

13. Related and Tag Tours

1. Tag Tours Controller.mp4

02:33

2. Tag Tours Redux Action.mp4

02:27

3. Convert Tag into Link on Card.mp4

02:14

4. Display Tours based on Common Tag.mp4

14:06

5. Related Tours Controller.mp4

02:16

6. Related Tours Redux Action.mp4

02:15

7. Related Tour Section.mp4

16:15

14. Token Expiry, Pagination & Like

1. Handle Token Expiry.mp4

05:56

2. Pagination Backend.mp4

04:31

3. Adjust Redux logic for Pagination.mp4

05:38

4. Pagination Component.mp4

10:40

5. Modify Tour Model for Like feature.mp4

01:47

6. Like Tour Controller.mp4

06:51

7. Redux Action for Like feature.mp4

04:11

8. Like Feature Part - 1.mp4

09:08

9. Like Feature Part - 2.mp4

12:05

15. Disqus Comment, Small Feature and Bug Fix

1. Integrate Disqus Comment on UI.mp4

06:55

2. Back Button on Detail Page.mp4

02:54

3. Fix Issue on Dashboard.mp4

02:34

4. Fix Search Issue.mp4

05:03

5. Fix Warning Issue in App.mp4

03:34

16. Deployment

1. Backend Heroku Deployment.mp4

08:51

2. Frontend Netlify Deployment.mp4

12:14

3. Fix UI Deployment issue.mp4

10:21

17. Notification using Socket

1. Socket Backend.mp4

11:37

2. Frontend Socket Set-up.mp4

04:26

3. Send Notification.mp4

05:49

4. Get Notification.mp4

14:48

18. Popular Tags and Category section

1. Tag Controller & Redux.mp4

08:47

2. Tag Section.mp4

08:33

3. Update Model and Controller.mp4

01:19

4. Add Category Dropdown.mp4

09:12

5. Category Section.mp4

12:53

6. Category Page.mp4

06:16

7. Adding Category Bagde on Card Tour.mp4

04:54

8. Fixing Popular Tag & Category section using Resize.mp4

04:27

19. Profile Page

1. Profile Controller.mp4

10:45

2. Adding Profile Route.mp4

02:54

3. Profile Redux.mp4

05:51

4. Profile Image Section.mp4

09:41

5. Profile Detail Section.mp4

07:13

6. Convert Profile Detail into Input Field.mp4

08:51

7. Update Profile using Redux.mp4

10:39

8. Update Profile in State and localStorage.mp4

04:56

9. Profile Top Tour Section.mp4

09:49

10. Add Profile pic in Header.mp4

08:51

20. Load More, Scroll to Top, Footer & Code Refactor

1. Load More Part - 1.mp4

09:12

2. Load More Part - 2.mp4

12:09

3. Scroll to Top.mp4

07:21

4. Code Refactoring.mp4

07:40

21. Fixing Bug, Style issue and Deployment

1. Warning Issue.mp4

03:07

2. Page Refresh and Style Issue.mp4

15:00

3. Deploying our App.mp4

11:51

Description

Build and Deploy MERN Stack Tour App with MongoDB, Express, React, Redux-Toolkit, Node and Socket IO on Heroku & Netlify

What You'll Learn?

Learn to build Full Stack Application from Scratch
Implement Email and Google Authentication
Learn to upload image with React Node/Express
Learn how to connect React with Node Express and MongoDB
Learn to use Redux-Toolkit to manage App State
Learn JWT for Authentication & Authorization
Implement Route Protection in React
Learn to write REST API
Learn to use Socket IO for real time notification
Learn to Integrate Disqus Comment System
Search, Pagination, Like, Filter, Infinite Scroll and many more feature
Learn to use MDBootstrap 5 in React
Learn how to deploy MERN App on Heroku and Netlify

Who is this for?

Anyone who want to build and deploy full Stack MERN Application from Scratch.

What You Need to Know?

Basic HTML, CSS and Javascript

Basic React JS

Basic ES6 Understanding

Good to have Node & Express Basics

More details

Description
Welcome to this Ultimate MERN Stack Web Development course. In this course, we will build Full Stack Tour application with the help of MongoDB, Node, Express, React, Redux-Toolkit, Socket IO along with ES6 . This project will have almost all the essential features that you wanted to add in any Full Stack Web application including:

Authentication feature.
Login with Email/Password and Google Sign-in.
JWTÂ authentication with token expiry.
Middleware to protect User data.
CRUDÂ feature along with Image Upload, Search, Filter, Pagination, Like,Â Infinite Scroll and many more.
Used Redux-Toolkit to manage application state.
Used createAsyncThunk to make backend API request.
Route Protection on Client side.
Socket IO to get real time notificiation when user like tour.
Seperate profile page along with update feature.
Integrated Disqus Comment system in application.
Used MDBootstrap 5 to make React component as well as App responsive.
Deploying Backend on Heroku.
Deploying Frontend on Netlify.

Note:- This is single project based course to teach you MERN stack techonology. So, this is not something like 'Introduction to Node/Express' or 'Introduction to React'. I will try my level best to explain everything that I am going to write in code editor. So, it's recommend to have some basic understand of React & Node/Express.
Who this course is for:
Anyone who want to build and deploy full Stack MERN Application from Scratch.

User Reviews

Rating

average 0

Total votes0

Focused display

More than 5 year of working experience as Web Developer in industry level. Expertise in technology like React, Angular, Node, Java & Python. Also I have also experience in design framework like Bootstrap, Material-UI & Ant Design. Provided scalable solution to the client of different domain like Banking, E-Commerce and Health Care. I have played a key role on migrating their application that build using old technology into React. Currently, React framework is on peak in market if you have to build scalable web application. And React become powerful if you inject Redux. Redux can be quite complex especially for beginner. That's the reason I am here to teach you to build Web Application using React-Redux in easiest way.

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.