Full Stack MERN Todo App with MongoDB, React, Express, Node | Responsive + Deployment + Full Notes
Вставка
- Опубліковано 20 лип 2024
- Connect with me here:
LinkedIn Profile: / khurram-ali1
* sorry for all the sniffling, deviated septum things :( *
In this comprehensive tutorial, I'll guide you through the process of building a full-stack MERN (MongoDB, Express, React, Node) Todo application from scratch. You'll learn how to create a responsive design and set up a REST API for managing your tasks. We'll cover every step from development to deployment, and you'll have access to all the essential resources.
GitHub Repository: github.com/destocot/awesometo...
Step-By-Step Detailed Notes, Check Them Out!
Notion Workspace: cyber-halibut-5bd.notion.site...
Demo Application: awesome-todos-youtube.onrende...
Emojis: "☑" , "☐", "🗑️"
Resources:
(Frontend)
create-react-app: create-react-app.dev/docs/get...
css reset - www.joshwcomeau.com/css/custo...
fa2png - fa2png.app/
transparenttextures - www.transparenttextures.com/
(Backend)
Node - nodejs.org/en/download
Express - expressjs.com/
Postman - www.postman.com/
(Database)
MongoDB - www.mongodb.com/docs/drivers/...
(Deployment)
Git Documentation - git-scm.com/book/en/v2/Gettin...
Render - render.com/
00:00:00 - Introduction
00:03:45 - Folder Structure
00:05:45 - Back end Skeleton
00:12:30 - Front end Skeleton
00:18:30 - Creating endpoints
00:30:00 - Connect Back end to Front end
00:37:30 - MongoDB Setup
00:42:00 - Connect Back end to Database
00:51:30 - Creating MongoDB Queries
01:10:15 - Simple Validation Checks
01:13:45 - Full CRUD on Front end
01:45:00 - Styling Front end
01:55:00 - Making App Mobile Responsive
02:00:30 - Deploying App
02:21:45 - Thanks for watching
Hi, everyone. I made a series on working on React Forms. You can learn 21 different ways to work with forms in React (and Next.js). Feel free to check it out here: ua-cam.com/play/PLdQKeVpmXd78dyw_S2o4XVlSBrPkU8RCs.html&si=y-_ZnUEYTdmSwv8v
we need more projects like this👌
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
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!
Appreciate the comment, thank you!
This was great!! Simple lessons are the ones that stick the best.
Appreciate it hope to make more videos soon
Awesome video! Really helpful for a beginner, hope you continue with this great work 👏
Appreciate the comment thank you for watching!
I guess it's the best todo app that I can find on UA-cam on this topic, thanks for sharing!
Thank you means a lot!
the notion guide is really really helpful. Amazing 👏👏👏👏👏
It was tedious to make but I am super glad it was helpful to you, thank you for watching!
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!
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!
very nice video bro
very well documented on notion aswell
learned many new things on the backend side
thank you so much ❤
Appreciate it!
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
@@user-gh9kb9cj1f
its does work perfectly fine , side by side you can follow his notion notes aswell
Amazing tutorial, Lots of learning!
Thank you brother!
Thanks!
Thanks i learnt backend deployment because of you really helpful
Thank you for the comment, helps keep me going during the demotivating job hunt that im on!
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.
Which part are you talking about specifically? Also thank you for the comment
great would like to see more videos in the future
appreciate you, have two big videos in the queue
Very well done!
Thank you very much!
thank you for tutorial)
your welcome!
Thanks man gonna recreate this with go fiber instead of express js 😃
Sounds good haven't gotten a chance to try go myself but I've heard a lot of good things
@@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
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?
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
Thank you !
your welcome!
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
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.
@@GiraffeReactor works perfectly fine in deployment too, so we can use this
bro ı couldn't fix that this way. is there anyway to fix that?
If I use Vite React... Will the app work just fine?
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.
Hey bro , what about heroku for deploying ?
I have never used heroku personally, I heard it no longer has a free tier so I never tried it out.
Thank you.
Glad to help!
The best
appreciate it!
if i closed vs code and i reopened it how to run the app again ?
run the npm run dev again in the server and client
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?
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.
@@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?
@@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
@@GiraffeReactor you used mongodb atlas free version for your real world live website?
@@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. 👍👍👍👍
What about Vercel/firebase for deploying ?
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
all ok but update in crud means we should able to change the todo statement
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!
why you use mongodb instated of mongoose
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
Also make the backend in drizzle and postgres sql
I'm working on an Auth.js tutorial that uses drizzle and postgres hope to have it out soon.
toggling check mark only shows after a refresh ..help
That means your backend is working properly but the optimistic update is not, double check your update function on react
Can you make step by step video in react?
What do you mean? This video features react
i stuck at this error (Error While Fetching SyntaxError: Unexpected token '
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.
@@GiraffeReactor If I Use res.text() Still I Got The Same Error
@@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.
@@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
@@madhurajyothi3545 not sure what this error is can you share your source code?
Laptop name
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)
be regular