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%.

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!!

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

@WebDevCody

Жыл бұрын

🍻

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!

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 👍🏻

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

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.

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

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

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

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

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

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! 🏆

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

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

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!

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

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

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%

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

This is incredibly amazing With such a good instructor 💕

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 🍻

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

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

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.

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.

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

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

@WebDevCody

Жыл бұрын

Thanks glad to hear!

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

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

amazing! would like to see more videos like this

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

@WebDevCody

Жыл бұрын

Awesome glad you think that

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

Great tutorial! Thank you man!

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

having so much fun, learning too

Dude! you are a great "explainer"!

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

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

@WebDevCody

Жыл бұрын

Thanks! 😃

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

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.

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

very great content again

well done!

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

You deserve a Huge Like!

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

this guy slays

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

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

Doing great 👍

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...

thank you so much

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

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.

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.

MORE COMPLECATED PLEASE

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?

Tyyy!!

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

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

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

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

how to run build on backend to deploy on hostinger

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

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?

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 😂😂..

Mern + trpc prisma for me keeps typesafety 💯💯💯

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

7 ай бұрын

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

This is huge ✅

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";

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

@WebDevCody

2 ай бұрын

error lens

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: , },

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

10 ай бұрын

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

t3 pleaseeee

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!

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

@WebDevCody

11 ай бұрын

you have to setup an htaccess rewrite rule to allow refreshes

@tuckermiller394

11 ай бұрын

Thank you so much!@@WebDevCody

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

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

@WebDevCody

Жыл бұрын

Optional chaining operator

@AlexSchwartzATV

Жыл бұрын

@@WebDevCody Huh i see. thank you

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.

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

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.

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

Please do more of these projects. but not on hostinger. Once their blackfriday sale is over its super expensive for students to follow along

why typescript and no javascript?

@WebDevCody

5 ай бұрын

Typescript is much better

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

@WebDevCody

Жыл бұрын

What controller in particular are you talking about?

1:15:31

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

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.

**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

6 ай бұрын

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

6 ай бұрын

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

6 ай бұрын

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

@WebDevCody

6 ай бұрын

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

6 ай бұрын

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

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!

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 KZread. 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 KZreadrs 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.

"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?!

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