Full Stack ToDo App | Node, React, Express, MongoDB Tutorial
ฝัง
- เผยแพร่เมื่อ 21 พ.ย. 2024
- In this video we will make ToDo App Using Full Stack / React, MongoDB, Express & Node.
#FullStack #ToDoApp #React
👩💻 Source Code_______
thebravecoders...
🚀 Join Our Discord Community_______
/ discord
💖 Support Us________
www.buymeacoff...
💖 Social links_______ (Follow Us On Github )
Github: github.com/Abd...
Github: github.com/MdU...
Insta: / thebravecoders
Twitter: / thebravecoders
Those who have trouble in delete api kindly change the code of HandleApi.js's deleteToDo Function to:
const deleteToDo = (_id, setToDo) => {
axios
.delete(`${baseUrl}/delete`, { data: { _id } })
.then((response) => {
console.log("Delete API call successful");
getAllToDo(setToDo);
})
.catch((error) => {
console.error('Error deleting todo:', error);
});
};
u r a hard working man Sir
Very Usefull
I have completely followed the video
Thanks a lot i have learn full MERN stack only in this video
Great Tutorial Brother :),Simple and quick.
Thanks sir you inspired many people 😊
Thanks a lot for making my backend project 🩷
awesome video bro please make such more short MERN project videos, we are waiting..
Sure :)
Thanks bro.. your tutorial was amazing
Did u complete the project? How was it? Did you face any error?
question for getting my first job as web developer which projects you recomend me to do and this one to do app is good too i mean it will help me to find job
@TheBraveCoders your awesome bro, thanks for the wonderful video
Thank you for uploading such an amazing video!!
Could anyone please help me in adding the mark todo as completed in both frontend and backend
Take a boolean 'done' in backend and default value will be false. Once user click on checkbox from FrontEnd update its value to true. Based on that do a conditional rendering of text like this:
{done ? todo.text : todo.text}
That's how u will do it dear 🤭
tnx for sharing yr knowledge
Can you guide me for what if I have to do a nested todo list like list inside a list. Like main todo and under it sub todo.
Excellent
Thank you so much bro 🙏🙏❣
Thank you very much, it helped a lot!
Good
great content! keep it up!
Thank you 😊
Thank you so much!
Amazing App
Sir please help me out with this error toDo. map is not a function
there is one problem when we add empty list node server stops
Yeah that because the text filed is required in mongoose schema,
You can check for empty on frontend and return from save todo function if text field is empty.
Sir how this can be done ..can you tell in step wise @@TheBraveCoders
After clicking on the Add button, the task name is not being displayed inside the bar. Also, when I click on the delete icon the task does not get deleted. Would have been helpful if the source code was available :)
The source code is there already u just have give a small amount 😉 to support the dev & his hardwork 😌
thanks
I don't know coding well, but I followed the video. Can you tell me the code for making a checkbox to strike a strikethrough in the code here? (This comment has been translated
)
You can do that using tag for eg: Some text here
Just do this on checkbox ✅ onChange()
Thank you! very useful
best video
hi bro, if i want use localhost insted mongoose, what can i do? can u help me pls.
bro that react icons (edit,delet)not showing but i installed properly
Try changing the color maybe they are of same color as background
nice bro , i love it 🥰🥰❤❤
Thanks 🔥
@@TheBraveCoders welcome bro 😇
@@TheBraveCoders your hard work tells everything bro 🤩😍
Buddy is there login signup option also
No authentication system isn't there
You used POST request for creating, deleting and updating, can you please tell how i can use DELETE request and PATCH request, because i want to make it look proper CRUD app
Just change post to delete or put, everything else should be same
@@TheBraveCoders but brother. we can change the post to delete or put in router. also i changed post req to put req in axios too(update functionality is working well). but how should i change post to delete req in axios?.. it doesn't work. help me
its not working on my side but it showing deleted at the backend but the frontend remain unchanged@@thanosv2170
Why is he doing .then if he is setting his function as async? And why using req.body instead of req.params for id? And of course respectively, post for put and delete methods?
Yeah u r right,
That's an old video things have been improved here: th-cam.com/video/xElA9mGi-I0/w-d-xo.html
thank you
Why did we use cors module?
To allow request from cors origin,
In simple words to allow request from anywhere
The allow backend to communicate with front end request when using the route APIs
bro hello my update and delete button are not working can u help ill upload code on github if u reply pls..
Sure upload on GitHub I'll see
@@TheBraveCoders bro r u deleting my comments? I uploaded github link 2 times.
Maybe since your comment was containing a link it got filtered by TH-cam as spam.
@@TheBraveCoders Hello bro i fixed that problem but when I update todo, page becomes blank and I have to refresh it to get all todo's again. Any solution?
Do event.preventDefault() just email the repo link at thebravecoders@gmail.com
i am facing the errr of todo map is not a function. how should i proceed?
Do this.
todo?.map()
u did not show postman setup and startup
Render has been changed to pay. Any replica service?
20:28
haha
58:16 here when i am cloiking on update button it is not updating and changing the button to add please help
replace with this code for update then everything will be find
const updateToDo = async(toDoId, text, setToDo, setText) =>{
try {
const {data} = await axios.put(`${baseUrl}/update`, {_id: toDoId, text})
console.log(data);
setText("")
//setIsUpdating(false)
getAllToDo(setToDo)
} catch (error) {
console.log(error);
}
}
I had that same problem but after commenting out the setIsUpdating then everything was okay
Netlify is not working. It is flagging all my accounts as fraud. What alternative can I use to deploy my website?
Vercel.com
Update button is not working anyone can help ?
included deployment or not bro?
Yes we deployed it on render.com but its paid service now
@@TheBraveCoders yeah just try another simpler option -- vercel. For backend and frontend altogether less than 5 minutes lmao.
I'm not able to get data from backend . Can anyone help😭😭
I'm facing an error
map.toDo is not a function
Runtime error
Try following this tutorial:
th-cam.com/video/xElA9mGi-I0/w-d-xo.html
@@TheBraveCodersSir is there no way to remove this error?
@@TheBraveCoderssir please help me out
@@anjalidaksha9793 issue is because the variable on which you are mapping doesn't contain anything or may be not interable, first console and check if anything coming in that variable or not and to avoid these error use (?) Ex. record?.map() , use like this
were you able to solve this issue?
your live link is not working?
There's some issue with render.com, you can host on other website.
@@TheBraveCoders okay. so another website?? please mention some name please.
How to create database on mongo db server?
Click on create cluster button.
@@TheBraveCoders i have created cluster but from where that ToDoApp database came in MONGODB_URL???
Just click on connect >> connect to your application >> copy the URL.
Then edit & add ToDoApp manually in the link just before "?"
content quility - bad,
understanding - bad,
not for biggner programer
Waste half of the code this not shown
What not shown?
@@TheBraveCoders put and delete not working you only use post method to update and delete
Nice work bro but the delete is not working but at the backend shows deleted successful but not in the database or react app@@TheBraveCoders
@@akotech79update also not working bro can u help?