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
Node, SQL, & PostgreSQL - Mastering Backend Web Developmentudemy
Duration 4 hours 59 minutes 41 seconds
Course
Master Spring Boot 3 & Spring Framework 6 with Javaudemy
Duration 37 hours 34 minutes 14 seconds
Course
React and NodeJS: A Practical Guide with Typescriptudemy
Duration 6 hours 54 minutes 59 seconds
Course
Zero to Full Stack Heropapareact.com
Duration 101 hours 29 minutes 59 seconds
Course
MERN Stack Front To Back: Full Stack React, Redux & Node.js.udemyBrad Traversy
Duration 11 hours 52 minutes 29 seconds
Course
Mastering REST APIs in Node.js: Zero To Heroudemy
Duration 8 hours 31 minutes 29 seconds
Course
Node.js CLI | Build Node.js Command-line Automation Dev-toolsAhmad Awais (vscode.pro)
Duration 9 hours 3 minutes 32 seconds
Course
React, NextJS and NestJS: A Rapid Guide - Advancedudemy
Duration 8 hours 40 minutes 51 seconds
Course
Scale React Development with Nxegghead
Duration 1 hour 34 minutes 10 seconds
Course
Building Applications with React 17 and ASP.NET Core 6udemy
Duration 19 hours 28 minutes 31 seconds
Course