Building a Todo List App with MERN Stack | Todo Application using MongoDB + Express + React + Node
HTML-код
- Опубликовано: 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!
Thank you for helping me with my first MERN project!
Taught me so much about mern stack thanks !!!
Amazing! Thank you so much!
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
thanks for this vide
thank you
brilliant
Bro, u r a good tutor.😊
But please use background noise remover software.
Sir can you provide the code as a reference purpose for cross checking.
thanks bhai
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
thx
requr=est is not defining in post showing not connecting with database
please do ecommerce project using node js, express js, mongodb, react with payment getways
❤❤❤❤😊
how to deploy this project with local mongoDb database , what i have to set up local mongodb before deployment , please tell me
Can I get the source code? I was stuck in the project.
It's a request from my side.
MERN E-commerce project...
it say net::err_connection_refused
how to solve??
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
please do projects sir
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..
mongodb compass is not creating the database automatically
css not working....
sir can you please provide source code for cross check
source code ??
Can we get the source code?
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
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
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
please share source code as well.
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?
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?
bro code please
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!!
update todo not there in front end
same issue
Source code?
29:49 done=true not working..
wheres the source code ?
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
where is the source coooooooooooooooooooooooooooooooooooooode
Oh ma gud where is the source code
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