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 Node AWS - Build infinitely Scaling MERN Stack App
Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project...
25 hours 1 minute 19 seconds
React Hooks
Sources: ui.dev (ex. Tyler McGinnis)
If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions ar...
3 hours 47 minutes 48 seconds
React: Flux Architecture (ES6)
Sources: egghead
As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared b...
49 minutes 50 seconds
Redux
Sources: ui.dev (ex. Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by buildin...
7 hours 13 minutes 23 seconds
React & TypeScript - The Practical Guide
Sources: Academind Pro
TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors whilst writing the cod...
7 hours 22 minutes 54 seconds