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.
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(); });
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 😄
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)
if I add this rule - false to writing code it means that I also can't push a data in a database? or I didn't understand something, becaus in my case after adding this rule, I can't push anything else in a database. timecode 30:55
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, I am having error, after 26:56. In the console, I have this error "Cross-Origin Request Blocked" and it arises as soon as I import two firebase imports. Has anyone else encountered this issue?
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?
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){}
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 ???
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?
at 1:12:17 idk it throws error at me that snapshot is not defined, but it suggested me to change the function name to snaphshot and it worked. I have absolutely no idea!
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?
Wow Hoda, enjoyed and understood this course thorougly! It answered a lot of my concerns -without even asking it to. Thank you. You're a unique peson, keep it up. Thank you freecodecamp for publishing his work. And to Scrimba, for being so friendly and gentle in approach.
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!!!!!
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 :)
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
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 :)
I built this on Scrimba! I use it at least twice a week for my shopping list!
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.
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!
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 :)
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.
Indians attendance
Racist, everyone is welcomed
🇮🇳
Present sir
Present bro 🇮🇳
Are Sri Lankans welcome? 🥺 🇮🇳♥️🇱🇰
Man I love you, 1st time I see a fun and hq tutorial on this channel
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
You have just made it so easy!!!! You have saved my confidence!
Thank you so much, Meng!!!
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!
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.
possibly the best and most thorough tutorial. Thank you so much!
Thank you soooo much!!! your course is amazing!!! Thank you so much for your time and energy to create the video!
Amazing teaching skills. This is a talent that every teacher should have. 🔥🔥🔥🔥🔥
Thank you so much, Arthur! Really grateful 🙏
For 31:52, the lists are writing to the database, but doesn't display on my preview list on the li?
thanks, it wasn't boring i enjoyed it.
I liked this video really helped my firebase project, thank you for sharing this video.
absolutely loved and enjoyed this project
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.
you provide your subject in a wonderful way.
Thank you so much!!
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 :)
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!
@Rafid Hoda Your teaching is so GOOD...
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.
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 :)
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.
Thank you for this tutorial specially for segments where I had to code something myself. This tutorial really learned me a lot 🔥
Best Platform.Great course. Great Tutor
Thank you so much Gaurav!
Amazinly well explained. Bravo!! and thanks a lot!!
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 :)
Great course. So clear and easy to follow. Thanks!!
Now I can add firebase in my resume
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 😄
Really love to complete this😍😍
I'm from Brazil, thanks for the translation
been waiting for this for long
Yay! Hope you'll enjoy it :)
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)
just got here, this guy is an amazing tutor
Wow! Thank you so much, Lucas! Really appreciate it :)
19:21 , How can I get that link? I am new to firebase, I am getting errors in console saying cannot use import statement outside a module
nvm, I figured it out, for those who are concerned, you have to add type="module" in the script tag of index.js in html file.
@@NapoleanBonaparte-bv2hz
at 23:00 and adding the items to the firebase just a put a smile on my face, i can't believe im doing this by myself. Thank you so much @rafidhoda
if I add this rule - false to writing code it means that I also can't push a data in a database? or I didn't understand something, becaus in my case after adding this rule, I can't push anything else in a database. timecode 30:55
same with me too
Thank you for all of these courses. It helps me a lot encourage me.
Awesome! That's great to hear :)
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!
This is that unreally 🤩🤩🤩 Thanks you from your work
You're welcome :) Hope you'll like it :)
Rafid on fire 🔥💪💜
Shubh!!!! Thank you so much for the support :)
Thank you! This is exactly what I need
Awesome to hear that! THanks :)
Go for this course , the teaching and knowledge provided is awesome 🔥🔥🔥🔥
Hi, I am having error, after 26:56. In the console, I have this error "Cross-Origin Request Blocked" and it arises as soon as I import two firebase imports. Has anyone else encountered this issue?
Update, I found a solution for this, th-cam.com/video/nx8E5BF0XuE/w-d-xo.html
@@curiouscartographer3111 Great to hear that you found a solution :)
35:25 i am not getting the bullet points in the new dynamic list and they are connecting to each other
just improved my code logic and how to structure code thanks
Great to hear!
Rashid is amazing, thanks for this video!
Thank you Satyam for this lovely comment :)
This is the most cutest thing ever 😭
Thaaaank youuuu :)
4:40 😂 I think of it already
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?
so nice! thank you!❤
I am 17 and think it is super easy and i can build the same in 10mins
Отличная связка, спасибо за подробности.
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
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 :)
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){}
Great effort ❤
Thanks for the awesome project. Salam🙋saya dari Indonesia
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 ???
When I add to the homescreen the site doesnt look like an app. I still can see the search bar above the app like in a regular browser.
Really helpful tutorial!
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?
Thanks you so much for this awsome video
Glad you liked it :)
@@rafidhoda ❤️
If the same database is used wont the shopping list items be same for all users?
I would like to know if what kind of editor he'd used ?
at 1:12:17 idk it throws error at me that snapshot is not defined, but it suggested me to change the function name to snaphshot and it worked. I have absolutely no idea!
Awesome! thank you very much:)
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.
started building it!
Awesome!
question, when it become like an app my iphone didnt show the keyboard how to fix it ? but i works fine when in safari
Amazing video, thank you enjoyed a lot.
Thank you so much, Faizan! Super glad to hear you enjoyed it :)
Great video😇
Beautiful 🥰. Well explained 💯💯
Thank you so much :)
I am getting this error: Uncaught SyntaxError: Invalid shorthand property initializer. index.js:5
A simple insight: For the font to apply to all elements including text input areas you can include it
in the universal selector *
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?
Everyone: The video was so helpful
indians: let's see who is from india
😂😂😂
🇮🇳🇮🇳🇮🇳🇮🇳🇮🇳
Absolutely loved it. Many many thanks Rafid🙏.
So awesome to hear Debak! Thank you so much for the comment :)
That chat gpt part took me out damn!!!😂😂
My button does not work. How do I make it work? @ time 22:01
Did you get it to work?
Does not work. Access to script has been blocked by CORS.
What is the software that you used to code in??? Is it visual studio code? Or?
Wow Hoda, enjoyed and understood this course thorougly! It answered a lot of my concerns -without even asking it to. Thank you. You're a unique peson, keep it up. Thank you freecodecamp for publishing his work. And to Scrimba, for being so friendly and gentle in approach.
Great tutorial.
Awesome, thanks
During your course I'll never get bored😅
Wow, really? THanks!
hey i'm not able to find the cdn for getdatabase
me too or for'd initializeApp,ols have u found it