Building a Todo List App with MERN Stack | Todo Application using MongoDB + Express + React + Node
Вставка
- Опубліковано 7 сер 2023
- In this video, we're going to build a todo list app using the MERN Stack. This is a full stack solution, meaning we'll be using MongoDB, Express, React, and Node. We're going to build a todo list application that users can add tasks to and track their progress.
This is a great tutorial for anyone new to the MERN Stack, or for anyone who wants to learn more about how to build a todo list app. We'll take you step by step through the process, and by the end, you'll have a working todo list application that you can use in your own projects!
#todolist #mongodb #reactjs #nodejs #expressjs
Short, sweet, and complete! Thank you!
Finally My first mern project is done because of you, Thanks Brother
Thank you. Great video, keep it up!
Thank you so much! It works!
Taught me so much about mern stack thanks !!!
Amazing! Thank you so much!
Sir can you provide the code as a reference purpose for cross checking.
really good and clear explanation!
Great Lecture. Thanks for making things clear😊😊 May God bless you with lots of his blessings ameen.
thank you so much bro
Bro, u r a good tutor.😊
But please use background noise remover software.
when i am editing the code in app.jsx file localhost stops working and it is showing a vitehmr update and it doesnt show any ouput
requr=est is not defining in post showing not connecting with database
thanks for this vide
thank you
brilliant
how to deploy this project with local mongoDb database , what i have to set up local mongodb before deployment , please tell me
please do ecommerce project using node js, express js, mongodb, react with payment getways
thanks bhai
Can I get the source code? I was stuck in the project.
It's a request from my side.
I'd stuck on 7:30, the style from App.css cannot be applied, what it can be?
I think className should be applied
Could you elaborate?@@aravindp2595
To apply the CSS classes to the elements, you need to assign those classes to the JSX elements using the className attribute. Here's how you can do it in your components:
In Home.jsx, you can apply the home class to the outer element like this: function Home() {
const [todos, setTodos] = useState([]);
return (
{/* Apply the 'home' class */}
To Do List
{/* ... */}
);
}
function Create() {
return (
{/* Apply the 'create_form' class */}
Add
);
}
thank you bro it is working now
@@coronareyesmauriciodassel5345
how to post update date and (fetch data without reload),
for eg: when we click like button of youtube video it don't make reload, it make realtime,like instagram also?
As for your example we can do that because that is front-end but we you would like to update your post then it must reload to fetch updated data.
@@codewithyousaf bhai samjh ni aaya aap ne kya lika hai..
par mujhe ek solution mil gya hai..
mai useeffect se sara data managa rha tha backend se or usse state mai rakh rha tha...
to abb jab bhi koi post ya like function callkarega too fir se useeffect call krwa denge.. jise ab ka updated data bhi aajaye or refresh bhi na kr na pade..👍👍
or dusra tarika redux use krke bhi ho jaye ga..
when you are trying to access to display the todos...user.task .....here task is what?? means from where you get this?? pls response
task is stored inside database
MERN E-commerce project...
thx
sir can you please provide source code for cross check
I have learnt ReactJs and AntDesign, How much time do gou think I can learn Express,MongoDB and NodeJs?
if you are naruto you can learn fast , if you are nobito you need more time
Can we get the source code?
source code ??
it say net::err_connection_refused
how to solve??
please do projects sir
css not working....
mongodb compass is not creating the database automatically
pls how did you add the icons?
fixed
@@uniquetechexploration Can you please help me fix the icons issue?
Can u tell how u fixed it?
we have alot of icons...search on google for some mostly in formats like bscircleFill@@winterflake741
I am unable to find my local IP address port number. Every time I try, it shows an axios error.
u r using mongoDB atlas
use this IP 0.0.0.0/0
just write localhost. It's the same
Can I get the source code?
please share source code as well.
if we do not want vite and want simple npm install, is it ok cause i never use vite and i am also not comfortable with this
Yes it is ok to use although
why are you not comfortable with it ? any specific reason?
How did u add the icon
the delete icon ?
Icons are not working, what to do brother?
I think when something like icons is not working, it is the best opportunity to explore other icons libraries out there!!
bro code please
Source code?
update todo not there in front end
same issue
❤❤❤❤😊
15:55 what is the local ip adress of mine ? how to know that ?
can i know it using
- ipconfig in cmd
which i should use among :
IPv4 Address. . . . . . . . . . . .:
Subnet Mask . . . . . . . . . . . :
Default Gateway . . . . . . . . . :
hi, did u solve this?? i couldnot find my local ip address port number. everytime it shows axios error
wheres the source code ?
Oh ma gud where is the source code
29:49 done=true not working..
where is the source coooooooooooooooooooooooooooooooooooooode
Pdf hongi to upload krdo
AxioError coming
Too much code skipping..you shouldn’t make video like this..wastage of time
you have to create request in thunder client by yourself otherwise it won't work
Not good for beginner It involve lack of explaination and also improper speech which pose difficulty for viewer to understand
I am unable to get id in my console please help @Code With Yousaf
when you pass it to the server side through URL then destruct it from req.params if it was empty then check your front-end
Hey! I had the same problem, i just needed to add a "key={todo._id}" on the classname task div:
----
todos.map(todo => (
handleEdit(todo._id)}>
----
It worked for me, i don't know why his code is working.
Location .relaod didn't work
True