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

Connect with me here:

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

Step-By-Step Detailed Notes, Check Them Out!

Emojis: "☑" , "☐", "🗑️"

Resources:
(Frontend)
(Backend)
(Database)
(Deployment)

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

[sanjanaj]

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.

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

[IgorOdaryuk]

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

[coreysantarossa]

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

[IsmaOnYouTube]

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

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

[soumelee]

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

[saurabhdaswant]

very nice video bro
very well documented on notion aswell
learned many new things on the backend side

thank you so much ❤

[sophiagalriado]

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!

[sachstar]

great would like to see more videos in the future

[chrisjordan]

Thanks i learnt backend deployment because of you really helpful

[SalmanJan]

Amazing tutorial, Lots of learning!
Thank you brother!

[ankitsaurabh]

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

[Pure_Islamic_Teachings]

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

[vinayakhegde]

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

[kitXD]

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?

[Prof_moriarity]

Hey bro, what about heroku for deploying ?

[iftekharmd.shishir]

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

[sarrabouajina]

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

[vakkalankasandeep]

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