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 Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack App

Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project...
25 hours 1 minute 19 seconds
React Hooks

React Hooks

Sources: ui.dev (ex. Tyler McGinnis)
If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions ar...
3 hours 47 minutes 48 seconds
React: Flux Architecture (ES6)

React: Flux Architecture (ES6)

Sources: egghead
As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared b...
49 minutes 50 seconds
Redux

Redux

Sources: ui.dev (ex. Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by buildin...
7 hours 13 minutes 23 seconds
React & TypeScript - The Practical Guide

React & TypeScript - The Practical Guide

Sources: Academind Pro
TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors whilst writing the cod...
7 hours 22 minutes 54 seconds