MERN 2024 Edition - MongoDB, Express, React and NodeJS

19h 7m
English
Paid
November 13, 2024

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.

More

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 MERN 2024 Edition - MongoDB, Express, React and NodeJS

Join premium to watch
Go to premium
# Title Duration
1 Course Requirements 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

Similar courses to MERN 2024 Edition - MongoDB, Express, React and NodeJS

Master Spring Boot 3 & Spring Framework 6 with Java

Master Spring Boot 3 & Spring Framework 6 with Javaudemy

Duration 37 hours 34 minutes 14 seconds
React and NodeJS: A Practical Guide with Typescript

React and NodeJS: A Practical Guide with Typescriptudemy

Duration 6 hours 54 minutes 59 seconds
Zero to Full Stack Hero

Zero to Full Stack Heropapareact.com

Duration 101 hours 29 minutes 59 seconds
Mastering REST APIs in Node.js: Zero To Hero

Mastering REST APIs in Node.js: Zero To Heroudemy

Duration 8 hours 31 minutes 29 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advancedudemy

Duration 8 hours 40 minutes 51 seconds
Scale React Development with Nx

Scale React Development with Nxegghead

Duration 1 hour 34 minutes 10 seconds
Building Applications with React 17 and ASP.NET Core 6

Building Applications with React 17 and ASP.NET Core 6udemy

Duration 19 hours 28 minutes 31 seconds