How to build & deploy a MERN stack web application (typescript, mongo, express, react, node)

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


Category:
Tutorial
Duration: 3:12:02
54,496 views
1,506

Deploy your websites with Hostinger: https://hostinger.com/webdevjunkie (get 10% off with code WEBDEVJUNKIE)

project code: https://github.com/codyseibert/flashcardsage

Learn how to build a full stack web application using vite to create and bundle our react single page application (spa). We will also be building a node rest api that will persist our data to a mongodb atlas cluster.

00:00 - Intro
01:37 - Hostinger Overview
14:56 - Vite React Setup
17:18 - Express Setup
32:09 - Mongo Atlas Setup
35:16 - Mongoose Setup
43:34 - API - Create Deck Endpoint
55:10 - .env file
01:01:56 - UI - Create Deck Page
01:16:32 - Fix Cors Error
01:21:58 - Fix Content Type
01:26:03 - API - GET Decks Endpoint
01:30:22 - UI - Fetch Decks
01:49:45 - API - Delete Deck Endpoint
01:52:59 - UI - Delete Deck Button
01:59:42 - UI - Setup React Router
02:03:21 - UI - Refactor Code
02:10:55 - API - Refactor Code
02:15:10 - API - Create Card Endpoint
02:20:02 - UI - Create Card
02:26:07 - API - Get Deck
02:27:50 - UI - Get Deck Code
02:30:42 - API - Delete Card
02:32:37 - UI - Delete Card
02:38:00 - UI changes and add Header
02:54:36 - Setting up API on VPS
03:03:07 - Setting up A Record
03:03:40 - Setup Caddy for HTTPS
03:06:28 - Build & Deploy React SPA


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

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets



Other Videos By Web Dev Cody


2022-12-02How would I design a URL shortener application (interview question prep)
2022-12-01They had 24 hour to submit this assignment (junior full stack interview)
2022-11-24Trying to answer interview questions a subscriber was asked for junior full stack position
2022-11-23Building an online multiplayer snowball throwing game (vanilla js, node, socket.io)
2022-11-21A subscriber was asked these junior interview questions
2022-11-20Trying Next.js 13 and Strapi CMS (collab with Coding After 30)
2022-11-18This is why you get CORS errors sometimes
2022-11-17What to expect during a web dev interview (sharing my experiences)
2022-11-16Solving a practical intermediate react interview challenge
2022-11-15Here is a more challenging react interview exercise
2022-11-14How to build & deploy a MERN stack web application (typescript, mongo, express, react, node)
2022-11-10I loved solving this junior react interview challenge
2022-11-09This is a good intermediate react interview challenge
2022-11-08When do you need React's useLayoutEffect hook?
2022-11-04What does my typical work week as a web dev like
2022-11-03Why you should clean up react effects using fetch
2022-11-02Why I avoid react's uncontrolled inputs
2022-11-01Why I always use react-query on my react apps
2022-10-31This is a good beginner React interview challenge question
2022-10-30Coding on websocket game, answering questions, doing coding stuff
2022-10-30Why understanding interfaces is important (with useReducer example)


Tags:
web development
programming
coding
code
learn to code
tutorial
software engineering