Complete MERN Beginner Course (TypeScript, Authentication, Deployment...)

Published: 11 January 2023
on channel: Coding in Flow

148,944

4.7k

Learn how to build a full-stack MERN app with React, Node, Express, MongoDB Atlas, and TypeScript. This course is beginner-friendly and teaches you everything you need to know along the way.

Code for this course: https://github.com/codinginflow/MERN-...

Deployment tutorial for this app:    • How to Deploy and Secure Your MERN Ap...

Sign up for Linode and get a $100 60day free credit for new Linode accounts: https://linode.com/codinginflow

⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbes...
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord

📣 Follow Coding in Flow on social media:
Twitter:   / codinginflow
Instagram:   / codinginflow
TikTok:   / codinginflow
Facebook:   / codinginflow

Timestamps:
0:00 - Course content + prerequisites
13:40 - NodeJS + Express + TypeScript + ESLint setup (Hello World)
49:11 - MongoDB Atlas + Mongoose setup + Envalid
1:16:08 - MongoDB model setup + Express error handling (+ what is middleware)
1:40:09 - Creating notes + routers + controllers
2:03:22 - Express HTTP error handling
2:21:40 - Update + delete notes (backend)
2:37:57 - React setup with TypeScript / What is declarative UI?
2:58:03 - Fetching notes + proxy
3:13:46 - React components & CSS modules
3:30:50 - Finishing notes styling
3:50:06 - Creating notes from the frontend
4:33:50 - Update + delete notes (frontend)
5:00:24 - Loading/error/empty states
5:10:44 - User authentication with express-session & cookies
5:54:54 - Frontend authentication + extracting form field components
7:00:52 - Protecting user notes with auth middleware
7:21:33 - Routing with react-router-dom
7:37:00 - Handling different HTTP errors in React