React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
Course description
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 project! MERN stands for MongoDB, Express.js, React.js and Node.js - and combined, these four technologies allow you to build amazing web applications. In this course, we'll build an entire project and you will learn how these different technologies work together step by step. We'll first have a look at all the individual building blocks, so that we then can also combine them all into one amazing application by the end of the course.
Read more about the course
This course also doesn't stop after the basics - instead, you'll also learn how to add file upload, authentication, authorization and how to deploy your application in different ways to different hosting services.
This course is taught by two instructors - Max (React.js, Node/ Express) and Manuel (MongoDB) who have years of experience of working with these technologies and teaching them to other people. We took and combined our experiences to deliver you the best possible MERN stack course you can find out there.
In detail, this course offers:
Brief refreshers on the core technologies (React, Node, Express, MongoDB)
Project sections for each technology where the theoretic knowledge is applied
Detailed theory about the MERN stack and the different ways of combining the technologies
A complete course project where all the technologies come together into one application
File (image) upload in both React.js (sending the file) and Node/ Express (receiving the file)
User authentication (signup + login)
User authorization (controlling access to certain resources)
Detailed deployment instructions - including different ways of deploying the application
Tons of quizzes and extra resources!
By the end of this course, you'll feel comfortable building your own MERN stack applications and you can build up on all the knowledge taught throughout this course to dive into your own projects and use-cases.
What are the requirements for taking this course?
NO prior MERN stack knowledge is required
Basic React.js knowledge is strongly recommended - a refresher is provided as part of the course but this course is NOT meant to teach React from the ground up
Basic Node + Express knowledge is recommended but not a must-have
As always, this course comes with a 30-day money-back guarantee.
We'd love to dive into this course together with you!
- Basic knowledge about ReactJS is required
- ReactJS Hooks knowledge is recommended
- Basic knowledge about Node, Express and MongoDB is recommended but not a must-have
- NO expert React knowledge or MERN knowledge is required
- Developers who got basic React knowledge and now want to build a fullstack app
- Advanced React developers who are interested in connecting React apps to Node/ Express
- Node/ Express developers who want to learn how to add a modern frontend to their backend
What you'll learn:
- Learn how to connect ReactJS with NodeJS, Express & MongoDB
- Build an entire project from scratch!
- Refresh the basics about ReactJS, NodeJS, Express and MongoDB
- Learn how to implement Authentication & Authorization
- Add File Upload to ReactJS + Node/ Express Applications
Watch Online
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 01:48 |
| 2 | What is the "MERN Stack"? | 07:32 |
| 3 | MERN - A First Overview | 02:12 |
| 4 | Course Outline | 02:14 |
| 5 | How To Get The Most Out Of The Course | 02:55 |
| 6 | Module Introduction | 01:19 |
| 7 | Understanding the Big Picture | 08:05 |
| 8 | Diving Into the Frontend | 04:07 |
| 9 | Understanding the Backend | 05:11 |
| 10 | REST vs GraphQL | 07:55 |
| 11 | Connecting Node & React | 05:51 |
| 12 | Creating our Development Environment & the Development Servers | 11:25 |
| 13 | Diving Deeper Into the Code | 09:46 |
| 14 | Module Introduction | 04:51 |
| 15 | Understanding the General App Idea | 02:37 |
| 16 | Sketching out the Frontend | 09:38 |
| 17 | Data & API Endpoints used in our App | 05:20 |
| 18 | Required SPA Pages for the Frontend | 02:57 |
| 19 | Module Introduction | 01:13 |
| 20 | What is React? | 03:14 |
| 21 | Setting Up a Starting Project | 04:04 |
| 22 | Understanding JSX | 05:32 |
| 23 | Understanding Components | 02:51 |
| 24 | Working with Multiple Components | 07:05 |
| 25 | Using Props to pass Data between Components | 06:53 |
| 26 | Rendering Lists of Data | 04:31 |
| 27 | Handling Events | 07:25 |
| 28 | Efficient Child<=>Parent Communication | 04:39 |
| 29 | Working with "State" | 05:55 |
| 30 | More on State | 04:21 |
| 31 | Fetching User Input (Two-way Binding) | 05:53 |
| 32 | Wrap Up | 02:12 |
| 33 | Module Introduction | 02:33 |
| 34 | Starting Setup, Pages & Routes | 17:22 |
| 35 | Adding a UsersList Page / Component | 09:30 |
| 36 | Adding a UserItem Component | 03:42 |
| 37 | Styling our App & More Components | 07:18 |
| 38 | Presentational vs Stateful Components | 03:23 |
| 39 | Adding a Main Header | 09:47 |
| 40 | Adding Navlinks | 05:06 |
| 41 | Implementing a Basic Desktop & Mobile Navigation | 04:22 |
| 42 | Understanding Portals | 03:01 |
| 43 | Handling the Drawer State | 04:09 |
| 44 | Animating the Sidedrawer | 05:15 |
| 45 | Rendering User Places & Using Dynamic Route Segments | 16:13 |
| 46 | Getting Route Params | 02:17 |
| 47 | Adding Custom Buttons | 02:54 |
| 48 | Adding a Modal | 17:27 |
| 49 | Rendering a Map with Google Maps | 14:37 |
| 50 | Adding a Custom Form Input Component | 09:43 |
| 51 | Managing State in the Input Component | 11:52 |
| 52 | Adding Input Validation | 08:03 |
| 53 | Sharing Input Values & Adding Multiple Inputs | 08:12 |
| 54 | Managing Form-wide State | 09:12 |
| 55 | Finishing the "Add Place" Form | 03:20 |
| 56 | Starting Work on the "Update Place" Page | 08:46 |
| 57 | Adjusting the Input Component | 02:39 |
| 58 | Creating a Custom Form Hook (useForm) | 11:04 |
| 59 | Adjusting the Form Hook | 11:20 |
| 60 | Fixing Minor Issues | 04:33 |
| 61 | Showing a Deletion Warning | 05:29 |
| 62 | Adding an "Auth" Page & Login Form | 09:07 |
| 63 | Adding Signup + "Switch Mode" Button | 11:19 |
| 64 | Adding Auth Context for App-wide State Management | 07:05 |
| 65 | Listening to Context Changes | 02:12 |
| 66 | Adding Authenticated & Unauthenticated Routes | 05:50 |
| 67 | More Auth Context Usage | 02:45 |
| 68 | Wrap Up | 01:09 |
| 69 | Module Introduction | 01:41 |
| 70 | What is Node.js? | 02:56 |
| 71 | Writing our First Node.js Code | 08:21 |
| 72 | Sending Requests & Responses | 13:35 |
| 73 | What is Express.js? | 01:16 |
| 74 | Adding Express.js | 11:40 |
| 75 | Understanding the Advantages of Express.js | 08:33 |
| 76 | How Code Execution Works | 03:17 |
| 77 | Module Introduction | 02:18 |
| 78 | Setting up our Project | 02:30 |
| 79 | Implementing Basic Routing | 11:22 |
| 80 | Adding Place-Specific Routes | 09:40 |
| 81 | Getting a Place By User ID | 04:38 |
| 82 | Handling Errors | 10:53 |
| 83 | Adding our own Error Model | 04:46 |
| 84 | Adding Controllers | 06:43 |
| 85 | Adding a POST Route & Using Postman | 13:23 |
| 86 | Handling Errors for Unsupported Routes | 02:14 |
| 87 | Adding Patch Routes to Update Places | 08:04 |
| 88 | Deleting Places | 04:08 |
| 89 | Finalizing the "Get Places by User ID" Resource | 02:45 |
| 90 | Setting Up the User Routes (Signup, Login, Get Users) | 13:25 |
| 91 | Validating API Input (Request Bodies) | 10:20 |
| 92 | Validating Patch Requests & User Routes | 06:15 |
| 93 | Using Google's Geocoding API to Convert an Address Into Coordinates | 16:21 |
| 94 | Wrap Up | 01:28 |
| 95 | Module Introduction | 01:16 |
| 96 | What is MongoDB? | 01:27 |
| 97 | SQL vs NoSQL | 03:42 |
| 98 | Connecting React to a Database? | 01:45 |
| 99 | Setting Up MongoDB | 05:27 |
| 100 | Creating a Simple Backend & Connecting it to the Database | 05:51 |
| 101 | Creating a Document with MongoDB | 07:53 |
| 102 | Getting Data from the Database | 06:12 |
| 103 | Installing Mongoose | 01:32 |
| 104 | Understanding Models & Schemas | 03:52 |
| 105 | Creating a Product | 03:24 |
| 106 | Connecting to the Database & Saving the Product | 07:29 |
| 107 | Getting Products | 04:13 |
| 108 | Understanding the ObjectID | 03:19 |
| 109 | Wrap Up | 01:43 |
| 110 | Module Introduction | 01:28 |
| 111 | Installing Mongoose & Connecting our Backend to MongoDB | 06:33 |
| 112 | Creating the Place Schema & Model | 06:35 |
| 113 | Creating & Storing Documents in the Database | 07:27 |
| 114 | Getting Places by the PlaceID | 08:09 |
| 115 | Getting Places by the UserID | 05:54 |
| 116 | Updating Places | 06:11 |
| 117 | Deleting Places | 03:44 |
| 118 | How Users & Places are Related | 01:35 |
| 119 | Creating the User Model | 06:29 |
| 120 | Using the User Model for Signup | 11:44 |
| 121 | Adding the User Login | 04:20 |
| 122 | Getting Users | 05:38 |
| 123 | Adding the Relation between Places & Users | 05:04 |
| 124 | Creating Places & Adding it to a User | 14:00 |
| 125 | Deleting Places & Removing it From the User | 07:48 |
| 126 | Getting Places - An Alternative | 05:39 |
| 127 | Cleaning Up our Code | 02:33 |
| 128 | Wrap Up | 01:44 |
| 129 | Module Introduction | 01:32 |
| 130 | Initial Setup | 01:02 |
| 131 | Sending a POST Request to the Backend | 10:31 |
| 132 | Handling CORS Errors | 06:59 |
| 133 | Getting Started with Error Handling | 08:00 |
| 134 | Proper Error Handling in the Frontend | 05:06 |
| 135 | Sending a Login Request | 03:36 |
| 136 | Getting Users with a GET Request | 10:23 |
| 137 | Creating a Custom Http Hook | 10:51 |
| 138 | Improving the Custom Http Hook | 08:30 |
| 139 | Using the Http Hook to GET Users | 03:48 |
| 140 | Adding Places (POST) | 13:07 |
| 141 | Loading Places by User Id | 08:00 |
| 142 | Updating Places | 12:24 |
| 143 | Deleting Places | 07:41 |
| 144 | Fixing NavLinks & "My Places" | 01:07 |
| 145 | Final Adjustments | 03:43 |
| 146 | Module Introduction | 01:14 |
| 147 | Building an ImageUpload Component | 10:37 |
| 148 | Finishing & Using the ImageUpload Component (in a Form) | 12:17 |
| 149 | On the Backend: Using Multer to Save Files | 08:53 |
| 150 | Filtering Files on the Backend (Images Only!) | 03:04 |
| 151 | Wiring Frontend and Backend Up | 05:10 |
| 152 | Connecting Users to Images | 06:20 |
| 153 | Serving Images Statically | 03:34 |
| 154 | Uploading Images for New Places | 06:09 |
| 155 | Deleting Images When Places Get Deleted | 03:00 |
| 156 | Wrap Up | 01:33 |
| 157 | Module Introduction | 01:09 |
| 158 | How Authentication Works (in a MERN App) | 05:02 |
| 159 | Hashing the User Password | 05:33 |
| 160 | Logging Users In (with Hashed Passwords) | 03:11 |
| 161 | Generating Tokens (JWT) on the Backend | 09:02 |
| 162 | Backend Route Protection with Auth Middleware | 12:49 |
| 163 | Using & Attaching JWT (Tokens) in React | 07:18 |
| 164 | Using Tokens to Update and Delete Places | 02:27 |
| 165 | Adding Authorization | 07:36 |
| 166 | Authorization on "Delete Places" | 03:02 |
| 167 | Storing the Token in the Browser Storage | 06:10 |
| 168 | Adding Auto-Login (Basic Version) | 05:15 |
| 169 | Managing the Token Expiration Date | 04:55 |
| 170 | Finished Auto-Login & Auto-Logout | 08:04 |
| 171 | Creating a Custom Authentication Hook | 03:46 |
| 172 | Authentication - Summary | 01:50 |
| 173 | General App Improvements | 04:41 |
| 174 | Module Introduction | 00:56 |
| 175 | Deployment Steps Overview | 02:30 |
| 176 | Using Environment Variables (Node.js) | 08:26 |
| 177 | Environment Variables in React Apps | 07:27 |
| 178 | Preparing API Keys & Credentials | 05:48 |
| 179 | Building the React App | 04:32 |
| 180 | Adding Code Splitting to React | 07:16 |
| 181 | Understanding Possible Deployment Alternatives | 03:51 |
| 182 | Deploying a Standalone REST API (Example: Heroku) | 10:47 |
| 183 | Deploying a Standalone React SPA (Example: Firebase Hosting) | 09:13 |
| 184 | Fixing Style Issues | 01:36 |
| 185 | Deploying a Combined App | 10:25 |
| 186 | Storing Files/ Uploads | 02:21 |
| 187 | Wrap Up | 00:46 |
| 188 | Course Roundup | 00:56 |
Comments
0 commentsSimilar courses
React - The Complete Guide 2024
Build a Multi-Tenant E-Commerce with Next.js, Tailwind v4, Stripe Connect
Learn JavaScript: Full-Stack from Scratch
MERN eCommerce From Scratch
Want to join the conversation?
Sign in to comment