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
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 commentsWant to join the conversation?
Sign in to commentSimilar courses
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
Sources: udemy
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete proje...
18 hours 45 minutes 10 seconds
React Node FullStack - Ecommerce from Scratch to Deployment
Sources: udemy
Learn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name. Learn to use Cloudflare's CDN ...
16 hours 15 minutes 14 seconds
Full Stack Isomorphic JavaScript with Vue.js & Node.js
Sources: udemy
Learn to build full-stack isomorphic JavaScript web applications with Vue and Node.js along with the MEVN stack. The MEVN stack is a collection of great tools—M
5 hours 33 minutes 49 seconds
React Testing Library and Jest: The Complete Guide
Sources: udemy, Stephen Grider
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to test React apps with React Testing Librar
7 hours 40 minutes 24 seconds
Nodejs Express - unit testing/integration tests with Jest
Sources: udemy
Learn how to write a full CRUD REST API with Nodejs, Express and Jest using the test-driven development method! TDD is becoming more and more of standard, and f
2 hours 48 minutes 43 seconds