Skip to main content

MERN 2024 Edition - MongoDB, Express, React and NodeJS

19h 7m
English
Paid

Course description

Welcome to the immersion in MERN Stack! This course will help you master all aspects of creating a full-featured "Jobify" application using MongoDB, Express, React, and Node.js, regardless of your skill level.

Read more about the course

Main Topics of the Course:

  • Frontend with React: Create a React frontend application from scratch using VITE, add global styles, and create Landing, Error, Register, and Dashboard pages.
  • Visual Design: Master creating professional and attractive interfaces using thoughtfully designed images and layouts.
  • Routing with React Router 6.4+: Manage transitions and nested pages with React Router.
  • Creating a Server Application: Dive into backend development with ES6 modules and use "nodemon" for rapid development.
  • Database Management: Set up a cloud database with MongoDB using Atlas, and create routes and controllers for efficient data handling.
  • Testing and Error Handling: Use Thunder Client for testing, set up error handling in Express, and use the "express-async-errors" package for simplified debugging.
  • Security and Authentication: Hash passwords, implement JWT for secure authentication, and compare passwords to ensure user safety.
  • Frontend and Backend Integration: Connect frontend with the server, use "concurrently" and set up a "proxy" in VITE for seamless integration.
  • Advanced React Techniques: Implement protected routes, set up navigation with React Router 6, and logout functionalities.
  • API Management: Use Axios to interact with APIs, set up JWT tokens, and various Axios configurations for efficient data retrieval and management.
  • CRUD and Access Control: Implement full CRUD functionality, set up access rights, and understand creating and managing test data.
  • Data Visualization and UI Enhancement: Set up informative charts and cards, implement search and filtering for user convenience.
  • Pagination and Deployment: Master pagination and deploy a MERN application on Render for real-world usage.

This course will be your guide to the world of full-stack development using MERN, providing skills to create reliable and scalable web applications. Join us and become a professional MERN Stack developer!

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 192 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Requirements

All Course Lessons (192)

#Lesson TitleDurationAccess
1
Course Requirements Demo
02:03
2
Video Blur Fix
01:36
3
Course Review
00:32
4
VS Code
06:15
5
VITE - Info
01:24
6
VITE - Install
02:54
7
VITE - Folder Structure
06:22
8
Remove Boilerplate
00:56
9
Obtain Assets
04:03
10
Global CSS
03:19
11
Title and Favicon
02:16
12
Install All Libraries (Optional)
02:05
13
React Router - Info
02:31
14
React Router - Initial Setup
04:00
15
Create Pages
07:04
16
Setup index.js
05:52
17
Link Component
03:49
18
Nested Routes
07:37
19
Error Page
04:42
20
Styled Components - Intro
05:12
21
Wrapper
03:36
22
Landing Page
08:04
23
Landing Page - CSS (optional)
11:08
24
Logo Component
03:02
25
Logo and Images
01:39
26
Error Page - JSX
03:55
27
Error Page - CSS (optional)
03:09
28
Register Page - Setup
07:48
29
FormRow Component
07:19
30
Login Page
04:44
31
Login and Register CSS (optional)
04:24
32
Dashboard Setup
03:40
33
Dashboard Structure
05:12
34
Dashboard CSS (optional)
03:20
35
Dashboard Context
09:15
36
React Icons
02:23
37
Navbar Structure
04:46
38
Navbar CSS (optional)
08:04
39
Links Data
04:35
40
Sidebar Structure
05:08
41
Sidebar Functionality
07:35
42
Sidebar CSS (optional)
11:28
43
NavLinks Component
02:51
44
Big Sidebar
05:33
45
Big Sidebar CSS (optional)
09:53
46
Logout Container
07:54
47
Logout Container CSS (optional)
05:55
48
Theme Toggle
03:48
49
Theme Toggle CSS (optional)
01:50
50
Dark Theme Logic
10:15
51
Dark Theme Logic - Bug Fix
01:34
52
Dark Theme CSS (optional)
07:49
53
Folder Structure
05:44
54
ES6 Modules
05:28
55
Install Server Packages
03:26
56
Express and Nodemon
05:24
57
Thunder Client
03:25
58
JSON Middleware
04:51
59
Morgan and Dotenv
10:40
60
New Node Features (optional)
07:31
61
Get All Jobs
09:45
62
Create Job
07:45
63
Get Single Job
06:34
64
Edit Job
04:38
65
Delete Job
04:16
66
Not Found and Error Route
04:23
67
Not Found vs Error Route
04:35
68
Controller and Router
11:53
69
MongoDB
00:45
70
Atlas Account
06:10
71
Mongoose
01:06
72
Connect DB
03:13
73
Job Model
05:49
74
Create Job Controller
07:00
75
Async Errors
06:01
76
Get All Jobs and Get Single Job
05:52
77
Delete and Update Job
06:44
78
Status Codes
02:31
79
Custom Error
12:40
80
More Custom Errors
01:49
81
Validation Layer - Intro
03:11
82
Express Validator - Setup
11:12
83
Validation Middleware
08:16
84
Constants
05:03
85
Validate Job Input
09:55
86
Validate ID Params
06:44
87
Validate Job
10:29
88
User Model
03:25
89
User Controller and Router
04:55
90
Create User
02:11
91
Validate Register User
08:50
92
Admin User
03:22
93
Hash Password
06:14
94
Hash Utils
02:58
95
Validate Login
03:28
96
Login Logic
07:04
97
JWT
07:44
98
JWT ENV
01:55
99
Http Only Cookie
08:19
100
Authenticate User Setup
06:17
101
Verify Cookie
05:01
102
Verify JWT
05:56
103
Add User to Job Routes
04:46
104
Validate Owner
07:13
105
Logout Controller
03:27
106
User Routes
08:28
107
Get Current User
05:09
108
Update User
07:17
109
Get Application Stats
06:48
110
Proxy Setup
09:17
111
Concurrently
04:12
112
Axios
07:06
113
React Router Action Intro
02:13
114
First Action
07:32
115
Register User Complete
14:28
116
Navigation State
03:31
117
React Toastify
05:41
118
Login User
07:51
119
UseActionData Hook
05:49
120
Loaders
04:29
121
Get Current User
06:43
122
Logout
03:01
123
Add Job Structure
07:35
124
Select Input
08:15
125
Create Job Functionality
08:43
126
Add Job CSS (optional)
05:52
127
All Jobs Structure
06:30
128
All Jobs Context
02:05
129
Jobs Container JSX
03:42
130
Jobs Container CSS (optional)
02:48
131
Job Component
10:49
132
Job Component CSS (optional)
11:35
133
Edit Job - Setup
06:40
134
Route Params
05:13
135
Edit Job Loader
02:57
136
Edit Job JSX
05:17
137
Edit Job Action
03:03
138
Delete Job
07:24
139
Admin Page Setup
06:43
140
Admin Page Complete
05:31
141
Admin CSS (optional)
07:28
142
Avatar Images
01:10
143
Public Folder
05:14
144
User Schema Update
02:08
145
Profile Page Structure
09:47
146
Profile Action
07:06
147
Setup Multer
05:58
148
Cloudinary
04:58
149
Update User Functionality
12:17
150
Submit Button Component
06:30
151
Create Test User
04:54
152
Restrict Access to Test User
07:21
153
Mockaroo
04:38
154
Populate DB
08:54
155
Stats Route Setup
07:53
156
Group by Job Status
09:41
157
Group by Monthly Applications
09:44
158
Stats Page Setup
06:33
159
Stats Container
06:41
160
BarChart Container
03:14
161
Charts
08:06
162
Charts Container CSS (optional)
01:37
163
Query Params
05:46
164
Search Param
06:19
165
Job Status and Job Type
03:46
166
Sort
05:41
167
Pagination
11:00
168
Search Form Setup
09:09
169
Loader and Query Params
05:45
170
Controlled Inputs
09:04
171
Debounce
07:33
172
Pagination Setup
07:29
173
Render Buttons
07:11
174
Pagination Logic - First Approach
08:32
175
Pagination Logic - Complex Approach
13:57
176
Button Container CSS (optional)
07:09
177
Local Build
07:52
178
Render Intro
00:35
179
Deploy App
05:30
180
Build Front-End Programmatically
08:51
181
Update User - Fix
12:24
182
Global Loading
04:46
183
React Query - Install
07:03
184
Page ErrorElement
07:53
185
First Query with React Query
11:55
186
React Query in Stats Loader
09:28
187
React Query - Current User
04:41
188
Invalidate Queries
05:30
189
React Query - All Jobs
09:57
190
React Query - Edit Job
04:13
191
Axios Interceptors
06:02
192
Security Packages
05:49

Unlock unlimited learning

Get instant access to all 191 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

Sources: udemy
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete proje...
18 hours 45 minutes 10 seconds
React Node FullStack - Ecommerce from Scratch to Deployment

React Node FullStack - Ecommerce from Scratch to Deployment

Sources: udemy
Learn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name. Learn to use Cloudflare's CDN ...
16 hours 15 minutes 14 seconds
Full Stack Isomorphic JavaScript with Vue.js & Node.js

Full Stack Isomorphic JavaScript with Vue.js & Node.js

Sources: udemy
Learn to build full-stack isomorphic JavaScript web applications with Vue and Node.js along with the MEVN stack. The MEVN stack is a collection of great tools—M
5 hours 33 minutes 49 seconds
React Testing Library and Jest: The Complete Guide

React Testing Library and Jest: The Complete Guide

Sources: udemy, Stephen Grider
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to test React apps with React Testing Librar
7 hours 40 minutes 24 seconds
Nodejs Express - unit testing/integration tests with Jest

Nodejs Express - unit testing/integration tests with Jest

Sources: udemy
Learn how to write a full CRUD REST API with Nodejs, Express and Jest using the test-driven development method! TDD is becoming more and more of standard, and f
2 hours 48 minutes 43 seconds