Exactly what I was looking for! Thank you for keeping it simple! 🙏 As a beginner, I'd much rather focus on the functionality than spend two hours designing the UI. I wish more content creators would keep the beginner in mind and create tutorials that were focused on simple apps and functionality rather than these elaborate three hour projects that are design heavy. Thanks mate!
Really love this kind of tutorial when you focus more on the logic on the pattern than on the CSS. Like for example as a beginner is more clear when you see the logic with a not so good css than to see the logic with a lot of css that you can copy and paste it because in your mind is like "holy sh*it am not good now at css so after react lets go to css". And you end up back end forth not learning anything. At least all your videos is the logic the pattern that can be available everywhere. so keep pushing and thank you for your effort
Totally agree with this. I get really annoyed at some popular youtubers claiming you can be an employable frontend dev after their 10hr course.. when that 10hrs is just spent typing out prewritten css and no time is spent on stuff like routes, state etc.
the map one is not working sir meaning its doing all the things but its not displaying the message on the screen and the also others message, basically after sending not able to see any messages
I honestly love your way of teaching. You deliver very high quality information in a way that even a 5 year old can understand. Please keep up the good work I enjoy learning from your videos a lot!
I really like creators like you who update their videos when the technology behind them also updates(unlike those who upload a video once and leave us to struggle with the version updates 😕😕)
Pelo que entendi você também fala português. Então muito muito obrigado por esse conteúdo, Pedro! Me ajudou demais! Eu tenho usado bastante o firebase nos meus projetos e seus conteúdos sobre isso me ajudaram demais! Eu não sou fluente em inglês, mas consigo entender perfeitamente você falando. Se não fosse seu canal, provavelmente eu ainda estaria atolado em algum ponto muito atrás de onde estou hoje. Admiração total, cara! Sucesso!!!
This was a really nice follow-up for your course, I feel I needed it. I tried to not simply copy the code and sometimes do stuff myself, there were a couple of points I was stuck because of some ridiculous brackets or naming clashes though. Thanks, Pedro!
Finished the tutorial, this video was so good, it was pretty simple that I was able to follow and apply I've gained here in my personal projects! Keep it up!
You might want to save the user id rather than the username in the message in case that ever changes. You also have access to other fields in the user record in the future. Thanks for the video!
I'm not sure about your data saves . for example I think we must save like : messages/room_name/and messages here . This cold be more logical I guess. edit : he is fetching data from room with where() but I think that might be not a great idea . BUT that's a great tutorial for beginners . Thanks pedro !
and I want to make authentication anonymous, do you have any tuto for this if you have please paste the link here else can you make it? Your tutorials are too good.🎉
Great tutorial, please continue more about firebase, i.e cloud functions, complex queries etc. Maybe it would be good idea to make a small project of online streaming movies with firebase, structuring the layout of collections. Auth users to add some movies into their favorite list of movies and a bunch of interesting stuff can be made with firebase+react. Please don't stop ❤️👍
Thanks pedro bro you are great your previous video of react router really helped i was confused as was reading new docs because no tutorial on new version yours was the first on youtube. Thanks . Can next project be mern project good project covering auth and all necessary stuff please.
when 16:16 and when you are about to log in, sometimes it does not ask you to log in because you are already logged in (I swear this is not a tongue twister). In my case Popup appeared (meaning it work -?) but it did not show the information I was expecting but went first blank ,and then away. This caused me quite a few doubts until I realised that perhaps I was already logged in. Is there a way to check if I am already logged in? (inspect element?)
Which video for learning "cleaning up the useeffect"? I think I saw 4 different videos you had and after watching all 4, I still don't understand it and I didn't see anything about cleaning it with the "return () => unsubscribe". Can you give me the video title for it?
Hello Pedro! First off thanks a lot! Can you help please, when i use "signInWith Popup", after click on the button, the new tab opens and there is an error in console "Cross-Origin-Opener-Policy policy would block the window.closed call". Any ideas how to fix? 😊
Hey, i've noticed that 'universal-cookies''s commands have changed lately, can you please make a new video explaining how to use the new one or how to use a better library if one exists. Thanks in advance!
I noticed you blurred your email from the popup but it didn't blur it when you showed the console log. Just letting you know in case you didn't notice! Great vid.
the map one is not working sir meaning its doing all the things but its not displaying the message on the screen and the also others message, basically after sending not able to see any messages
@@PedroTechnologies I want to know how do developers learn their first technologies? I mean beginner like us take help of tutorials from RUclips. But which process does developer follow. Pl. Tell😁 Take ur example and say how would you learn a totally new Technology. I want to see your process of learning. Please please 🥺.
Thanks for the awesome tutorial but I have a note: There is some kind of issue with the code may be due to which the firebase quota is getting finished very fast after sending a few messages. Is there any way to improve the performance by reducing the number of reads done to the database?
hey, pedro just wanted to know is firebase better than MongoDB ? and why do you use it so much... I am building a project I used MongoDB in it, should I use fireabse for future projects ?
were you able to solve the problem..?..becoz I was facing a similar problem while making an expense tracker app using react and firebase after watching pedro's tutorial
Bro i exactly coded like you but the message renders only after when I click and type something in the input (not immediately rendering the previous messages) and after send the new messages it again load another set of messages (now I have two set one without the new message and below that a new set of messages with that i typed and sent) Pls help me out
Hey another great tutorial, but i have a question, is it safe to put this "firebaseConfig" on the frontend ?... for example the "apiKey and appId" data ? cause anybody can see it , since in the Frontend code ? By the way, thankx fo sharing this awesome tutorial !! 😎👍
great video as always how should we hide the sdk info and still have it on github i looked everywhere for a solution i want to display my project on github and hide the info at the same time i found out i can encrypt the info or not commit any info on github which means i need to host it somewhere else or delete the info and send with cloud functions or make a mini backend that will have the info and send with express routing what would be a best practice solution for this the info needs to be hidden from the sources tab in inspect mode i 'm trying to learn how to make a more secure app do you have any advice for that
What happens when user after signing in refreshes the page, where do you keep the user data like email, because if I am correct auth.currentuser is null, but in this case you only have user refresh token. Did I misunderstand something ?
just for everyone who wants to replicate the code: the library to install is universal-cookie , without the "s" at the end
Thanks bro
@@tarunwajjala5634 thank you so much man
Exactly what I was looking for! Thank you for keeping it simple! 🙏 As a beginner, I'd much rather focus on the functionality than spend two hours designing the UI. I wish more content creators would keep the beginner in mind and create tutorials that were focused on simple apps and functionality rather than these elaborate three hour projects that are design heavy. Thanks mate!
Really love this kind of tutorial when you focus more on the logic on the pattern than on the CSS. Like for example as a beginner is more clear when you see the logic with a not so good css than to see the logic with a lot of css that you can copy and paste it because in your mind is like "holy sh*it am not good now at css so after react lets go to css". And you end up back end forth not learning anything. At least all your videos is the logic the pattern that can be available everywhere. so keep pushing and thank you for your effort
Totally agree with this. I get really annoyed at some popular youtubers claiming you can be an employable frontend dev after their 10hr course.. when that 10hrs is just spent typing out prewritten css and no time is spent on stuff like routes, state etc.
the map one is not working sir meaning its doing all the things but its not displaying the message on the screen and the also others message, basically after sending not able to see any messages
@@heisenberg73215check if map one is returning
A little heads up for UNIVERSAL-COOKIES INSTALL ERROR,
the module's name is universal-cookie not universal-cookies
I just finished your old Chat App video. The timing is awesome, thanks for the tutorials!
I honestly love your way of teaching. You deliver very high quality information in a way that even a 5 year old can understand. Please keep up the good work I enjoy learning from your videos a lot!
I really like creators like you who update their videos when the technology behind them also updates(unlike those who upload a video once and leave us to struggle with the version updates 😕😕)
Pelo que entendi você também fala português. Então muito muito obrigado por esse conteúdo, Pedro!
Me ajudou demais! Eu tenho usado bastante o firebase nos meus projetos e seus conteúdos sobre isso me ajudaram demais!
Eu não sou fluente em inglês, mas consigo entender perfeitamente você falando.
Se não fosse seu canal, provavelmente eu ainda estaria atolado em algum ponto muito atrás de onde estou hoje.
Admiração total, cara! Sucesso!!!
You are one of the few talented person I knew in react. Great work bro. Wish you all success ahead. People have to recognize your work more and more.
This was a really nice follow-up for your course, I feel I needed it. I tried to not simply copy the code and sometimes do stuff myself, there were a couple of points I was stuck because of some ridiculous brackets or naming clashes though. Thanks, Pedro!
Thank you ! This is the best tutorial! It explains everything from scratch and it isn"t rushed. I've been trying to do this for a long time!
successfully completed this project , pushed it to github and hosted using firebase tools :)
thanks pedro
Nice work!
how did you deploy?
i want configure the firebase database in production.. i can't seems to see any video on youtube addressing this
How did you hosted it
Exactly what I was looking for! ❤
A huge fan of your teaching style from India
have built this project ??
@@user-dv5in1co9o Yes
@@user-dv5in1co9o Yes
❤Just a comment to boost the signal of the video✅ Thank you Pedro 👍🤝
I like the way how you explain everything, step by step; it makes everything clear and easy! For sure will follow you!
Finished the tutorial, this video was so good, it was pretty simple that I was able to follow and apply I've gained here in my personal projects! Keep it up!
Great tutorial ! As a react beginner I learned many new concepts. Thank you! ❤
Ted Mosby, I see you are a man of culture =D
Thank you so much for sharing this!
Always!
I appreciate this. And also the fact that you used Ted Mosby.
keep doing these.thanks for focusing on the functionality
You might want to save the user id rather than the username in the message in case that ever changes. You also have access to other fields in the user record in the future. Thanks for the video!
I'm not sure about your data saves . for example I think we must save like : messages/room_name/and messages here . This cold be more logical I guess.
edit : he is fetching data from room with where() but I think that might be not a great idea . BUT that's a great tutorial for beginners . Thanks pedro !
what an amazing tutorial from start to finish, this guy never disappoint and I'm really looking forward for your future videos.🙏
Thank you! I learned a lot from this course. Please make more react project courses!!!
Your channel is heaven to me.
It's very interesting. Short and explaining what's most important🙏
You are the best man! I really appreciated your tutorials.
Love Portuguese accent ❤
Straight to the point video and very clear! Keep doing theses, thanks a lot!
Congratulations for the tutorial! It really does check all the boxes :)
OMG, whole video is what I am trying to do and you made me make it possible. Thanks.🎉(subscribed)
and I want to make authentication anonymous, do you have any tuto for this if you have please paste the link here else can you make it? Your tutorials are too good.🎉
Great tutorial, please continue more about firebase, i.e cloud functions, complex queries etc.
Maybe it would be good idea to make a small project of online streaming movies with firebase, structuring the layout of collections.
Auth users to add some movies into their favorite list of movies and a bunch of interesting stuff can be made with firebase+react.
Please don't stop ❤️👍
thanks a lot, perfect tutorial, more on functionality, loved it, learnt a lot!!
Great video man, loving your work and the way you explaining what you are doing and how you do it
Very Well developed Really helpful for React beginners
Thank you for this guide help me a lot.
Thank You so much!! Completed this project.
Thanks pedro bro you are great your previous video of react router really helped i was confused as was reading new docs because no tutorial on new version yours was the first on youtube. Thanks . Can next project be mern project good project covering auth and all necessary stuff please.
Pedro is THE GUY
just when i started building an app with firebase realtime database. thanks
Thanks Pedro, Reall love your tutorial
when 16:16 and when you are about to log in, sometimes it does not ask you to log in because you are already logged in (I swear this is not a tongue twister).
In my case Popup appeared (meaning it work -?) but it did not show the information I was expecting but went first blank ,and then away.
This caused me quite a few doubts until I realised that perhaps I was already logged in.
Is there a way to check if I am already logged in? (inspect element?)
You have gained yourself a subscriber this is a great tutorial😍
Another great video... I'm a huge fan of your content. Appreciate your hard work
Which video for learning "cleaning up the useeffect"? I think I saw 4 different videos you had and after watching all 4, I still don't understand it and I didn't see anything about cleaning it with the "return () => unsubscribe". Can you give me the video title for it?
Thanks for providing knowledge for free appreciate your hard work thanks
Hi Pedro, I hope you're having a great day.
I appreciate it if you can do a tutorial of analytics.
I wish you the best.
Thanks in advance.
Really enjoyed this! thank you for the content
Thank you man, really helpful video
Hello Pedro! First off thanks a lot! Can you help please, when i use "signInWith Popup", after click on the button, the new tab opens and there is an error in console "Cross-Origin-Opener-Policy policy would block the window.closed call". Any ideas how to fix? 😊
Hey, i've noticed that 'universal-cookies''s commands have changed lately, can you please make a new video explaining how to use the new one or how to use a better library if one exists. Thanks in advance!
I noticed you blurred your email from the popup but it didn't blur it when you showed the console log. Just letting you know in case you didn't notice! Great vid.
Hey Pedro, can you consider making polls on the course you plan to release?
the map one is not working sir meaning its doing all the things but its not displaying the message on the screen and the also others message, basically after sending not able to see any messages
Same issue😢
Did you find any solution?
Did you solve that issue ?
5:35 universal-cookie *
thank you
Thanks!!
Niiiice, very great tutorial. Thank you for your service
small question, why did you use empty tags instead of div to wrap the components at 1:06:40?
u the man bro🔥🔥
Pedro, any plans about Angular?? Please bring some tutorials on Angular Js.
I dont know angular hahahaha
@@PedroTechnologies react js lovers hahahah great
Bruh! Who the fuck uses Angular
@@nidhishsrivastava4868 what's wrong with angular ? A lot of developers uses angular man :)
@@PedroTechnologies I want to know how do developers learn their first technologies? I mean beginner like us take help of tutorials from RUclips. But which process does developer follow. Pl. Tell😁
Take ur example and say how would you learn a totally new Technology. I want to see your process of learning. Please please 🥺.
Hello Pedro, can you tell me about which web hosting should i buy i am looking for the cheapest ones
Is there a work around towards Quotas? Maybe a new video without Firebase? This helped a lot but I ran into the Quota exceeded issue.
when i host my site to gh-pages why the authentication not working
Really , thank you !!
Awesome video thanks 10/10 stars ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
so simple and cool) i like it
Why for input you didn`t used just a form submit?
Thanks for the awesome tutorial but I have a note:
There is some kind of issue with the code may be due to which the firebase quota is getting finished very fast after sending a few messages. Is there any way to improve the performance by reducing the number of reads done to the database?
amazing bro!
Hiw to add a query to get almessages from any room you enter in the input?
hope u also make a tutorial on how to make a video calling react js and firebase app
hey, pedro just wanted to know is firebase better than MongoDB ? and why do you use it so much... I am building a project I used MongoDB in it, should I use fireabse for future projects ?
Is there a way to refresh the chat history on demand, so that the quota does not get exhausted quickly?
You were hiding email every time a pop up appears, but still you showed your email in the console data. 19:17
thanks a bunch, can you please make a video about stripe js
Thank you so much.
universal-cookies doesn't exist on npm. Did he mean universal-cookie?
yes
yes. I was going nuts untill I read the doc
Great tutorial.....
Any one having problem with message that the messages are not appearing on the screen it will send directly
were you able to solve the problem..?..becoz I was facing a similar problem while making an expense tracker app using react and firebase after watching pedro's tutorial
No brother @@prajwalshaw9217
Same thing
Please 😢help me
do you use any type of chryptography on this?
Hi, can this work without having to sign in with Google account? Thanks,
COOL! THANKS!
Thanks alot
Bro i exactly coded like you but the message renders only after when I click and type something in the input (not immediately rendering the previous messages) and after send the new messages it again load another set of messages (now I have two set one without the new message and below that a new set of messages with that i typed and sent)
Pls help me out
Thank you
Common Pedro W
you're hard coding the users name, what if the user changes their name?
will it work without internet connection locally?
You created a chatroom, not a chat app (commonly referred to)
how to deploy this project into the firebase
Hey another great tutorial, but i have a question, is it safe to put this "firebaseConfig" on the frontend ?... for example the "apiKey and appId" data ? cause anybody can see it , since in the Frontend code ? By the way, thankx fo sharing this awesome tutorial !! 😎👍
It isn't safe you can use env variables
great video as always how should we hide the sdk info and still have it on github i looked everywhere for a solution i want to display my project on github and hide the info at the same time i found out i can encrypt the info or not commit any info on github which means i need to host it somewhere else or delete the info and send with cloud functions or make a mini backend that will have the info and send with express routing what would be a best practice solution for this the info needs to be hidden from the sources tab in inspect mode i 'm trying to learn how to make a more secure app do you have any advice for that
you can add a .env file to hide secret information there and use them on your projects
bro I love you
Pls make full realtime chat application with nice ui for portfolio
Un Video de Push notifications please con FCM y Postman
how to deal with overflowing of messages? what if a room has 100+ messages?
Just wrap the messages in a container and set the overflow-y to be auto
at 52:02 can I use map?
What happens when user after signing in refreshes the page, where do you keep the user data like email, because if I am correct auth.currentuser is null, but in this case you only have user refresh token. Did I misunderstand something ?
Can you please 🙏 help my chat is not sending
It's also not showing in the firebase database
Nive. Thank you
Always soon :)))