MERN Stack Course 2023 – MongoDB, Express, React & NodeJS

About Course

Build Full Stack React Application from Scratch with MongoDB, Express, React and NodeJS in this project based course.

Welcome To The MERN Stack Course

MERN stands for MongoDB, Express.js, React.js and Node.js – and combined, these four technologies allow you to build amazing web applications.

During this course we will:

Learn some NodeJS basics
Build API endpoints with Express
Build authentication with JSON Web Token including User Registration, Login and Password Reset
Upload image with multer and save to Cloudinary
Protect routes to only be accessed by logged-in users
Build Frontend pages with React and SCSS
Setup Routing with React Router V6
Setup MongoDB
Complete CRUD functionality
Implement pagination on the front-end
Connect frontend to backend using Axios
Manage state with Redux Toolkit
Build a dashboard for product management
Utilize “express-async-handler” package
Setup error handling in Express
Hash passwords
Build a user profile page
Build a contact us page
Edit user profile from the frontend
Deploy the app to Heroku and Render

NOTE:

This is not an introduction to React course, you are expected to know React before taking this course. However, I try to explain the ReactJS concepts used in every section.

Learn how to build Fullstack apps from scratch
Learn how to implement JWT authentication - User Registration, Login, Password Reset
Learn how to store data in MongoDB
Learn how to send automated email
Learn how to upload images in MERN stack and save to cloudinary
State management with Redux Toolkit
Deploy app to both Heroku and Render

Course Content

1. Introduction

1. Introduction and Course Requirement

02:58
2. Environment Setup

02:04
3. What is MERN Stack

10:49
— RESOURCES —

00:00

2. Some NodeJS Basics

3. Express Basics – Task Manager App

12. Task Manager – Demo

02:06
13. Project Setup

04:14
14. Create Express Server

07:45
15. Create start script with nodemon

02:51
16. Setup Postman and Insomia for API testing

07:24
17. Setup MongoDB

11:03
18. Connect To MongoDB – Method 1

11:50
19. Refactor the connection sequence

03:12
20. Connect To MongoDB – Method 2

05:08
21. Create Task Model and Schema

08:07
22. Create a Task Route

06:34
23. Middleware

07:04
24. Save Task to database

10:59
25. Get All Tasks

06:09
26. Create Task Route

06:12
27. Create Task Controller

08:07
28. Get a Single Task

11:40
29. Delete a Task

08:37
30. Update a Task – PUT

11:49
31. Update a Task – PATCH

02:14
32. Refactor out Routes

08:46

4. React Frontend – Task Manager App

33. React App Setup

08:46
34. Create Script to run backend and frontend

03:30
35. Create all Components

06:11
36. Task Manager JSX

10:53
37. Add Task to DB

19:47
38. Set Proxy URL

06:20
39. Get Tasks from DB

13:53
40. Display tasks on the page

02:29
41. Delete a Task

04:38
42. Update Task Part 1

12:06
43. Update Task Part 2

05:18
44. Set task to completed

07:08
45. Get task count

06:22

5. Deployment – Render and Heroku

6.Inventory Management App – Demo and Setup

7. Inventory Management App – Backend

55. Create Server and Connect MongoDB

14:15
56. Create Folders and Home Route

12:03
57. Create User Model

15:14
58. Create User Route

05:25
59. Create User Controller

05:03
60. Create Custom Error Handler

13:10
61. Register New User

19:37
62. Encrypt Password – Method 1

09:28
63. Encrypt Password – Method 2

09:11
64. Generate JSON Web Token

10:41
65. Send Token With HTTP-Only cookie

10:39
66. Create Login Route

03:49
67. Create Login Controller Function

12:42
68. Login Controller Bug Fix

06:10
69. Logout User

06:35
70. Create User Profile Route

05:34
71. Create Protect MiddleWare and UserProfile Controller

13:08
72. Create Route to Get Login Status

04:10
73. Create Login Status Controller Function

03:14
74. Create Route to Update User

04:41
75. Create Update User Controller Function

11:01
76. Create Route to Change Password

03:42
77. Create Controller Function to Change Password

08:59
78. Reset Password Process

04:48
79. Create Forgot Password Route

03:53
80. Create Token Model

06:03
81. Create send Email Function

15:18
82. Forgot Password Controller Function – Part 1

11:28
83. Forgot Password Controller Function – Part 2

10:28
84. Forgot Password Controller Function – Part 3

15:01
85. Email not delivered

02:49
86. Create Reset Password Route

03:53
87. Create Reset Password Controller

12:28
88. Create Product Model

08:14
89. Create Product Route

06:59
90. Create Product Controller

09:46
91. Set up Multer file upload

14:00
92. Upload Image With Multer

13:23
93. Save product to cloudinary

09:15
94. Get all Products – Route and Controller

06:08
95. Get single Product – Route and Controller

07:21
96. Delete a Product – Route and Controller

06:22
97. Update Product – Route and Controller

17:17
Draft Lesson98. Update Product – Bug Fix

04:07
99. Contact Us Route

07:07
100. Contact Us Controller

09:04

8. Inventory Management App – Frontend

101. Home page

04:47
102. Set up Redux

10:40
103. Set up Routing

06:13
104. Home Page

19:46
105. Create Auth Pages and Routes

05:59
106. Create Card Component

05:06
107. Login Page JSX

09:00
108. Register Page JSX

03:55
109. Forgot Passord Page JSX

03:31
110. Reset Passord Page JSX

03:00
111. Header, Footer and Layout Component JSX

07:52
112. Dashboard Initial Setup

10:45
113. Get The Sidebar Code

01:52
114. Sidebar Component – Part 1

14:40
115. Sidebar Component – Part 2

30:18
116. Navigate to Home Page from Dashboard

02:27
117. Set up auth slice

13:34
118. Set up auth service and Register User function

17:24
119. Register User – Part 1

09:49
120. Register User – Part 2

14:15
121. Register User – Part 3

03:46
122. Create Loader Component

09:16
123. Create Login User function

02:56
`124. Login User

10:54
125. Logout User

05:40
126. Display name of user

02:25
127. Forgot Password

10:09
128. Create Reset Password function

02:58
129. Reset Password

14:03
130. Hide or Show Nav Menu

09:43
131. Get Login Status

08:39
132. Redirect Logged out users

11:51
133. Create productSlice

07:03
134. Create Product Function Redux

19:41
135. Create Add Product Component

28:51
136. Create Add Product Route

01:20
137. Create Product Form and Test

27:28
138. Create Get all Products Function Redux

07:04
139. Get All Products

13:50
140. Display Products on dashboard

22:00
141. Search Component JSX

06:43
142. Search Function in Redux

13:22
143. Product List Pagination

12:28
144. Product Summary JSX

14:58
145. Calculate Total Store Value

13:26
146. Calculate Out Of Stock Products

08:54
147. Calculate all Categories

05:45
148. Create Delete Function Redux

06:53
149. Delete Product

13:54
150. Create Get Single Product Function Redux

05:29
151. Create Product Detail Route

05:50
152. Create Product Details Component

34:31
153. Create Update Product Function Redux

07:46
154. Create Edit Product Route

02:51
155. Create Edit Product Component

26:35
156. Create Get User Profile Function

03:14
157. Create Profile Component and Route

02:15
158. Profile Component Logic

10:14
159. Profile Component Logic JSX

08:13
160. Edit Profile – Part 1

22:24
161. Edit Profile – Part 2

27:44
162. Edit Profile Component

20:38
163. Change Password Component

16:09
164. Testing Our App

06:56
165. Deploy To GitHub

06:18
166. Deploy Frontend To Vercel

05:27
167. Deploy Backend To Render

11:09

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

1. Introduction

1. Introduction and Course Requirement

2. Environment Setup

3. What is MERN Stack

— RESOURCES —

2. Some NodeJS Basics

4. Node Basics

5. Modules

6. Core Modules

7. Create a NodeJS Server

8. Create Routes in NodeJS

9. Create an Express Server and Router

10. Continously monitor server with Nodemon

11. HTTP Request Methods and Status Codes

3. Express Basics – Task Manager App

12. Task Manager – Demo

13. Project Setup

14. Create Express Server

15. Create start script with nodemon

16. Setup Postman and Insomia for API testing

17. Setup MongoDB

18. Connect To MongoDB – Method 1

19. Refactor the connection sequence

20. Connect To MongoDB – Method 2

21. Create Task Model and Schema

22. Create a Task Route

23. Middleware

24. Save Task to database

25. Get All Tasks

26. Create Task Route

27. Create Task Controller

28. Get a Single Task

29. Delete a Task

30. Update a Task – PUT

31. Update a Task – PATCH

32. Refactor out Routes

4. React Frontend – Task Manager App

33. React App Setup

34. Create Script to run backend and frontend

35. Create all Components

36. Task Manager JSX

37. Add Task to DB

38. Set Proxy URL

39. Get Tasks from DB

40. Display tasks on the page

41. Delete a Task

42. Update Task Part 1

43. Update Task Part 2

44. Set task to completed

45. Get task count

5. Deployment – Render and Heroku

46. Deploy – Push app to GitHub

47. Deploy Frontend To Render

48. Deploy Backend To Render

49. Before you deploy to Heroku

50. Preparing our App for deployment

51. Deploying our app to Heroku

6.Inventory Management App – Demo and Setup

52. Pinvent App – Demo

53. Planning the Project

54. Project Setup

7. Inventory Management App – Backend

55. Create Server and Connect MongoDB

56. Create Folders and Home Route

57. Create User Model

58. Create User Route

59. Create User Controller

60. Create Custom Error Handler

61. Register New User

62. Encrypt Password – Method 1

63. Encrypt Password – Method 2

64. Generate JSON Web Token

65. Send Token With HTTP-Only cookie

66. Create Login Route

67. Create Login Controller Function

68. Login Controller Bug Fix

69. Logout User