Full Stack MERN Todo App with MongoDB, React, Express, Node | Responsive + Deployment + Full Notes

[@GiraffeReactor]

Hi, everyone. I just published a very big video 9+ hours on the Auth.js (next-auth) library. If you are interested please check it out: kzbin.info/www/bejne/n2fbgHeVhNZ4mqssi=jxQ5_5Vdaz5OZ9Vk

[@traezeeofor]

I can see you're an advanced learner still hunting for his first major gig, yet you put so much into making this tutorial. Awesome work man. Well done!

[@GiraffeReactor]

Appreciate the comment, thank you!

[@sanjanaj6542]

This was one of the best tutorials I've come across after months. I tried my hand at a few projects but they were so poorly explained I couldn't learn much. The simplicity of this is what made it great. This was really helpful, Thank You.

[@GiraffeReactor]

@@sanjanaj6542 thank you ^^ slowly working on a 2024 version of this course feel free to check it out when it comes out

[@IsmaOnYouTube]

Awesome video! Really helpful for a beginner, hope you continue with this great work 👏

[@GiraffeReactor]

Appreciate the comment thank you for watching!

[@IgorOdaryuk]

I guess it's the best todo app that I can find on KZbin on this topic, thanks for sharing!

[@GiraffeReactor]

Thank you means a lot!

[@coreysantarossa3337]

This was great!! Simple lessons are the ones that stick the best.

[@GiraffeReactor]

Appreciate it hope to make more videos soon

[@ZakariAdamu714]

I just deployed my app and it's live on render. Thanks bro

[@GiraffeReactor]

Good stuff, thanks for watching

[@zakariadamu9345]

@@GiraffeReactor but it seems render can be very slow at loading web apps, am gonna try Vercel hosting and see the difference

[@saurabhdaswant7833]

very nice video bro very well documented on notion aswell learned many new things on the backend side thank you so much ❤

[@GiraffeReactor]

Appreciate it!

[@HemanthKumar-i9k]

Hey bro did you complete the whole tutorial , I just wanted to know if the todo list is working perfectly fine and this video is a total worth !! Please reply @saurabhdaswant7833

[@saurabhdaswant7833]

​@@HemanthKumar-i9k its does work perfectly fine , side by side you can follow his notion notes aswell

[@Shamsham-jw8ej]

we need more projects like this👌

[@GiraffeReactor]

Thanks I have big AuthJS tutorial coming out next week, and I'm working on a 2024 version of this video feel free to check it out

[@sfayzer]

When did you say there is an easier way to do it? If you could share it with us, thank you for the very simplistic guide. I really watch every single MERN video. You are the best! Keep going.

[@GiraffeReactor]

Which part are you talking about specifically? Also thank you for the comment

[@soumelee5661]

the notion guide is really really helpful. Amazing 👏👏👏👏👏

[@GiraffeReactor]

It was tedious to make but I am super glad it was helpful to you, thank you for watching!

[@sophiagalriado8350]

Thank you for this tutorial, I really love how you explain it so easy to understand. Well done! I hope you continue what your doing, more power to you!

[@GiraffeReactor]

Thank you for the comment I'm working on new videos including a version 2 of this video but been a little busy lately hopefully I can get them out soon thanks for watching!

[@chrisjordan5849]

Thanks i learnt backend deployment because of you really helpful

[@GiraffeReactor]

Thank you for the comment, helps keep me going during the demotivating job hunt that im on!

[@ankitsaurabh8158]

If anyone still facing issue like above at 34:00 then I have a simple solution, in your command line go to server location and type npm install cors, then in index.js of server folder type , const cors = require('cors') in above 3-4 line and then below that type app.use(cors()), and run the server

[@GiraffeReactor]

Thank you for the potential fix. Yes the cors package will work in this case, I was just worried if it would affect the deployment step but someone can let me know about that.

[@ankitsaurabh8158]

@@GiraffeReactor works perfectly fine in deployment too, so we can use this

[@mc_sword299]

bro ı couldn't fix that this way. is there anyway to fix that?

[@sachstar7306]

great would like to see more videos in the future

[@GiraffeReactor]

appreciate you, have two big videos in the queue

[@SalmanJan2574]

Amazing tutorial, Lots of learning! Thank you brother!

[@GiraffeReactor]

Thanks!

[@Pure_Islamic_Teachings]

nice tut, subscribed! just a quick question, why did you specify or downgrade your Node version on deployment??

[@GiraffeReactor]

Thank you for the comment, its been a while so I dont really remember but I think it had something to do with MongoDB issues in deployment it might not be necessary now not sure

[@Pure_Islamic_Teachings]

@@GiraffeReactor Alright thanks

[@vinayakhegde3068]

Thanks man gonna recreate this with go fiber instead of express js 😃

[@GiraffeReactor]

Sounds good haven't gotten a chance to try go myself but I've heard a lot of good things

[@vinayakhegde3068]

​​@@GiraffeReactor I would say the current go web frameworks are only worth it if you need to handle huge traffic for personal projects it's nothing as crazy as devs think btw did build the app took a while lol

[@Ritzeeeee]

To anyone who is making this, this has only one database which is not created for each user separately, so the todo list becomes shared. Keep that in mind while making this. This is a good tutorial for clearing your coding concepts but if the todo app is not personalised then what is the benefit

[@GiraffeReactor]

You're correct, it can still be used as a showcase for a portfolio. I did not add auth or personalized users to keep the tutorial less complex but I do plan on making videos in the future with authentication.

[@Ritzeeeee]

@@GiraffeReactor Sir, if you are reading this, I would like to thank you from the bottom of my heart, for making such a good MERN intro video. If you can bring some other projects in the same format (which is live coding, debugging on the go) such as Blog app, Ecommerce website,etc it will blow up very hard as there is a big gap on youtube. Please do consider this opinion.

[@trillakr2582]

Very well done!

[@GiraffeReactor]

Thank you very much!

[@kit25XD]

Thank you very much. This tutorial is really helpful for me, but I can't get the state display under the title "Awesome Todos" after setting the proxy followed by your instructions. After web browsing, it may caused by the version of react. Maybe a separate setupProxy.js is needed for a newer version? I have stacked in these a few hours. Will you have any suggestions for me?

[@destocot1729]

in your browser console, see what kind of error is being logged. Try to make a test end point on your backend /test and see if you can reach it instead of using the proxy you can also try using the cors package (google npm cors) however, then the steps for deployment might be a little different

[@bhavyachadha]

Thank You!

[@radosvetagalani2361]

Thank you !

[@GiraffeReactor]

your welcome!

[@amiralimov7991]

thank you for tutorial)

[@GiraffeReactor]

your welcome!

[@Prof_moriarity]

Hey bro , what about heroku for deploying ?

[@GiraffeReactor]

I have never used heroku personally, I heard it no longer has a free tier so I never tried it out.

[@AvikNayak_]

Also make the backend in drizzle and postgres sql

[@GiraffeReactor]

I'm working on an Auth.js tutorial that uses drizzle and postgres hope to have it out soon.

[@iftekharmd.shishir1696]

If I use Vite React... Will the app work just fine?

[@GiraffeReactor]

It should work the same for 95% of the video I'm unsure about the deployment part, but I use vite only these days I only used CRA for fun.

[@isarf69]

The best

[@GiraffeReactor]

appreciate it!

[@afzalhamdulay]

why do i have to to use mognodb atlas? isnt there any other way to store data? like cant i just create a local mongo database on my hosting?

[@GiraffeReactor]

Yeah you can definitely just use a local instance, atlas is just really easy to work with (and its free) and if I had to switch computers I could continue to work, it'll also make deployment easier since I don't have to worry about the database as much.

[@afzalhamdulay]

@@GiraffeReactor honestly i am really confused about the database a lot. i hope you can help me with this question. my question is: so while developing the project, we use localhost mongodb database. this is a simple todo app. so using mongo atlas is no no problem as it is free. but what if i have real website which i have to deploy on internet. i cannot use atlas because it is paid for commercial use as free version has some limits and it is made for learning purposes. but what if i dont want to pay? i want the data like username, email, or some data fetched from forms to store in my project folder in the form of database, can i do that way or we have to buy some database technology? or is there any other db technology like mysql which can give me the requirement that i am asking you?

[@GiraffeReactor]

@@afzalhamdulay if you deploy it you cannot save it to file (at least as far as I know) You have to use a database or local storage (which is a temporary solution) Mongodb Atlas is very generous ive done much bigger projects without running out of space If you want to use something else there are some other free database Vercel has a free postgreSQL tier Render has a free postgreSQL tier You can also use backend services like Appwrite, Supabase, or firebase which also have databases you can use for free

[@afzalhamdulay]

@@GiraffeReactor you used mongodb atlas free version for your real world live website?

[@afzalhamdulay]

@@GiraffeReactor thankyou for replying. i will do some research on postgresql and figure out what i have to do. again thanks a lot for replying as not many people actually reply. 👍👍👍👍

[@Ilab_basketball]

Can you make step by step video in react?

[@GiraffeReactor]

What do you mean? This video features react

[@vakkalankasandeep2484]

all ok but update in crud means we should able to change the todo statement

[@GiraffeReactor]

I totally understand what you mean but I decided to focus on just updating the the Todo status, I think it's a great exercise to edit the PATCH endpoint to edit the todos content as well Appreciate the feedback for future videos tho!

[@sarrabouajina8319]

if i closed vs code and i reopened it how to run the app again ?

[@destocot1729]

run the npm run dev again in the server and client

[@ilhammorsalin2503]

@@destocot1729 and be sure to cd server

[@waleedsharif618]

What about Vercel/firebase for deploying ?

[@GiraffeReactor]

i dont think you can deploy a server (at least the way i have it set up) on vercel, as for firebase im not sure how deployment works but you can use firebase as a backend service which i believe would replace your entire backend

[@mylovefeeling]

Thank you.

[@GiraffeReactor]

Glad to help!

[@mynewchannel4141]

why you use mongodb instated of mongoose

[@destocot1729]

I was trying to keep it simple, use less dependencies as possible The mongodb driver is quite easy to work with, I do use mongoose or Prisma sometimes as well but it's good to have practice with the raw version first before using an orm

[@hit_bheda7]

i stuck at this error (Error While Fetching SyntaxError: Unexpected token '

[@GiraffeReactor]

That means the response you got back is not valid JSON, I assume you're doing await res.json(). You can try doing res.text() to see what you are actually getting back, but you should be getting back json. Double check your back end to see what you are sending back you can test it separately with postman as we do in the video as well.

[@hit_bheda7]

@@GiraffeReactor If I Use res.text() Still I Got The Same Error

[@GiraffeReactor]

@@hit_bheda7 Which part are you up to feel free to share the code here if you think that will help. Test the API end point separately with postman to see if the issue is on the server side or on the client side.

[@madhurajyothi3545]

​​@@GiraffeReactorI got error connecting database with server TypeError: Cannot read properties of undefined (reading 'NumberUtils') at Object. (C:\Users\Lenovo ode_modules\mongodb\lib\bson.js:32:43) This is the error I got, I think the error is with database.js code Could u pls hlp me to find this error

[@GiraffeReactor]

@@madhurajyothi3545 not sure what this error is can you share your source code?

[@sarfarazzuneja5067]

toggling check mark only shows after a refresh ..help

[@GiraffeReactor]

That means your backend is working properly but the optimistic update is not, double check your update function on react

[@sanjanaj6542]

Hey were you avle to solve it cuz I have the same problem

[@SonNguyen-nr1ug]

Laptop name

[@GiraffeReactor]

This video was done on a custom built desktop with windows 11, there is nothing special about my computer (at least I don't think there is lol)

[@arupde6320]

be regular

[@nadjibm7]

still the same 2 errors after restarting the react app in 34:40 !, anyone could help please?

[@nadjibm7]

i solve it by removing the proxy key and value from package.json and user cors in the backend it much better

[@GiraffeReactor]

@@nadjibm7 yeah I will be using cors in version 2 of this tutorial, good job on fixing the issue!