Build & Deploy a React Todo App with Firebase | React Tutorial For Beginners

[@bryanmedina736]

This is by far the more intuitive tutorial of react I've ever seen, new sub here!

[@indianappguy]

Thanks Bryan

[@vinaysharma642]

Wasted my 4hours of night, then found this...thanks for making🖐🔥

[@indianappguy]

Glad I could help do like and share

[@kamleshrode]

Very simply explained. Thanks for all the hardwork Sanskar. You are giving React Sanskar to folks :D

[@sonaligupta1266]

Thank you so much. I was having a problem understanding firebase basics before I ended up here.

[@rafaXD05]

This is the most easy tutorial on TODO app. 💖 Good work and nice explanation bro. I have made a ToDo app without firebase earlier. Now I have both projects with/without firebase 😎

[@indianappguy]

Glad it helped do share

[@caskyjay9823]

thank you for this. easiest startup anyone can ever get. You just gained a new subscriber

[@sarveshmaurya2168]

small and effective video. Now I know firebase. thanks you....

[@nadeemshareef7508]

You gain a new subscriber... Looking forward to learning more from you.

[@indianappguy]

Welcome aboard!

[@infectedmushroom3488]

Perfect! Exactly what I was looking for, thank you! Looking forward to learning more React from you :)

[@indianappguy]

Great

[@indianappguy]

Any particular thing I should make video on?

[@infectedmushroom3488]

@@indianappguy maybe a calculator using React, projects for beginners that are a bit advanced, thank you for asking for suggestions.

[@oscardbg9654]

Great video, i was geting an error on saving about undefined todo attribute. I solved it creating a handleChange function instead of inline onClick function

[@focus8070]

Great tutorial now have some understanding about firebase database connection thanks

[@indianappguy]

Glad it helped

[@jaggyjut]

This is one of the best reactjs Todo tutorials. Many Thanks.

[@vadapow]

That was one of the most beautifully explained tutorial dude. May the youtube algorithm bless you mate. Subbed❤️

[@fal8202]

Love the simplicity when you explain things. I find that watching you trying things out is very beneficial , still it would be good to prepare your CSS steps beforehand. :-) keep up this good work !

[@indianappguy]

Awesome, thank you!

[@HornOKPlease]

So calm. Amazing experience!

[@indianappguy]

thanks, do share!

[@aaryan3461]

New Sub. Great video man. Please make more react vids

[@Artisticanand]

It will be so helpfull if you start react js full tutorial from scratch 👏

[@indianappguy]

Okay

[@mtmusic6618]

Perfect tutorial Exactly what I was looking for, thank you very much

[@indianappguy]

Glad it helped

[@indianappguy]

do like and share

[@dipakraut6058]

Amazing Buddy🙌...eagerly waiting for the next videos

[@indianappguy]

Thank you so much 😀

[@tejasl.7957]

Amazing man. Keep making this kind of content 🙌🏻👏🏻

[@indianappguy]

Thanks! Will do! do share

[@prasangsinghal7887]

Great tut. But I noticed you pushed the firebase secrets(apikey, etc) which is not a best practice. I know that using cloud functions we can avoid doing this but haven't tried them. It would be good if you can make another tut for that.

[@ashwanisen6272]

Excellent sir

[@indianappguy]

Thanks

[@BECNIKHILKUMAR]

Can anyone help i already work with mongoDB in past but here when I use firebase and create a database step it shows CANNOT ENABLE FIRESTORE TO YOUR PROJECT UNKNOWN ERROR OCCURED thanks in advance

[@indranilhalder6633]

Learnt a lot... awesome content

[@indianappguy]

Glad it was helpful!, Indrani do like and share will mean a lot to me

[@MrJatan90]

Amazing tutorial man, thank you so much!

[@indianappguy]

Glad it helped!, Do like and share

[@olumesemathias6309]

Good morning please I watched your tutorial and liked it but the todolist App stores the todolist info for one user when another user from a different browser uses it,the browser renders the Todolist of the first user to him. The Todo info isn't separate for different users but the same info displayed when another user submits or enters information

[@indianappguy]

been a while but basically you need to add that to the function to get only the documents where user id is equal to yours

[@pranjalchaplot]

One thing that confused me for a long time is that template literals uses backtick, which is on the left of "1" on keyboard, instead of single quotation mark (') @21:09

[@rafaXD05]

congrats bhai hahhaha

[@benpreston4766]

This is a really excellent tutorial. Thanks!

[@indianappguy]

Glad you enjoyed it! do like and share and if you like to support the channel you can www.buymeacoffee.com/sanskartiwari

[@sarveshmaurya2168]

please make a full and short video on material-ui as well, I am much confused in changing default components of material-ui please, please...

[@Toni-nw1dk]

Thank you very much! Perfect Tutorial!

[@indianappguy]

You're welcome! do share

[@MaksymMinenko]

What do you think about writing wrapper functions for firebase functionality?

[@farstep4011]

Stunning! Thank you for sharing this!

[@indianappguy]

You are so welcome! do like and share

[@tushartiwari265]

please give the (youtube) timestamp where we sorted the list based on Todo Timestamp.

[@siriusvatsa]

Beautiful !! , really nice look Can you please make the same APP with flutter :)

[@indianappguy]

I have made a todo web app with flutter alredy please check the channel

[@suchitaghadge3071]

Great content with a Good explanation

[@indianappguy]

Glad you liked it do share

[@prashnought]

i followed up but later the entry order of the todos became erratic (the latest should be on top) but the new entries started apperaing in a random order

[@prashnought]

anybody folllow-up/help?

[@5most769]

Awesome I loved it I sat the whole nyt n coded this n it works But I'm face a small problem The data is not reflecting soon Can u plzzz help me out in that

[@indianappguy]

not reflecting soon? i don't understand the problem please describe a little more

[@pranjalchaplot]

How do I update the my webapp just do the changes and firebase deployed???

[@matthewbrown4572]

When I use setTodoInput(" ") to clear the input, it doesn't work. Any solutions?

[@ПавелИванович-ы7ц]

Hi, great video, thanks!!! but how to add tasks in mobile?

[@indianappguy]

this should work in mobile with click of the next line button

[@AniketSingh-tj5si]

Looking for more react tutorial 👍🏻

[@indianappguy]

Sure coming soon.

[@tilldill]

Love this. How would you make this mobile friendly now? thanks

[@indianappguy]

will not be more than 4-5 lines of code if you can do please do share i will try when i get time

[@premaaswani4228]

Awesome Brother .

[@indianappguy]

Thank you! Cheers!

[@vxsh-8]

Please implement Google authentication functionality in this todo app,so that every user has his own to-do list! , it helps to understand all the things very well!

[@aditgaur1585]

12:00 You could have provided alignItems: "center" to make them not to take the whole space...

[@viveklokhande8976]

i am getting error that local host refusing to connect any solution?

[@usamaakbar4049]

when I refresh the page the all data wipe ..How to fix this?

[@indianappguy]

we can save it in local storage

[@davidalborov8483]

Will u do video about messager notification ? It must need

[@indianappguy]

Okay

[@davidalborov8483]

@@indianappguy good!

[@hemantv1676]

Getting firebase installation problem on windows

[@HxPathak]

Hello ,sir your Flutter chat aap GitHub source codes has lot of error please check & re-upload

[@kalkedanarrso8160]

I was following coding as I was watching your this tutorial and I am facing this issue. ./node_modules/@firebase/firestore/dist/esm5/prebuilt-db9cc925-eb007c37.js Attempted import error: 'FetchXmlHttpFactory' is not exported from '@firebase/webchannel-wrapper' (imported as 'v').

[@MrJatan90]

I am facing same issue. Did you get any solution?

[@user-vx1sy4zv2r]

Bro how to create api and connect flutter

[@hemantv1676]

how did you make text bold

[@indianappguy]

its simple just use font weight property api.flutter.dev/flutter/dart-ui/FontWeight-class.html

[@shaikirfan3112]

Awesome but if I enter bank todo it is accepting how to resolve that issue.

[@sagewizard2929]

[@indianappguy]

thanks for helping i really appreciate it

[@abhaypatil5880]

Everything working fine If I write any todo It just shows in progress not actual todo

[@indianappguy]

you can update that to when creating todo pass done rather than in progress

[@pranjalchaplot]

more flutter video coming soon?

[@indianappguy]

Yes

[@pranjalchaplot]

@@indianappguy you planning on some flutter + reactjs stuff?

[@indianappguy]

@@pranjalchaplot any ideas

[@rafaXD05]

I made some changes in my project. How can I reflect those changes in app ?

[@indianappguy]

npm run build > firebase login (make sure you are logged in with right account) > firebase deploy

[@rafaXD05]

@@indianappguy yeah already done bro. Thanks🔥

[@dipakraut6058]

please next video on how to add a payment gateway in react

[@indianappguy]

will do. Dipak

[@PraisPranav]

React videos are nice.

[@indianappguy]

I am glad you liked them Pranav do share

[@bilelrahmouni01]

thank you

[@indianappguy]

i am glad it helped

[@devangmathur8610]

my text is not getting updated in firebase,can you please help

[@indianappguy]

need to go through the whole code either make a issue in the repo or share the error from debug console

[@socka29]

How to make changes after deploying the site? I tried firebase deploy but it didn't work. Please help

[@indianappguy]

firebase login > login with google in browser > firebase init > choose hosting > firebase deploy

[@laughtale1181]

thanks man

[@indianappguy]

Happy to help, Do like and share

[@jassrajput890]

Awesome

[@indianappguy]

Thanks

[@ayushsanj4346]

Hii, It says useEffect not defined

[@indianappguy]

You need to import it

[@indianappguy]

I usually start writing and it auto suggest

[@ayushsanj4346]

Yeah exactly, I got it earlier.

[@ayushsanj4346]

@@indianappguy Hii It is taking blank values

[@ayushsanj4346]

hello, are u there? It's taking blank values

[@mayuri7843]

It would have been great if you would have included firebase authentication and login form also

[@indianappguy]

i have done other react project like creating insta clone which includes it

[@hrithikgavankar7845]

Enjoywdddddddd!

[@indianappguy]

Do like and share

[@omkarshete2964]

What is the {} syntax for props called? Because you didn't use props.xyz, you just included it in curls. Great tut btw, was looking for such a thing!

[@indianappguy]

yeah i used {} so you can just have a variable defined