so npm run build in vite produces a dist foldet that we use for production. how would we do the same for next.js? npm run build in next.js produces a .next folder. what do we target in the .next folder to be used for production when we use express as the backend?
This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps. npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion npm i @chakra-ui/icons@v2.1.1
You are a Northern Start that just guided me i have spent 72hours looking for the reason my code wasn't working. and when i did i didn't know how to roll back to v2 until i saw your comment . So thank you very very much
This comment needs to be pinned. I hit a road block with this project trying to figure out why it wasn't working. Doesn't help that chakra UI has 2 different websites. Thank you so much for this
Great tutorial ! However, there's a small improvement that could be made at 36:15. If you send a DELETE request using a valid MongoDB ID (with the correct length and syntax) but for a non-existing product, it won't trigger an error; instead, it will return a status of 200. To fix this, a validation should be added to check if the product exists in the database.
Been about 3 years since I created a full stack app from the ground up when I was in training at my first job. This helped shake the rust off. I have a live coding interview tomorrow and I hope this prep was enough!
For those who are getting this error "NODE_ENV" is not recognized as an internal or external command, operable command or batch file. install this - npm install cross-env --save-dev then add cross-env before both - "scripts": { "dev": "cross-env NODE_ENV=development nodemon backend/server.js", "start": "cross-env NODE_ENV=production node backend/server.js" } then npm run start "you re good to go 😊"
Hello team freecodecamp, can u please make a tutorial for MERN Stack from scratch which covers all the elements of the stack ? A beginner to advanced tutorial? We're very thankful to you guys for your help 👐
1:14:42 Using Copilot when making tutorials is a very bad experience for the people who are following the tutorial, because you always have to pause the video to write what you did just by pressing a key. That means a context switch every 10 seconds or so, which kills concentration and will, honestly! If it were written by hand, no pause would be needed. Always keep that in mind: how would someone that is doing on his own PC what I'm doing in the tutorial be able to follow me? What would their experience be? If it's not seamless, then your approach is flawed.
8:30 no need for nodemon in the latest version of node, same thing for .env. To combine both without installing just add --watch flag within the server script : "dev":"node --watch --env-file=.env backend/server"
This project was really good and also the explanations of the code helped understand the project better. Keep up the good work. You made all the steps really easy to follow.
This is amazing 🎉 I been a front end engineer for some year's now and I recently decided to Learn MERN stack and a I saw your video and that's it I well know that the knowledge I have as a front end engineer helped me allot but you also did a great job Weldone.. You just got a new subscriber ❤
right-hand side of 'in' should be an object, got undefined while building the frontend at around 1:10:00. I wish it was just shown with no auto-imports or install. Those things make it very hard to follow along.
It is very helpful if freecodecamp make a video about Ai engineering from scratch. As an complete beginner it is very difficult to know how to start AI engineering and AI related learning from scratch and the good road map that includes step by step instructions or materials to make a person as an AI engineer.
Why is it called the MERN stack? Doesn’t using Express imply that you are already using Node? Seems redundant. Why not call it the REM stack? No redundancy, and it flows frontend to backend: React UI, calls Express API, which queries a Mongo DB
for mac users who are getting an error an error in the beginning, it's because the "5000" port is used by the air play reciever. turn it off and you are good to go.
@@sovitagarwal9813 if you are using terminal, use the "touch .env" command. if you are using a code editor like vs code, you shall see an option/ button to create file i.e. ".env"
How can I view details about variables like you? When I hover something in VSCode it just shows "Any". Also every object has different colors while mine is just all blue
16:30 - Does anyone else have this error in their terminal even after checking all IP, installation settings, server.js and .env files, etc. are correct? Error: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist
hi, Thanx for the great video, wont it be of good practice if we could first check whether the element we want to delete or update exist in the database before we proceed
at timestamp around 1:26:00 where we are creating this method for the CreateProduct section const res = await fetch("/api/products", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(newProduct), }); when I test it, my code keeps failing and product is not created successfully. Has anyone else experience this? I went through the API calls tracing them and everything looks good. Any suggestions would be so helpful.
what i did to fix it. Used Cors to configure backend to accept request from front end and I used the full backend port in the fetch definition for the front end
To be honest am not here for programming but u did a course on davinci resolve so regarding that i hopping one day u'll also make one for houdinisidefx and one for blackmagic fusion (composting).👍😌
Yeah me too, the issue is the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Did you find the solution?
"NODE_ENV" is not recognized as an internal or external command, operable command or batch file. npm install -g win-node-env Try installing this and it should work.
@@Sezodi try shifting .env out to the root folder (i.e., same level as your backend and frontend folders). Initially, i faced the same issue as you but i tried to shift it out and it worked. I'm not sure if this is the right way.
Got this from comments above: "This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps. npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion npm i @chakra-ui/icons@v2.1.1"
Okay, but why you put the node_modules folder for the backend to the root folder? It wouldn't be better to put it into the backend folder where it originally must placed?
I am following this tutorial but I am using a mongodb docker container on my machine instead of Atlas. I needed to change the app.delete line in server.js like this to make it work: await Product.findByIdAndDelete({ _id: new mongoose.Types.ObjectId(id) }); Otherwise it did not delete the record from db.
I am experiencing an issue running the frontend from the get go, the issue seems to be the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Can anyone assist please?
hi everyone greetings from Argentina. I made a somewhat silly mistake but wanted to share it with everyone since it can happen to someone else. Always check your backend server is running, otherwise the requests won't get processed. That's what happened to me. Kept checking my code and was fine but completely forgot to start the backend server since I was focusing on the frontend at that particular point. So I was creating products but when clicking the button to send the data got a json-related mistake but was because my backend wasn't running. Happy coding!
I got very confused since I using was typescript so I thought it was type error. Spent around 2 hours looking for the bug but failed, came back after few hours and saw your comment.
should know the basics of the individual technologies (HTML, CSS, JavaScript, React, Node.js, Express.js, and MongoDB) since he doesn't explain them for anyone who'd be a beginner - but he does show how to put everything together
@@steveh7487 I am a beginer. What extent do you need to learn about these topics. Can you recommend some vedios on youtube foreach topic? There are lot of courses and playlists but i cant find relevent courses correctly since i am a beginner. When you look at Js it has 3hrs 4hrs 12hrs 22hrs i dont know what to choose.
I havent done it yet, but i'll do it now. I think you have to know the basics, mainly javascript, but meanwhile you're doing the course you can look up wwhat you dont know or understand yet in google, docs, or evne chatgpt. Is a very good way to learn, as you're building your knlowledge by building projects.
'NODE_ENV' is not recognized as an internal or external command, operable program or batch file. I am getting this error while I am starting my server, how can I resolve it
got the same, may be as you are trying to start it from root, as the react application is first made inside the frontend folder first go inside it with terminal command "cd frontend" after that try to start with "npm run dev"
Hope it helps everyone! Thanks for watching ❤
Thank you
Thank you
Good to see you here bro. I followed your threads clone and built it
Another Buraks video , but i just done your chat app :)
so npm run build in vite produces a dist foldet that we use for production. how would we do the same for next.js? npm run build in next.js produces a .next folder. what do we target in the .next folder to be used for production when we use express as the backend?
This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps.
npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion
npm i @chakra-ui/icons@v2.1.1
Thanks
You are a Northern Start that just guided me i have spent 72hours looking for the reason my code wasn't working. and when i did i didn't know how to roll back to v2 until i saw your comment . So thank you very very much
This comment needs to be pinned. I hit a road block with this project trying to figure out why it wasn't working. Doesn't help that chakra UI has 2 different websites. Thank you so much for this
You are amazing!thanks for that.
thx a lot
My first MERN project! I love it !! and I've learned a lot from the tutorial !! thanks a lot!
Great tutorial ! However, there's a small improvement that could be made at 36:15. If you send a DELETE request using a valid MongoDB ID (with the correct length and syntax) but for a non-existing product, it won't trigger an error; instead, it will return a status of 200. To fix this, a validation should be added to check if the product exists in the database.
Been about 3 years since I created a full stack app from the ground up when I was in training at my first job. This helped shake the rust off. I have a live coding interview tomorrow and I hope this prep was enough!
Thank you! This is hands down the best explained MERN tutorial project I've come across.
For those who are getting this error
"NODE_ENV" is not recognized as an internal or external command, operable command or batch file.
install this - npm install cross-env --save-dev
then add cross-env before both -
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon backend/server.js",
"start": "cross-env NODE_ENV=production node backend/server.js"
}
then npm run start
"you re good to go 😊"
you're a gentleman and a scholar
Thanks man! how did you come to know the solution?
Thank you
You are a legend sir!
Thanks buddy! Great help
First viewer from Nigeria
Are you a nigerian prince?
This is the most amazing video i have seen in context to MERN
Hello team freecodecamp, can u please make a tutorial for MERN Stack from scratch which covers all the elements of the stack ? A beginner to advanced tutorial?
We're very thankful to you guys for your help 👐
This is an amazing tutorial. Liked the way each minor concept was explained.
1:14:42 Using Copilot when making tutorials is a very bad experience for the people who are following the tutorial, because you always have to pause the video to write what you did just by pressing a key. That means a context switch every 10 seconds or so, which kills concentration and will, honestly! If it were written by hand, no pause would be needed. Always keep that in mind: how would someone that is doing on his own PC what I'm doing in the tutorial be able to follow me? What would their experience be? If it's not seamless, then your approach is flawed.
🤭
Yeah, that bothered me. But great tutorial nevertheless.
8:30 no need for nodemon in the latest version of node, same thing for .env. To combine both without installing just add --watch flag within the server script : "dev":"node --watch --env-file=.env backend/server"
This came exactly when I wanted to learn the stack better, yoj guys are great
same!
This is brilliant, and the explanations are great, not to mention I now understand how to use the Postman workbench. ⭐⭐⭐⭐⭐
This video just made me a full stack engineer
This project was really good and also the explanations of the code helped understand the project better. Keep up the good work. You made all the steps really easy to follow.
This is what i want love from india❤ Thanks free code camp for getting this tutorial for us
Thank you for bringing the practical knowledge to us. Really appreciated.
çok sade ve temiz bir anlatımla hızlı bir crash course olmuş ellerine sağlık. Daha çeşitli içeriklerini de takip ediyor olacağım.
This is amazing 🎉
I been a front end engineer for some year's now and I recently decided to Learn MERN stack and a
I saw your video and that's it
I well know that the knowledge I have as a front end engineer helped me allot but you also did a great job
Weldone..
You just got a new subscriber ❤
right-hand side of 'in' should be an object, got undefined while building the frontend at around 1:10:00. I wish it was just shown with no auto-imports or install. Those things make it very hard to follow along.
you guys are the goats, not sure if you get money out this, but at least helping others will benefit yall ❤
Awesome tutorial! Thank you! I`ve just deployed the app. Everithing is clear.
im not even done with the vid but i have learned a lottt ty my guy
It is very helpful if freecodecamp make a video about Ai engineering from scratch. As an complete beginner it is very difficult to know how to start AI engineering and AI related learning from scratch and the good road map that includes step by step instructions or materials to make a person as an AI engineer.
I also finding this type of videos . very helpful if it release at recent time as much as possible
Looooong overdue. Thanks a lot guys!!!
♥
finally a latest tutorial thanks a lot
This is such a smooth one.. ❤
Beautifully explained and much appreciated!
reallly solid tutorial so far
As usual awesome content
thank you for explaining things. some minor problems as discussed in the comments but nice video
Most needed I am confused a little in this thank you for providing this video.❤🎉
Hey @asaprogrammer_ is that an extension used to autofill at 14:30? Filling the mongoose database in try.
github copilot
did you get the answer?
Do you mean github copilot?
Thank you; this video was very helpful.
Thanks a lot for this. It was very helpful.
Great Video, Completed
Why is it called the MERN stack? Doesn’t using Express imply that you are already using Node? Seems redundant.
Why not call it the REM stack? No redundancy, and it flows frontend to backend: React UI, calls Express API, which queries a Mongo DB
for mac users who are getting an error an error in the beginning, it's because the "5000" port is used by the air play reciever. turn it off and you are good to go.
how did u create an env file in mac
@@sovitagarwal9813 if you are using terminal, use the "touch .env" command. if you are using a code editor like vs code, you shall see an option/ button to create file i.e. ".env"
1 doubt
Why to use zustand to avoid prop drilling when we can use built-in hook useContext? btw thanks a lot
why is frontend page being blank even after I installed vite , could anyone help ?
Great... Thanks a lot to share this with us.
FCC cares about our skils even more than ourselves...❤
How can I view details about variables like you? When I hover something in VSCode it just shows "Any". Also every object has different colors while mine is just all blue
Nice comprehensive stepwise progressive …👍
16:30 - Does anyone else have this error in their terminal even after checking all IP, installation settings, server.js and .env files, etc. are correct?
Error: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist
Thanks that helped me a lot
Hoooo im first to comment great community
hi, Thanx for the great video, wont it be of good practice if we could first check whether the element we want to delete or update exist in the database before we proceed
Great work
Nice Project
this tutorial is pretty good, a bit too reliant on the copy-pasting toward the end though
Ty alot bro, that really helps me
at timestamp around 1:26:00 where we are creating this method for the CreateProduct section
const res = await fetch("/api/products", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newProduct),
});
when I test it, my code keeps failing and product is not created successfully. Has anyone else experience this? I went through the API calls tracing them and everything looks good. Any suggestions would be so helpful.
what i did to fix it.
Used Cors to configure backend to accept request from front end and I used the full backend port in the fetch definition for the front end
@@manyakaanjorin8364 was getting the same issue, thanks maan
@@manyakaanjorin8364 how exactly? I am stuck here too.
Hi, can you please detail the solution I'm having the exact issue
What extensions are used in the video, where it has explanations for methods, objects, etc on hover?
very nice ❤❤
To be honest am not here for programming but u did a course on davinci resolve so regarding that i hopping one day u'll also make one for houdinisidefx and one for blackmagic fusion (composting).👍😌
I am facing issue with frontend, react page not displaying
Yeah me too, the issue is the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Did you find the solution?
Pls bring more such course
"NODE_ENV" is not recognized as an internal or external command, operable command or batch file.
npm install -g win-node-env
Try installing this and it should work.
hey, just wondering which extension you're using for the snippets that are showing in your editor?
GitHub Copilot(paid), Tabnine(got a free version)
I followed all the steps until @14:06, but I my connection string in the console still shows Undefined. Can anybody help me with this?
try putting the .env at the same level as your backend and frontend folder
@@Qccccc the .env file is in the same folder as server.js
@@Sezodi try shifting .env out to the root folder (i.e., same level as your backend and frontend folders). Initially, i faced the same issue as you but i tried to shift it out and it worked. I'm not sure if this is the right way.
I'm having the same problem, I tried all the steps mentioned here and more I could find but still stuck on Undefined
Hi, someone is having troubles when using Chakra UI?? I cant just show the button, idk what exactly happens and cant solve it
i do have the same :/
same , did u solve it
Also having the same issue
Got this from comments above:
"This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps.
npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion
npm i @chakra-ui/icons@v2.1.1"
What's the theme name that this guy's using? Please tell if anyone knows.
Houston. Install it as an extension :)
I went through about 15 extensions until I found it haha. Then I just saw this comment 🤦♂ Also, which vscode icon extension do you use?
Hi, after paste the code, how you import the at top? Using extension or shortcut vs code?
Okay, but why you put the node_modules folder for the backend to the root folder? It wouldn't be better to put it into the backend folder where it originally must placed?
What are the prerequisites for this project?
I know HTML, CSS and Javascript.
Can I learn MERN Stack by watching and developing this project?
i think you should learn react first... do a separate course on react and express if possible then come here...
@@adityaborse4424 Sure! Thanks Man.
I am following this tutorial but I am using a mongodb docker container on my machine instead of Atlas. I needed to change the app.delete line in server.js like this to make it work: await Product.findByIdAndDelete({ _id: new mongoose.Types.ObjectId(id) }); Otherwise it did not delete the record from db.
My bad! I was forgetting to add "Content-Type: application/json" header when sending the request.
I am experiencing an issue running the frontend from the get go, the issue seems to be the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Can anyone assist please?
After I do npm run build and npm run start, my localhost:5000 is blank with Cannot GET error. Anyone facing same issue?
I get the same error when I do npm run dev but it only happened after i opened this project two days later
Hello. For global state abstraction, which of these are optimal: redux, mobx and zustand ?
hi everyone greetings from Argentina. I made a somewhat silly mistake but wanted to share it with everyone since it can happen to someone else. Always check your backend server is running, otherwise the requests won't get processed. That's what happened to me. Kept checking my code and was fine but completely forgot to start the backend server since I was focusing on the frontend at that particular point. So I was creating products but when clicking the button to send the data got a json-related mistake but was because my backend wasn't running.
Happy coding!
oh man thanks a lot I was making the same mistake. Muchas gracias!
I got very confused since I using was typescript so I thought it was type error. Spent around 2 hours looking for the bug but failed, came back after few hours and saw your comment.
@@HassaanUddin7 Glad to know I helped someone with my comment 😄😄
thanks
Please make a tutorial like this on using VueJS or nuxt js also ❤❤❤❤❤❤❤❤❤
@ freecodecamp please make a full stack PHP / laravel backend.thanks
Great thanks
what are the pre requirements for this tutorial?? what should you know before following this??
should know the basics of the individual technologies (HTML, CSS, JavaScript, React, Node.js, Express.js, and MongoDB) since he doesn't explain them for anyone who'd be a beginner - but he does show how to put everything together
@@steveh7487 I am a beginer. What extent do you need to learn about these topics. Can you recommend some vedios on youtube foreach topic? There are lot of courses and playlists but i cant find relevent courses correctly since i am a beginner. When you look at Js it has 3hrs 4hrs 12hrs 22hrs i dont know what to choose.
I havent done it yet, but i'll do it now. I think you have to know the basics, mainly javascript, but meanwhile you're doing the course you can look up wwhat you dont know or understand yet in google, docs, or evne chatgpt. Is a very good way to learn, as you're building your knlowledge by building projects.
very helpful
thank you so much !!
Please make a course on PERN STACK
He already did that. Go to his channel.
@@_nirajghimire outdated
@@gyaneswarrout who said? its awesome.
where did you check?
pernstar
@@gyaneswarroutoutdated in 3 months?
@9.29 what's the vscode extension that is causing the get to autocomplete?
I think it’s copilot
the put method is not working in my project it is showing no response in body->raw->section can some one explain
Thank you 🙏
Thanks a lot, but after doing cross-env my app has no products display though mongodb has.
DURING FRONTEND PART DONT DELETE REACT IMPORT, 59:22
Hello, I have a question. Why is he using just router component without any router component? I just want to know if it's a good practice
bruh the copilot almost wrote the entire code for ya lol
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file. I am getting this error while I am starting my server, how can I resolve it
I'm fix it
npm install -g win-node-env install.
Will it work ? And will hosted on render?
@@sadespair00 Not working
Sorry its worked I think after npm run build and npm run start . Thank you
In package.json file, under scripts write, "start:prod": "SET NODE_ENV=production node backend/server.js". Then do npm run start
Hey i’m having an issue maybe someone else is having the same problem. I go to start up the webpage the only thing i’m getting is “Cannot GET /“
got the same, may be as you are trying to start it from root, as the react application is first made inside the frontend folder first go inside it with terminal command "cd frontend" after that try to start with "npm run dev"
Error: Cannot find module '/opt/render/project/src/run'
Facing this problem while deploying on render can anybody please help me out?
Does freecodecamp consider laravel dead?
What extension was used for code snippet autocompletion and is it free?
its ES7 React/Redux/GraphQL extension in vs code..yes its free
@@keshaniperera1726 Thank you. Let me isntall it now.
est t-il possible d'ajouter un login à cet application?
Which code autocompletion tool/extension did author use? Is it AI?
it's copilot
Can u also do full stack python web developer tutorial? Plz it will be very helpful.
Can i add this project in my resume?
when i complete the application, it doesn't run what is the problem please
How do I prevent anyone write in my data base with https methods ?
Thank you
Where is the login to web application part?