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
Watch Online MERN 2024 Edition - MongoDB, Express, React and NodeJS
0:00
/ #1: Course Requirements
All Course Lessons (192)
# | Lesson Title | Duration | Access |
---|---|---|---|
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 subscriptionComments
0 commentsSimilar courses

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)
Sources: udemy
Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) Stack If you love learning new skills and building real world apps wi
34 hours 4 minutes 17 seconds

REACT ROUTER (v6)
Sources: ui.dev (ex. Tyler McGinnis)
There’s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept, and apply what yo...
3 hours 15 minutes 27 seconds

Create a Discord Bot with Node.js
Sources: zerotomastery.io
Build a Discord Bot that forecasts weather & astronomical information, and acts as a sandbox to practice everything related to Node and backend programming.
2 hours 20 minutes 37 seconds

React and Django: A Practical Guide with Docker
Sources: udemy
Learn how to create an Admin App using React and Django Rest Framework. Django 3.1, React Typescript, Redux, Docker, Authentication and Authorisation, Upload Im
6 hours 50 minutes 20 seconds

Python/Django + React QR Digital Menu Builder
Sources: PythonYoga
Made for restaurants, cafes, pubs and hotels. Your customers can order from their table or from their couch at home.
10 hours 49 minutes 22 seconds
Want to join the conversation?
Sign in to comment