Really liked this tutorial. This was one of the best tutorial which I have ever seen. Instead of just copying somebody's code, this time I felt that I used my knowledge to write the code and whenever I got stuck your code helped me to rectify my mistakes. I wish every instructor starts teaching like this, it makes students think about the code rather than blindy copy pasting it.
I've built many todo/list app so far in my progression. This is one great version. Super simple yet does the trick perfectly. Love the teaching style and the asides as the course progresses. Quality scrimba content, not just a "follow me and build this" it's more a "let me guide you through building this." experience. Now addicted to firebase........
Thank you so much Mark for those amazingly kind words! So nice to hear that you noticed all that :) Exactly what I love to hear 🤩 You’ll be happy to hear I’m working on a much bigger Firebasr course that will cover all the other cool stuff Firebase had to offer!
At 35:00, use "null" instead of empty string. Because the empty string should hold a value and every time you click the add button it will keep entering that value in the database. Setting it null wont add anything to the database.
Thanks for this app tutorial! I have to learn firebase for a work project. I decided to make a similar app to this video for my girlfriend's birthday, who is studying abroad for a semester. Super awesome, and I'm sure she will love it.
really appreciated your job hopefully if you can make the same app with exactly the same functionality without adding or removing anything but now using react or next Js so that you can teach the all old school and the new school at the same time it will be amazing to compare between them, especially by using use-State user-effect and other stuff which can handle the same options inside this beautiful tutorial.
I added two small additions. You can add items with a 'keypress' event on enter event.key === "Enter" and you can not enter an empty string. inputValue !== '' two simple conditionals that can be added for a bit more functionality
Or you can use a form for the input, and listen for a submit event (when you press enter In a form it submits automatically, so you don't need to listen to the enter key)
Hey Rafid, I have to say that you perfect skills to engage and inspire your audience. Love the way you have talked us through the course. Could i please ask what source code editor have you used. It might be obvious for experienced programmers but I’m new to coding world and absolutely love to learn more . Many thanks and please do some more of your courses. Best wishes
He is using scrimba, is not a code editor, but more like a code teaching enviroment, if i may call it that way, the link is bellow the video, you may try scrimba or set your own enviroment in your computer
Thank you so so much for your kind words :) I really appreciate it! As the other person already commented, I'm using the Scrimba coding platform. You should definitely check it out!
Hi! Thank you for this tutorial. It is awesome. Especially for those new to firebase. I ended up with the same result as yours. Everything works ) Now I want to add a feature that allows each user to have their own list. Can you give me some idea or link how I can do it?
There is a problem if you don't write anything and simply press add to cart, it still gets pushed to the database with an empty string,so to avoid this you can write like this, addButtonEl.addEventListener("click", function () { let inputValue = inputFieldEl.value; if (inputValue === "") { return; } push(shoppingListInDB, inputValue); clearInputFieldEl(); });
not sure you covered but you can enter empty strings into the db, defensive programming for this would be to add an if statement in the add to cart button event listener. ie if(inputValue){}
This is very helpful and enjoying video. I learned many new tips and tricks to solve many javascript and css problem with ease.Aur last me to maja hi aa gya 😄
Can I follow this tutorial to build an app for college system that has attendece, and uploading college work and stuff like this ? Like registering for a course ,knowing grades of each subjects , having notifications for important post from the admin / doctors ???
Umm my apologies but could I ask where I can download the Scrimba because like you said, sir Rafid, there's a link in the description but once clicked it goes to the website. I want Scrimba so bad because I'm creating an app to track sports equipment being borrowed and there are more features in it. It is for my final year project this semester. Would you or anyone here pls help me? A huge thanks to you sir Rafid, I really loved your enthusiasm and presentation of the tutorial.
Great tutorial, thank you! What I don't completely understand: can you mix server and client-side script in the same js file? (reading the DOM and calling the database)
Hey I cannot write to the database after I change my security rules to false for write operation. It gives a warning. And doesn't updates the data base. Any one can help?
hmmm, guess this video is okay. Not sure if this is like an advertisement to use Firebase, but definitely this video does not cover everything you have to do. So far, after completing the first 31 minutes, I needed to install node.js (not mentioned in the video), the gstatic link they provided does not work (had to find out on my own how to access database from my JS file), now after changing the rules to 'read' true, 'write': false the app is no longer working.
Good work! I uploaded my app on netlify it works on desktop but on my android phone it was saying fake site ahead and was blocking it from shown. what should I do?
Really liked this tutorial. This was one of the best tutorial which I have ever seen. Instead of just copying somebody's code, this time I felt that I used my knowledge to write the code and whenever I got stuck your code helped me to rectify my mistakes. I wish every instructor starts teaching like this, it makes students think about the code rather than blindy copy pasting it.
I've built many todo/list app so far in my progression. This is one great version. Super simple yet does the trick perfectly. Love the teaching style and the asides as the course progresses. Quality scrimba content, not just a "follow me and build this" it's more a "let me guide you through building this." experience.
Now addicted to firebase........
Thank you so much Mark for those amazingly kind words!
So nice to hear that you noticed all that :) Exactly what I love to hear 🤩
You’ll be happy to hear I’m working on a much bigger Firebasr course that will cover all the other cool stuff Firebase had to offer!
At 35:00, use "null" instead of empty string. Because the empty string should hold a value and every time you click the add button it will keep entering that value in the database. Setting it null wont add anything to the database.
That's a great catch! Thank you so much for commenting :)
thanks a lot I was trying tp figure it out ...finally I got it!!!!!
Just completed this project. Loved it ♥
Loved your way of teaching.
Thanks for teaching this technology with such positive vibe.
Thank you so so so so so much ❤❤❤❤❤
🙌🙌🙌🙌🙌
Thank you for following my tutorial! Really appreciate it :)
Thank you for this, I was stressing all of last night trying to find a good firebase tutorial, and this was the BEST thing I could have asked for.
So happy to hear that :) Hope you have fun!
I did, thanks for your contribution!@@rafidhoda
I built this on Scrimba! I use it at least twice a week for my shopping list!
took me about a week to finish this course. thank you for your dedication and amazing teaching skills!!!
Finally its here,I was waiting for so long time like front-end dev with firebase..❤
Yes! I really hope you enjoy it Tushar :)
Recap towards the end was the icing on the cake. Thanks so much!
You're welcome :) Glad you enjoyed it!
Great course. Not for JavaScript beginners, but for Firebase instead. Excellent job!
Happy to hear that :) Thank you so much!
This was so helpful. I learned so many new things. Completed this fully and I'm very very happy to be able to open this in my phone and desktop.
Thanks for this app tutorial! I have to learn firebase for a work project. I decided to make a similar app to this video for my girlfriend's birthday, who is studying abroad for a semester. Super awesome, and I'm sure she will love it.
Man I love you, 1st time I see a fun and hq tutorial on this channel
possibly the best and most thorough tutorial. Thank you so much!
Great tutorial. Learned so much even as a more advanced programmer. Thank you for this amazing tutorial!
After many videos and times wasted, getting it done with you was reliving. Very informative. Thank you for this video.
Happy to hear that! Thank you so much for the kind words :) Really appreciate it!
thanks, it wasn't boring i enjoyed it.
The best tutorial and teacher i've ever watch.. kudos to you sir. all the best and more tutorial from you.
Thank you so much for the wonderful comment, Daryl! Really glad to hear you enjoyed it : ) I'm working on more content
I need more tutorials like this. I'm so glad that this is my first project and I didn't go on and copy pasted someone's code.
I swear I was just about to work on this!! Thank you so much!! :D
I will be back here to thank you once I launch my PWA
That's great to hear :) THank you so much for the comment :)
Amazing teaching skills. This is a talent that every teacher should have. 🔥🔥🔥🔥🔥
Thank you so much, Arthur! Really grateful 🙏
You have just made it so easy!!!! You have saved my confidence!
Thank you so much, Meng!!!
really appreciated your job hopefully if you can make the same app with exactly the same functionality without adding or removing anything but now using react or next Js so that you can teach the all old school and the new school at the same time it will be amazing to compare between them, especially by using use-State user-effect and other stuff which can handle the same options inside this beautiful tutorial.
Thank you so much :) If you want to challenge yourself then a great exercise would be for you to make the exact same app but using React.
Indians attendance
Racist, everyone is welcomed
🇮🇳
Present sir
Present bro 🇮🇳
Are Sri Lankans welcome? 🥺 🇮🇳♥️🇱🇰
I added two small additions. You can add items with a 'keypress' event on enter
event.key === "Enter"
and you can not enter an empty string.
inputValue !== ''
two simple conditionals that can be added for a bit more functionality
Or you can use a form for the input, and listen for a submit event (when you press enter In a form it submits automatically, so you don't need to listen to the enter key)
Thank you soooo much!!! your course is amazing!!! Thank you so much for your time and energy to create the video!
Hey Rafid, I have to say that you perfect skills to engage and inspire your audience. Love the way you have talked us through the course. Could i please ask what source code editor have you used. It might be obvious for experienced programmers but I’m new to coding world and absolutely love to learn more . Many thanks and please do some more of your courses. Best wishes
He is using scrimba, is not a code editor, but more like a code teaching enviroment, if i may call it that way, the link is bellow the video, you may try scrimba or set your own enviroment in your computer
Thank you so so much for your kind words :) I really appreciate it!
As the other person already commented, I'm using the Scrimba coding platform.
You should definitely check it out!
Thank you for this tutorial specially for segments where I had to code something myself. This tutorial really learned me a lot 🔥
you provide your subject in a wonderful way.
Thank you so much!!
Hi! Thank you for this tutorial. It is awesome. Especially for those new to firebase. I ended up with the same result as yours. Everything works ) Now I want to add a feature that allows each user to have their own list. Can you give me some idea or link how I can do it?
absolutely loved and enjoyed this project
I liked this video really helped my firebase project, thank you for sharing this video.
Also born 91, left India for Canada though.
Excellent tutorial broski!! Thank you for sharing
🙌 Thank you! I spent 2 years in Canada in my early 20s studying math at Waterloo :) Wonderful country!
Great course. So clear and easy to follow. Thanks!!
just improved my code logic and how to structure code thanks
Great to hear!
@Rafid Hoda Your teaching is so GOOD...
Wow so nice
I was recently asked if I knew firebase and the answer was not really
But u jhus encouraged me to go learn it and make my own apps
Thanks for the comment! Hope you’ll enjoy the course :)
started building it!
Awesome!
There is a problem if you don't write anything and simply press add to cart, it still gets pushed to the database with an empty string,so to avoid this you can write like this,
addButtonEl.addEventListener("click", function () {
let inputValue = inputFieldEl.value;
if (inputValue === "") {
return;
}
push(shoppingListInDB, inputValue);
clearInputFieldEl();
});
Yes, you're absolutely right! Thank you so much for sharing :)
not sure you covered but you can enter empty strings into the db, defensive programming for this would be to add an if statement in the add to cart button event listener. ie if(inputValue){}
One thing to point out are the image files, trying to find the same one with the size is difficult, a github w src would be lovely
Excellent point. I’ll see what I can do. Thanks for the comment :)
Jaha dekho, waha Tiranga. Awright! Pumped up! Jeg elsker Norge! And ofcs Mera Bharat ❤
Thank you so much for the comment Soumadip. Tusen takk!
@@rafidhoda Welcome Dada.
Really love to complete this😍😍
Thanks for the awesome project. I learned a lot from this video. Now I am feeling much more confident that I will make project with firebase.
Excellent material! Excellent way to teach! You rock!
I have a question: why did you use a realtime database instead of a firestore database?
Thank you so much! Really appreciate the kind words :)
@@manuelaraujo81 Because it's easier for beginners :)
Thank you for all of these courses. It helps me a lot encourage me.
Awesome! That's great to hear :)
This is very helpful and enjoying video. I learned many new tips and tricks to solve many javascript and css problem with ease.Aur last me to maja hi aa gya 😄
Amazinly well explained. Bravo!! and thanks a lot!!
you explain very cool
Best Platform.Great course. Great Tutor
Thank you so much Gaurav!
Отличная связка, спасибо за подробности.
Thank you very much sir
Thanks for the awesome project. Salam🙋saya dari Indonesia
Go for this course , the teaching and knowledge provided is awesome 🔥🔥🔥🔥
just got here, this guy is an amazing tutor
Wow! Thank you so much, Lucas! Really appreciate it :)
amazing thank you very much
you're welcome :) glad you liked it
I'm from Brazil, thanks for the translation
An Issue at 19:08, CORS? You don't state how to get around the CORS issue at that point, or reference back to where you did.
Thank you! This is exactly what I need
Awesome to hear that! THanks :)
A simple insight: For the font to apply to all elements including text input areas you can include it
in the universal selector *
Thanks you so much for this awsome video
Glad you liked it :)
@@rafidhoda ❤️
Good Work
Thank you!
Can I follow this tutorial to build an app for college system that has attendece, and uploading college work and stuff like this ? Like registering for a course ,knowing grades of each subjects , having notifications for important post from the admin / doctors ???
so nice! thank you!❤
Thank you!
Awesome, thanks
I am 17 and think it is super easy and i can build the same in 10mins
This is great! One thing: where can we find the bestreads program?
Thank you! Haha bestreads is something you're going to have to build yourself :)
If the same database is used wont the shopping list items be same for all users?
This is that unreally 🤩🤩🤩 Thanks you from your work
You're welcome :) Hope you'll like it :)
its awesome
Umm my apologies but could I ask where I can download the Scrimba because like you said, sir Rafid, there's a link in the description but once clicked it goes to the website. I want Scrimba so bad because I'm creating an app to track sports equipment being borrowed and there are more features in it. It is for my final year project this semester. Would you or anyone here pls help me? A huge thanks to you sir Rafid, I really loved your enthusiasm and presentation of the tutorial.
Great tutorial, thank you! What I don't completely understand: can you mix server and client-side script in the same js file? (reading the DOM and calling the database)
Rashid is amazing, thanks for this video!
Thank you Satyam for this lovely comment :)
Hey I cannot write to the database after I change my security rules to false for write operation. It gives a warning. And doesn't updates the data base. Any one can help?
Great tutorial.
hmmm, guess this video is okay. Not sure if this is like an advertisement to use Firebase, but definitely this video does not cover everything you have to do. So far, after completing the first 31 minutes, I needed to install node.js (not mentioned in the video), the gstatic link they provided does not work (had to find out on my own how to access database from my JS file), now after changing the rules to 'read' true, 'write': false the app is no longer working.
Rafid on fire 🔥💪💜
Shubh!!!! Thank you so much for the support :)
Awesome! thank you very much:)
Great video😇
What is the software that you used to code in??? Is it visual studio code? Or?
Good work! I uploaded my app on netlify it works on desktop but on my android phone it was saying fake site ahead and was blocking it from shown. what should I do?
Amazing video, thank you enjoyed a lot.
Thank you so much, Faizan! Super glad to hear you enjoyed it :)
Thank you Rafid
thanks! thanks! thanks! thanks! thanks!
"you're welcome"x5
Really helpful tutorial!
Great effort ❤
been waiting for this for long
Yay! Hope you'll enjoy it :)
This is the most cutest thing ever 😭
Thaaaank youuuu :)
Thank...i would like to Know if it is possible to put it at play store
Unfortunately no :(
I would like to know if what kind of editor he'd used ?
2:55 I already have a shopping list app. It's made up of a sheet of paper plus a pencil. I built it within 30 seconds and it is super mobile!
😂😂
😂😂
Hahahaaha! Can't argue with that :)
you missed it, it works even after battery is dead
thank you !!!
Thank you very much!!! ❤
question, when it become like an app my iphone didnt show the keyboard how to fix it ? but i works fine when in safari
Thanx!!! Beautyful
Thank you 🙏
Why deploy to Netlify? Firebase comes with hosting
For 31:52, the lists are writing to the database, but doesn't display on my preview list on the li?
Absolutely loved it. Many many thanks Rafid🙏.
So awesome to hear Debak! Thank you so much for the comment :)
During your course I'll never get bored😅
Wow, really? THanks!