CF

MERN 2024 Edition - MongoDB, Express, React and NodeJS

19h 7m
English
Paid

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.

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!

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 192 lessons

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

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course is designed for learners of all skill levels, so prior experience with the MERN stack is not required. However, familiarity with basic programming concepts and JavaScript will be beneficial. The course begins with lessons on tools like VS Code and covers foundational topics such as ES6 modules and installing server packages, which can help beginners acclimate to the environment.
What projects will I build during this course?
The central project in this course is the development of a 'Jobify' application. This involves using MongoDB for the database, Express for the server framework, React for the front-end, and Node.js for the server runtime. Throughout the lessons, you will set up various components such as dashboards, sidebars, and theme toggles, incorporating features like dark theme logic and user authentication.
How does this course compare to other MERN stack courses?
This course offers a comprehensive journey through the MERN stack by focusing on building a complete application with emphasis on practical features like React Router for navigation, styled components for styling, and integrating libraries such as React Icons. With 192 lessons, it covers both fundamental and advanced topics, ensuring a well-rounded understanding of the MERN stack.
Which tools and platforms are specifically covered in this course?
The course covers a variety of tools and platforms essential for MERN stack development. Key tools include VS Code for coding, VITE for the development environment setup, and Thunder Client for API testing. Libraries and frameworks such as React Router and Styled Components are also taught to enhance front-end development.
What topics are not covered in this course?
While the course is extensive, it does not cover mobile app development or deployment of the application to cloud platforms. The focus remains on web application development and the integration of various components within the MERN stack without delving into mobile responsiveness or cloud services.
How much time should I expect to commit to completing this course?
The course consists of 192 lessons, and while the total runtime is not specified, learners should anticipate dedicating several weeks to complete it thoroughly. The time commitment will vary based on individual pace and familiarity with the topics. Consistent daily or weekly study sessions are recommended to fully absorb and apply the material.
How will the skills learned in this course benefit my career or further studies?
Completing this course will equip you with practical skills in developing applications using the MERN stack, a popular technology in web development. The experience gained can be valuable in roles such as full-stack developer, front-end developer, or back-end developer. Additionally, the tools and practices learned can be applied to other JavaScript frameworks and server environments, broadening your technical expertise.