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

Deploy your websites with Hostinger: hostinger.com/webdevjunkie (get 10% off with code WEBDEVJUNKIE)
project code: github.com/codyseibert/flashc...
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 / discord
🔔 Newsletter eepurl.com/hnderP
📁. GitHub 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

[@WebDevCody]

You can setup a Hostinger premium shared hosting or VPS using this url: hostinger.com/webdevjunkie (get 10% off with code WEBDEVJUNKIE)

[@yolla_4]

make a video on how to do testing in vite project with vitest or jest

[@finnalandem]

Your code isn't providing 10%, it's providing 2%.

[@Sapphiamur]

Oh yeah, this is the exact video I needed about three months ago, when I was massively confused about how to connect frontend to backend and set things up properly. I had to learn the hard way by trial and error, because I hadn't found any video on yt :d. Seriously, this is gold for any beginner! Great job!!

[@dustinqapodaca]

Thanks brother- I must say, out of most content on KZbin- your instruction, tips etc have helped me beyond measure. In your debt 🙏

[@WebDevCody]

🍻

[@tarnveersingh2552]

This dude's obession, dedication and sheer commitment towards Web development is something i've never seen before. He's the John Wick of web devs

[@yankee62491]

Hey man, just finishing up a MERN stack and been following your content for awhile. Was really excited to see you post this video. Love your stuff, keep up the content, its helping a lot of us 👍🏻

[@gavinwalsh8417]

Hey Cody, I'm very happy that I found your channel. I'm a junior front end dev and now starting to learn backend. All of the videos I've found have been so focused on file structure and purely just over complicating the foundation information and the stuff that really matters (Routes, Schema, Models etc). Thank you for keeping the basics barebones and simple. It's hard enough trying to digest the information without having to trace all of the different files that it's all contained in. Once the information is understood then you can worry about file structures and dividing up the code. Like you said, 'Make it work, make it right, make it fast'. Thanks!

[@jowia4044]

I LOVED THIS TUTORIAL!!! This is enough to get started, and seeing how research was done in the documentation was truly gold, yet not too much information to cloud up the important concepts. Also really liked the saying "Make it work, make it right, make it fast" which im going to start to applying, just so much good value from this video. 10 out of 10, I wish to see more tutorials like this from Cody, quickest subscribe of my life

[@suncanon_]

Thank you for taking the time to make this lesson, it's fantastic. I'm a senior frontend and am getting more familiar with API development, models/schemas, and deployment, and this was the perfect lesson for getting up and running with a backend.

[@jgv4945]

KEEP WATCHING! Many will surely feel trigged to skip the video because all the paid services are introduced at the beginning. But folks! Stay tuned! Everyone really learns something new in this video even just by watching it without deploying your app on hostinger or whatever. Very good video, Web Dev Cody! 🏆

[@123qopsiznoq]

I like how you explain every steps. It's so easy to understand.

[@chasedemaster1086]

With lessons like this you have quickly become my go to dev coach. TY endlessly

[@bobbyboxer2664]

Bootcamp student from 5 years ago that things are finally clicking for. Takes a while but it clicks eventually. Man Im right at the level where this entire tutorial finally makes sense and helps me so much. Bootcamp students don’t waiver and keep pushing. It’s so worth it. I’m so glad I found your channel brother. Thanks for everything

[@miroslavbekyarov]

thanks for putting the effort to explain exactly why you do things, the way you do them

[@thomasgold2022]

Love your videos. Very detailed and descriptive explanations of all of the little pieces that go into a MERN stack app

[@alexanderskachko1221]

Super helpful tutorial, the amount of knowledge from both the frontend and backend is incredible... Nice work!

[@rotivanov]

Dude you are absolutely the best teacher out there! If you had a REACT/EXPRESS TS course I would be the first one to buy it! I love your work man!

[@d3xomusic]

So much information packed in one video! I can watch it again and still learn something new haha

[@stephenbuley3053]

Very helpful video for understanding how all of the pieces of an application fit together. Very clear and concise, not too many extra libraries or side tangents. I’ve learned so many of the components of this video separately and in a vacuum (react hooks, express, css, etc.) but connecting it all together confused me, until now. Thanks so much for the fantastic example, Cody.

[@WebDevCody]

Glad it was helpful!

[@watevakid]

agree 100%

[@johnsanchez8429]

Cody - Thanks for the great video. Learned a lot. Helped me finish the application I was building for work! Thank you!

[@nastyideas]

Great stuff man! migrating this project to a Next app would be a nice interesting way to show what next offers/solves.

[@maurillekobri9484]

Thanks a million Web Dev Junkie. You've helped improve my coding style and approach.

[@nabinsaud4688]

This is incredibly amazing With such a good instructor 💕

[@yyxx9309]

So happy you taught accessibility too! Learnt so much from your vid!

[@berkayurun]

Hi Cody! I used to think that I'm too dumb for backend related topics so I always stood away from anything related to it, but decided to at least give it a shot as no matter how much I love frontend, my lack of backend knowledge started to hinder my progress. And what do I know, I ABSOLUTELY LOVE THIS! I can't emphasize how much trying out Express and MongoDB has made me happy and excited. I wish I could keep this short but I just can't stop smiling like a child. Thank you so, so much for your time and effort you put into your videos, I just can't wait to learn more from you!

[@berkayurun]

Man it sounds like one of those recommendation excerpts on a books back cover but, I regret nothing 😂

[@WebDevCody]

working on the backend is enjoyable for sure! glad you enjoyed watching and I hope to see you around 🍻

[@Halliday2012]

Great tutorial, I decided to deploy my version on render as a webservice/static site and it was very easy. Ran into IP issues with mongo db atlas also which required some whitelisting IP's but overall very straightforward.

[@FaisaL83]

That's so awesome, i watched all the video from the beginning and it was so useful and learned a lot of stuffs! Thank you for you hard work.

[@robertpaluchowski8522]

The best tutorial that I have come across. Thank you.

[@WebDevCody]

Awesome glad you think that

[@steinnhauser3599]

Fantastic. Thanks for the more fundamental client/server setup stuff. Your content is amazing

[@WebDevCody]

Thanks glad to hear!

[@fredrikgullin9779]

Very good tutorial !! Thanks a lot !🙏❤️

[@DarkKhaos1]

You're a really good teacher mate, keep it up

[@WebDevCody]

Thanks! 😃

[@LeighBriody]

This is exactly what I needed thank you , keep the content coming

[@Rocio_peralta]

Dude! you are a great "explainer"!

[@jonathanalvarez9653]

great explanations, the content was very easy to follow while I was able to learn alot.

[@sergiisechka1993]

Great tutorial! Thank you man!

[@ldatuan]

Great video, thanks for sharing. It is really good for the newbie to get started with typescript and deployment.

[@nicholasbazzoni7084]

having so much fun, learning too

[@nikako1889]

amazing! would like to see more videos like this

[@facundomartinez3622]

Amazing !! I will need a full course just about the las 20minutes of the video 😂 Thanks!

[@abdallahazme4757]

It's insane how much content have you covered in just 3 hours, it's unbelievable you have done this without preparation, I wish to reach this level in coding one day. So many thanks, mate.

[@SeibertSwirl]

Good job love ❤️ you’re doing great babe!!!

[@mohammadfarhadi9407]

Awesome! Please create a video for manage this project inside docker, I mean frontend and backend

[@LuizHenrique-cu4kq]

I'm really impressoed with this code. Thanks man! NOTE: Will be awesome if you put this together on a docker container for learning more about containers :D

[@amershboul9107]

You deserve a Huge Like!

[@maresal4271]

very great content again

[@djoezi3662]

MORE COMPLECATED PLEASE

[@takek7739]

Loved the vid man. Can you do the same for more advanced level concepts using mern

[@markopolo2224]

well done!

[@loosethread8754]

When you said even seniors google stuff I'm kind of relieved, I am just beginning my coding and I oftentimes google stuff

[@WebDevCody]

we google stuff all the time, it's pretty normal, we are usually just much better at finding the answer to what we need when we google and know exactly what to type

[@Peter-sc1ru]

this guy slays

[@36547]

Cody..I was so frightened to try out the backend espically with typescript and this was exactly what I was looking for. THANK YOU. Currently learning react and typescript so this was a god send. Hoping I can carry this onto making a backend for a normal username and password form. Is there any guides regarding authetnication and how to use typescript with it? Thanks

[@moutafatin]

I will love it more if there is a part about authentication

[@RaefetOuafiqo]

yep, i would love see auth too, i still have problems figuring out the jwt auth, even tho I made it work and I understand the basics but I don't understand why the refresh token is needed and how to secure the auth correctly.

[@vasconcelosjean42]

thank you so much

[@Sky-yy]

Doing great 👍

[@Applecitylightkiwi]

Just finished it while i was traveling, gotta say that was pretty dry code, thanks for showing

[@wagnerfabricio]

Congrats about the video! You could use the package: "ts-node-dev" instead of the "ts-node", this one came with a built in "nodemon" inside...

[@yipyiphooray339]

Tyyy!!

[@Applecitylightkiwi]

I already know how to set it up but you have a seperation of api and the client, i havent seen this approach before, im going to watch it while traveling

[@MatiasBaldanza]

going through this tutorial, I found that at 27:40 you can skip using nodemon if you use ts-node-dev, which recompiles and restarts the server when files are changed.

[@snorlaxx8471]

Please do a followup video where you show the "proper" way of implementing the same functionality.

[@ariebolotin2173]

Great tutorial! Can't you simply just add decks to the dependency array of useEffect to fix not having to refresh the page each time a card gets created or deleted?

[@jggabayno]

hello bro, did you try to use dockerize express js, typescript, prisma?

[@universecode1101]

This is huge ✅

[@chasedemaster1086]

2:58:00 what is the command after adding the MONGO_URL to the new env file that brings you back to the terminal?

[@NevDevInfo]

Can you make a video on How to build and deploy SERN Stack, like SQL, React Typescript, Express, and, Node?

[@AlexSchwartzATV]

How should the routing be set up to allow the use of "Link" exactly? I'm confused the docs had it like this because i don't see it set up like this anywhere else and now that i'm trying to put Links in the header without refreshing the whole page it has to be written in a way that allows it.

[@WebDevCody]

Not sure what you mean, next link prevents needing to refresh. It should just fetch the data needed for the next page and hydrate react to use it

[@AlexSchwartzATV]

@@WebDevCody To use Link in the header i had to code it like this to get the paths/routes in the scope of the header in order for Link to be referring to something within the scope, instead of using tags: const HeaderLayout = () => ( ); const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "", element: , },

[@nicholasbazzoni7084]

the nested arrays section is the part that really confuses me as in the exact workflow from client to api to db and vice versa. Think i should spend about a week trying to understand this more as its obviously crucial to the build. my basic understanding is that the API is being updated via database then the client component is feeding off that while re-rendering fresh updates with use effect so the client side is always caught up?

[@igetpaidtocode]

Mern + trpc prisma for me keeps typesafety 💯💯💯

[@mpowereer6992]

how about making a turorial how to make express + nextjs authentication with auth guard?

[@martinvlad]

I've noticed that sometimes when passing a function into an onclick handler, the syntax is either onClick={handleChange} or it is passed like this, onClick={ ()=> handleChange()}. Can you explain when and why to use each one?

[@WebDevCody]

If you need to pass arguments to the click function, you’d need to use an arrow function

[@Applecitylightkiwi]

Not sure if youre still looking for an answer but () => is if and only if the function is fired, it can prevent for instance duplicates. If you want the onclick handlechange Then you should do the logic inside the handlechange function, Also the latter one is inline logic

[@romimaximus]

At 46:13mins, i was wondering, why you didnt get an error !!, ...cause your "post' request endpoint , was before the database connection ? ..that got me thinking 😂😂..

[@nakshatrasingh6933]

t3 pleaseeee

[@tuckermiller394]

Can you refresh the page from the Single Deck view? I dont think Hostinger supports SPAs that way

[@WebDevCody]

you have to setup an htaccess rewrite rule to allow refreshes

[@tuckermiller394]

Thank you so much!@@WebDevCody

[@ahsiznit]

Quick Question. In Thunderclient, why do you have to do http: instead of https in order to get a good response. The default was https:localhost:500 and it was giving me errors. However when using broswer, localhost:5000 yields the desire hello world yet localhost:5000/decks gives "cannot GET/decks"

[@WebDevCody]

https is for hosted sites with ssl certs, http is for non secure local apps

[@ahsiznit]

@@WebDevCody Thanks! Wealth of knowledge in this tutorial!

[@DOLYEROMEROJR]

hey man great video but I have error at mongoose set up which it won't listen to the port SError: ⨯ Unable to compile TypeScript: src/index.ts:4:8 - error TS1192: Module '"D:/Users/ASUS/Desktop/MERN FLASHCARDSAGE/server/src/models/Deck"' has no default export. 4 import Deck from "./models/Deck";

[@yanao3907]

for some reason, my vscode is not showing errors inline. how do I fix it? I can only see the squiggly line and error only when I hover over it.

[@marjo9952]

A month late but look up the "Error Lens" extension

[@AlexSchwartzATV]

In {deck?.title} what is he question mark?

[@WebDevCody]

Optional chaining operator

[@AlexSchwartzATV]

@@WebDevCody Huh i see. thank you

[@djoezi3662]

If you are reading this comment, this is the surface of the iceberg!! DON'T think that backend or full-stack is so easy. GOD LUCK MAN

[@johnsanchez8429]

Can you touch on some of the next steps of progression after this?

[@djoezi3662]

@@johnsanchez8429 com on man, this is just e-commerce! Next is FB

[@nileshsangle4946]

what was that extension showing possible error in ur vs code and thoese red lines

[@WebDevCody]

error lens

[@Soppybobs]

Ahh nothing like getting 10,000 merge conflicts, always such a pain in the ass with the gitignore hahaha

[@EnlightenPulse27]

This was really helpful. I am on journey of becoming developer through self learning but it is really hard when you don’t have a fixed curriculum to follow. I have learning and create a lite task manager (MERN) app. It has login signup and whatnot but I am lost now. I don’t know where to go from there when I search for job I don’t think there are entry level job left anyone. There is always a demand for more. There are less sources that teach you advanced stuff like making your website secure, fast and incorporate different things etc.. If there is, the transition is really hard to grasp. If anyone reading this comment can suggest me like how can I review my code as my project is pretty big or where to go from there to learn more. I need a helping hand from an experienced developer. I will continue to learning more and more.

[@LetsBringPeace]

Ive gone through the video but somewhere I can't get this to work. If I download the finished project from your github it doesn't work either. someone help me? do I need to install all the npm modules on the project I downloaded?

[@WebDevCody]

On the vps you need to git clone and npm i

[@LetsBringPeace]

@@WebDevCody on the vps or from GitHub? Sorry I'm confused

[@finnalandem]

Anyone else have the issue of Hostinger not providing the free domain with purchase? It said a year free was included in my plan and I only have the options to pay for a new one or migrate an existing. And lemme tell ya, the whole "under 5 minutes" response time is a sham.

[@WebDevCody]

did you sign up for the Premium Web Hosting - 12 Months Plan? let me know if you get this resolved please.

[@joshodom131]

Why doesn’t your terminal properly show the path when you cd into another directory? That would bother and probably mess me up a lot.

[@WebDevCody]

I think I made the terminal less characters so it’ll stay on screen during my yt shorts, never changed it back

[@benthrasher945]

1:15:31

[@alexanderskachko1221]

**Important** If you upload a multi page React or SPA to Hostinger, you will have issues when reloading the page or trying to access the page via URL that is not the home or “/“ page. You will receive a 404 error. (More in comments)

[@alexanderskachko1221]

The reason why this happens is because Hostinger is expecting actual pages and react is just a bundle that is injected into the DOM, so the pages are all generated at once and are able to be accessed by React Router DOM.

[@alexanderskachko1221]

To fix this you will need to host your application through your VPS and not through Hostinger’s web hosting. In your Hostinger settings disable the CDN, and point your domain address to your server so that it can receive requests. Then look at Caddy’s documentation to configure your web server to server your react application or other SPA’s, and have your vps be a web server that serves content.

[@alexanderskachko1221]

Also my apologies Web Dev Cody for falsely accusing you of deleting my comments. I had no idea KZbin deletes comments if they are too long, and my previous explanation was an entire book

[@WebDevCody]

I think also there is a way in hostinger to setup rewrite rules. I remember reading a “how to deploy react on hostinger” blog post and I had to create one file to create the rewrite rules

[@alexanderskachko1221]

Can you link that article or make a video on that? It is stressful hosting it all on a VPS.

[@taxiarchismintzas8272]

why typescript and no javascript?

[@WebDevCody]

Typescript is much better

[@darkmift]

Feels like bad practice to return diffrent data structure based on controller logic.

[@WebDevCody]

What controller in particular are you talking about?

[@TheDionysiac]

Anyone have good suggestions for the poors like me who can't afford paid hosting even at Black Friday pricing?

[@WebDevCody]

you can try using railway.app, they give you hosting for like 20 days out of the month. You can try hosting of a personal laptop but then you'd need to run it 24/7. Depends on what you want to host I guess.

[@TheDionysiac]

@@WebDevCody Wow, not even through the Express set up and you're already back with a solution! I was going to try Google's Cloud hosting, but will give railway a shot first. Thanks for the help out.

[@finnalandem]

Your code only gave me 2% more of a discount lol

[@WebDevCody]

when I type in the code it's doing 10% for me. what plan was it for?

[@finnalandem]

@@WebDevCody It was for personal 12 months

[@finnalandem]

@@WebDevCody I went ahead and bought it anyway lol, love your vids man, keep em coming!

[@cedricvillani8502]

Why pay when you can use your own computer as a server for free. Any paid might as well use BlueHost or DigitalOcean. As soon as you said get the 48mo plan that’s how I knew you were no more then an employee trying to get there sales figures up. Ugh just more total commercial junk clogging up KZbin. Pay attention to the content ppl!! This is all about getting your personal details and CC info. 😢

[@WebDevCody]

I mean, this is a sponsored video which is how KZbinrs make money. If you want to start the video at the mern part of the video, just do that. I still walk you through how to build a basic mern app

[@webapple1]

I mean i don't think you have to use that service the info is still valid , just that for sponsor that he show you that particular service , it would be no different if he didn't get paid , he'd just pick a service and walk you through it.... ???.. Like i want to learn the stuff he's showing but I'm not going to pay or buy anything some might want to. Also you could use your computer as a server for development for sure , but I don't think you'd want to actually release anything meaningful with your home computer as host... thats probably asking for trouble.

[@faymalin]

"This is live coding & I had nothing prepared.." 54:17 that license is from 2 days ago #exposed #busted #lies #sus #unsubbed Just playing lol 😂😂

[@WebDevCody]

Nobody's gonna know, nobody's gonna know! How would they know?!

[@mahendranath2504]

Thank you for amazing content 👋👍👌👏🫡🙏🏻😎🤝🫰🏻✌️