Build a MERN Stack TODO List Application with Authentication | Vite, React-Query, React Router 6

Channel:
United States Web Dev Cody
Subscribers:
254,000
Published on ● Video Link: https://www.youtube.com/watch?v=oJBu2k7OEk8


Duration: 2:14:32
9,464 views
193

Using react-query, react-router-dom@6, mongoose, express, react, vite

code found here: https://github.com/codyseibert/mern-todo

00:00:00 Introduction
00:01:32 API Setup
00:02:45 npm init
00:05:04 package.json overview
00:07:07 Setup Index.js
00:09:00 Running our Server
00:10:03 Get Todos Endpoint
00:12:23 Installing Nodemon
00:15:04 Dotenv Setup
00:17:26 Morgan Middleware
00:19:06 Cors Middleware
00:20:08 Setup Router
00:24:55 Login Route
00:30:46 Authentication Middleware
00:38:44 Hook into Mongodb Atlas
00:44:22 Todo Mongoose Model
00:46:24 Get Todos Route
00:48:25 Create Todo Route
00:52:04 Update Todo Route
00:59:11 Delete Todo Route
01:03:00 React Vite Setup
01:08:03 Fetch Todos with useEffect
01:16:35 Display Todos
01:19:35 Using React Query Instead
01:24:50 Extract TodoItem Component
01:26:43 Complete Item Checkbox Logic
01:34:41 Update Todo Text Logic
01:37:19 Delete Todo Logic
01:39:58 Create Todo Component Logic
01:47:56 Issue with Typing (Debounce)
01:54:03 Login Page (React Router 6)
02:03:12 React Context for Token
02:14:07 Final Remarks

------------

🔔 Newsletter http://eepurl.com/hnderP
💬 Discord https://discord.gg/4kGbBaa
📁. GitHub https://github.com/codyseibert/youtube



Other Videos By Web Dev Cody


2022-06-19Refactoring and decoupling some react code (dry, kiss, yagni, wet)
2022-06-18When should you abstract code away? (with basic React example)
2022-06-17Trying Chakra UI For the First Time | Learning Session
2022-06-16How do server side authentication sessions work (express & cookies)
2022-06-14Why are there so many different ways to style a react app?
2022-06-12How to add pagination to a MERN app (with React-Query example)
2022-06-11Why the K.I.S.S Principal is probably the most important
2022-06-10How to build real time chat app with Svelte
2022-06-09React 18 strict mode helped me catch this useEffect bug
2022-06-08Coding a video calling app with React
2022-06-07Build a MERN Stack TODO List Application with Authentication | Vite, React-Query, React Router 6
2022-06-06Why I suggest understanding the problems React and TailwindCSS solve
2022-06-05Giving Zustand a try to manage application state
2022-06-04Playing around with yt-download to create WPM calculator
2022-06-03Live Coding an Emoji Panel using React | Part 2
2022-06-02Playing around with React,Vite, Random App
2022-06-01Live Coding an Emoji Panel using React | Part 1
2022-05-31How to share state between React Routes by Lifting State
2022-05-30Some developers are too emotionally attached to tech
2022-05-29Why you can't always implement the features you want
2022-05-28Why I don't enjoy using typescript or static languages much


Tags:
web development
programming
coding
code
learn to code
tutorial
software engineering
vite
react-query
express
mongo
mongoose
mongdb atlas
react-router 6
react router 6
jwt
jsonwebtoken
authentication
full stack
mern stack
react
node
node 18