For anyone who stuck at 4:30, as I did. Make sure to go to your project->database->rule and change "if false" to "if true". I'm new to firebase and it took me too long to figure out.
Sorry. Still stuck. I went to project > firestore > rules and I don't see any "if false" or "if true": rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.time < timestamp.date(2021, 1, 6); } } }
If anyone has errors saying "firebase is not defined", or "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase') Error" it probably means that you are using Version 9 and that things changed a bit for importing firebase. Now there is a “compatibility” option so can use the /compat folder in your imports. So instead of : > use: >
damn, for real? I was really thinking about it.. I have zero knowledge about React but this app into my portfolio will look like I know React for months
I would not recommend this video in 2023. Too much has changed with firebase that many of these instructions can no longer be followed easily. If you are a beginner, you will spend a lot of time trying to solve these problems. I recommend following a more recent tutorial to save yourself a lot of headache!
Right there with you. I wish this would be updated, or in the very least, that he would update the notes to let people know... it's a big time waste otherwise.
That headache is how you learn though. Tbh complete tutorials push most people into tutorial hell because they don’t actually learn anything. The headache of having to find a solution on your own and experimenting are the best learning experiences.
Agreed - while i appreciate this was 7 mins, it took me way too long replaying parts of this video to get what he was doing. Still a thumbs up, but i would recommend taking 15mins to do this and explain things better.
Fireship, I've been coding now for approx 3/4 years, graduated from CS, and working on my masters, and I just keep coming back to your channel, I love your "no bullshit" approach to tutorials. Just wanted to say thank you, it's so refreshing to have a coding channel that respects its audience.
The speed by which web development makes videos like this almost obsolete is astounding. Two years later and now I'm debugging things midway through and having to understand why certain things don't work
Every other youtuber: "Build a todo list in only 6 hours" Fireship: "Build a real-time app under 7 min with firebase, serverless functions, and react" That's why I love this channel.
actually is not that way, firebase simplifies waaaay much the code writing since it does almost everything for you, if you don't use firebase you have to choose a backend language, stick to some form of writing code such as MVC and then start developing tons of files where with firebase those files are automatically generated, isn't that awesome?
@@miguelangelsepulvedaatenas8446 can you explain to me. Im quite confused. Can you build web applications with just react and firebase? And how would that go vs. MERN stack or other full stacks.
I literally have so much pleasure listening to your voice teaching cool stuff. And the best part is when you tune that music on at the end, wow what a soothing feeling....!
Just realized that setting the playback speed of your video to 0.75x actually gives us the real speed (and also real duration). Besides, it makes the tutorial understandable.
@@frankellyguzman4297 i think it's not working....even his online demo that he hosted..if you login and try to use it everything just disappears.. it'll be a huge help if you can help me out with this
If you run into errors in the firebase import lines: import firebase from 'firebase/app'; import 'firebase/firstore' import 'firebase/auth'; try these instead: import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; have a nice day and good luck!
OMG THANK FOR THIS VIDEO MAAAAAN!!!! Struggled more then one week to get some data from my project on firebase, I watched your video, tried it on my project, boooooom it works!!! 😍😍😍😍 Thank you so much
One hint: I wouldn't save for every message the photoURL. The image should come from the firebase user instance, so all the old messages will always have the actual photo of the user.
I usually watch these tutorials at 1.5x speed. It was a little too fast for me so, I tried slowing it down. Only to see if was at 1x speed the whole time. Lmao. Definition of informative and concise..definitively looking into becoming a pro member.
For anyone stuck at showing the message 4:20, the problem is screen show nothing because messages is undefined. if you add error into : (const [messages, error] = useCollectionData () ) and console log it, it will show FirebaseError: Missing or insufficient permissions. Solution: in Cloud Firestore tab, go to Rule -> Change allow read, write: if false; to true;
lost me at 5:04 useState(' '); undefined as well as photoURL ...must have missed the part where was defined. import React, { useRef, useState } from 'react';
7 minutes, it's more than a hour, but still thank you for making this video, because of you I have another project in my resume. Keep making such videos.
@@Fireship please help me it says Failed to compile ./src/App.js Module not found: Can't resolve 'firebase/app' in 'D:\superchat\superchat\src' This error occurred during the build time and cannot be dismissed.
Great video! However i think the RTDB is more suitable for a chat app because of the pricing.A chat app requires a lot of API calls to read and send messages. RTDB only charges for the amount of storage unlike firestore which charges for API calls(read, write...). We can minimize firestore cost by limiting the amount of message reads using infinite scrolling. But still The RTDB is an easier implementation.
RTDB query doesn't scale well with large data set, but firestore do. RTDB query becomes slower as you data grow but firestore query doesn't depend on dataset but rather the result set of the query you make
I don’t use react but that overriding of the form onSubmit has become one of my favourite things because even if JavaScript is disabled it will still function just with the redirect included, and on the server you can listen on a different route for form posts than what you query in your handler so you can handle them differently in the case the user doesn’t have JavaScript, even redirect them to a page telling them they need to enable JavaScript
I'm just wondering, what area you're working in that you have to care about disabled JS? There were e-books back in days that had browser but no JS, it's been 7 years ago though
For anyone looking to do this now, it's outdated and will need a fair bit of reading through docs, debugging and problem solving. If you thought it was going to be a simple follow along, its not but its still really great practice and would recommend it for practice with reading docs and learning how to understand and abstract old code 👍
@@Fireship Would love to watch a follow-up video on the billing part of this app! 🙏🏻 I cannot understand the terminologies used on their pricing page. Really confusing! And their pricing calculator is worthless for me because I don't know how much I need to turn the sliders for a real-world app. 🤷🏻♂️
If this app had all video listing on the left with discussions groups divided based on that, it would become a great place for developers who visit fireship.
For someone who's never used firebase before, this is FAR from 7min. So many little hurdles. I'll list a few after going through this and standing one up for my self. 1. You'll need a blaze account if you try deploy the code as is from his github as it uses functions. It's a little scary because you will get charged if usage goes up beyond the free tier. 2. You need to manually create the firebase rules. As someone posted below, the default rule denies all access so you have to open it up as he did in the video. Not doing this will result in vague permission denied error in the browser console. Why couldn't google just use standard error response like 403 with url. Good god, fix this. 3. If "firebase deploy" fails with "missing firebase-functions" you need do npm install while inside the functions folder.
this channel is really awesome, it's really unique and presents helpful and enjoyable content that I don't see in other channels, I just wish to see MORE content about React js since it’s my preferred javascript framework/library.
i hope jeff create another channel where he can live stream / record the entire process of making verities of apps ..just like this!!! may be one day??
Hi Jeff, I wish you solved the bill problem and it didn't affect your recording productivity, we really appreciate what you are doing here, you taught us a lot
@@TheOPtmal the polling part isn't trivial in my experience, since firebase doesn't do pagination or cursor based querying. you have to manually add an incrementing message id field to each message and then query that. this also really complicates handling updates to the ui based on updates in database state. if you happen to know any better way of doing this do let me know
We tried xss, dos, bypassing the "cuss net", using alternative characters, etc. and the crazy thing is, Jeff stuffed ALL of us after spending only 7 minutes to build it including security measures. Jeff will be outsmarting us all 500 years from now, still! haha
Anyone having troubles with import firebase, change the following lines import firebase from "firebase/app"; import "firebase/firestore"; import "firebase/auth"; to import firebase from "firebase/compat/app"; import "firebase/compat/firestore"; import "firebase/compat/auth";
Thanks for this video I was looking to make a chat app and you showed me how valuable a tool that fire base is. Definitely looking to learn more about it.
I did a similar project and it has the same problem. You know when we use useAuthState and render component by whether user is logged in or not. If the user logged in, every time page refreshes we see the login screen in a flicker then the app runs (because user is null at first). How can I fix that?
*If messages aren't showing,* make sure you check the *rules* on the Firestore database, you can see the denied attempts in there to see if it's the issue! (it's shown later in the video if needed, but don't be discouraged if it isn't reading the messages!
AT 2:24 IF YOU CANT FIND YOUR CONFIG CREDENTIALS FINISH SETTING UP APP THEN GO TO PROJECT SETTINGS PAGE. THEN YOU LOOK FOR THE PROJECT YOUR CREATED, PRESS THE CONFIG TAB AND THEN COPY AND PASTE YOUR CONFIG CREDENTIALS INTO THE REACT APP!!
i would love to watch this video with more explanation even 1 hour vid i would rewatch couple of times petition for fireship to make explanation video about this not actual copy past 7 min vid like if you agree
Stuck at 6:10. It throws this error everytime I try to send a message: Unhandled Rejection (FirebaseError): Function addDoc() called with invalid data. Unsupported field value: undefined (found in field photoUrl in document messages/CKhzoT9421AOGgg42N9H) Edit: I fixed it by changing photoUrl to photoURL
I think this is all very nice. I feel as if I did my own project and just run it off my own server it will have a much better effect. I would rather write something more crude and from the ground up since it will be easier to maintain since oneself wrote it. It will take a lot of time, but that's all what we developers are here for... Not some AI that will take other SDKs and do something that will only have very little limited functionality and brake easy like wine glass.
good idea. I think you should invent your own programming language, although it probably would be better to create a new web protocol, actuallg that could probably work well on a custom operating system
> "I built a chat app in 7 minutes" > video has 8:52 minutes > video has more cuts than a michael bay movie > copy and paste a huge chunk of styling > has most of the firebase stuff already set up > didn't actually write most of the code, just used copy/paste with cuts or something You built this in 7 minutes the same way I clean my room everyday.
Wow I am blown away by how you bring across the concept fast, simple/understandable and showing screens. Totally with you for the 8 mins plus! I am building a React App in my youtube channel when I come across your video! Amazing! Thumbs up and Subscribe from me!
me: runs npm install
- takes 7 minutes to install.
1 hour to max 2. I just save one entire day to install packages and dependencies.
LOOOOL
haha that was hiliarious
lol
😂😂😂
For anyone who stuck at 4:30, as I did. Make sure to go to your project->database->rule and change "if false" to "if true". I'm new to firebase and it took me too long to figure out.
This helped me! Thank you :)
Huge Help. Everything was going great aside from that issue.
im stucked at the banned list
how to unban someone?
Sorry. Still stuck. I went to project > firestore > rules and I don't see any "if false" or "if true":
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if
request.time < timestamp.date(2021, 1, 6);
}
}
}
If anyone has errors saying "firebase is not defined", or "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase') Error" it probably means that you are using Version 9 and that things changed a bit for importing firebase. Now there is a “compatibility” option so can use the /compat folder in your imports.
So instead of :
>
use:
>
It should be pinned!
Lifesaver!
import 'firebase/compat/analytics';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
you are totally right, but I recommend to learn the new syntaxis from firebase version 9, in this video Fireship is using version 7
THANK YOU
The most intense 8 minutes of my life so far
same here😂
It's Easy if you make your mind up it's easy
Haha agreed!
Jaja thought the same
right?! it reminds me of when I had to crunch my 30 minute thesis presentation into 15 minutes 😅
assert("I built a chat app in 7 minutes with React & Firebase" != "I explained a chat app in 7 minutes with React & Firebase")
When u run firebase login it gives errors saying CLI failed what might be the problem?
makes no sense
true
Sir, plz e-commerce app in 10 hours complete advanced professional tutorials
you can assert("Did not watch the whole video").. 😄
it's unfair, your code magically gets pasted. Meanwhile my react app is still being created.
Rishabh Anand 😂
Its might be a bug try turning youtself off and then on again
Lol, same here
@@jorgesaxon3781 IT crowd😂
it's not cheating he is pausing recording and coping code then resumes recording and then he pastes it. Kinda cheating.
* adds react to resume *
* annd firebase *
It do be like that
damn, for real? I was really thinking about it.. I have zero knowledge about React but this app into my portfolio will look like I know React for months
@@alexradu1921 React is easy to pickup on the way, dont worry. Modern web programming is easy
@@nebulium6641 thank.. can I generate static websites to put them on github pages with React?
I would not recommend this video in 2023. Too much has changed with firebase that many of these instructions can no longer be followed easily. If you are a beginner, you will spend a lot of time trying to solve these problems. I recommend following a more recent tutorial to save yourself a lot of headache!
Right there with you. I wish this would be updated, or in the very least, that he would update the notes to let people know... it's a big time waste otherwise.
That headache is how you learn though. Tbh complete tutorials push most people into tutorial hell because they don’t actually learn anything. The headache of having to find a solution on your own and experimenting are the best learning experiences.
That's hell true.. stuck for 72+ hours in this 7 minutes video. 😂
do you have any recent tutorials?
Forget this tutorial exists in 2024😢
Thank you! I became a full stack react developer after watching this video! No questions whatsoever!
"in 7 minutes" That's impressive and demoralizing at the same time. I would take ages to create something like this
Absolutely correct
Well he has years of experience, done this project previously and also he was just cutting the typing part
He recorded this in 7min, but the building process took much longer. Don't get demoralized.
Cheer up mate! Anybody can copy/paste boilerplate working code with a million dependencies built for a specific edge-case.
It'll probably take you at least 1-2 hrs if you try and closely follow him in this video.
i usually have to speed up tutorials, this is the only channel I have to slow it down xd
Agreed - while i appreciate this was 7 mins, it took me way too long replaying parts of this video to get what he was doing. Still a thumbs up, but i would recommend taking 15mins to do this and explain things better.
me too
ok we get it you're a self proclaimed intellectual
@@Stallzyx k
@@rickybobbyracing9106 Yeah, I watch this channel at x0.75 playback speed. This dude speaks at x1.5 playback speed by default. He's a speedrunner. xD
Spending 7 minutes to make a chat while I spent 3 months debugging the one a previous employee did 😅
I feel u bruh!😂
@espoir inconscient Not a week dude. Its will only take 3-4 hours
And the guy that comes after you would spend 1 year debugging your own 🤣
😝😝 related to me
Nothing beats short tutorial videos. Directly to the important part.
Fireship, I've been coding now for approx 3/4 years, graduated from CS, and working on my masters, and I just keep coming back to your channel, I love your "no bullshit" approach to tutorials. Just wanted to say thank you, it's so refreshing to have a coding channel that respects its audience.
Yea
You started coding in uni? How's that working out for you, employment-wise?
I was with you up until "CSS is way harder than React and Firebase."
He’s not wrong lol
He was kidding
i do think css takes more time to me than react itself
still struggling with justify and align stuff
totally agree with him
The speed by which web development makes videos like this almost obsolete is astounding. Two years later and now I'm debugging things midway through and having to understand why certain things don't work
same im not having fun lmao useCollectionDataa doesnt wana play nice with me
Every other youtuber: "Build a todo list in only 6 hours"
Fireship: "Build a real-time app under 7 min with firebase, serverless functions, and react"
That's why I love this channel.
I literally started making an app in React+Firebase yesterday and he uploaded this video. Insane!!🔥🔥
I am a react beginner, wanna learn backend, and watching this just overwhelmed me - reminding me of how much I gotta learn. Tutorial hell to go!
actually is not that way, firebase simplifies waaaay much the code writing since it does almost everything for you, if you don't use firebase you have to choose a backend language, stick to some form of writing code such as MVC and then start developing tons of files where with firebase those files are automatically generated, isn't that awesome?
@@miguelangelsepulvedaatenas8446 can you explain to me. Im quite confused. Can you build web applications with just react and firebase? And how would that go vs. MERN stack or other full stacks.
a couple of months ago i wouldn't have understood any of this, im proud to say I actually understand it now!
It would be cool to see you build that same app with different frameworks. It would be much more interesting comparison that a simple todo list.
I literally have so much pleasure listening to your voice teaching cool stuff. And the best part is when you tune that music on at the end, wow what a soothing feeling....!
wow yeah i didnt realise that music til u pointed
This is pure gold. Make time 0.5x, open tab with source code and then we too are golden.
Just realized that setting the playback speed of your video to 0.75x actually gives us the real speed (and also real duration). Besides, it makes the tutorial understandable.
This is one of the best channels out there. No BS, just straight to the point!
Cant wait to build this 7 minute app in 2 hours!
Love the explanation, this is why you are the biggest coding channel IMO. much love from dominican republic
Hey can you help me out pls..
Is it working for you?
@@silverlock373 yes it is, what do you need to know?
@@frankellyguzman4297 i think it's not working....even his online demo that he hosted..if you login and try to use it everything just disappears.. it'll be a huge help if you can help me out with this
@@silverlock373 what exactly do you need help with
God, the way you explained all these in a short time is amazing.
If you run into errors in the firebase import lines:
import firebase from 'firebase/app';
import 'firebase/firstore'
import 'firebase/auth';
try these instead:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
have a nice day and good luck!
Thanks a lot man
@@ruffy9937 you're welcome :)
@@sagyblecher9258
OMG THANK FOR THIS VIDEO MAAAAAN!!!!
Struggled more then one week to get some data from my project on firebase, I watched your video, tried it on my project, boooooom it works!!!
😍😍😍😍
Thank you so much
One hint: I wouldn't save for every message the photoURL. The image should come from the firebase user instance, so all the old messages will always have the actual photo of the user.
I usually watch these tutorials at 1.5x speed.
It was a little too fast for me so, I tried slowing it down. Only to see if was at 1x speed the whole time.
Lmao. Definition of informative and concise..definitively looking into becoming a pro member.
react is easier than CSS? That's what I needed to hear to get started with react.
It’s really is!
Can't imagine fully working live chat app in 7 minutes 😲. Great job 👏.
Its easy.
Step one: copy
Step two:paste
For anyone stuck at showing the message 4:20, the problem is screen show nothing because messages is undefined.
if you add error into : (const [messages, error] = useCollectionData () ) and console log it, it will show FirebaseError: Missing or insufficient permissions.
Solution: in Cloud Firestore tab, go to Rule
-> Change allow read, write: if false; to true;
Thank you so much!
Thanks man
lost me at 5:04 useState(' '); undefined as well as photoURL
...must have missed the part where was defined.
import React, { useRef, useState } from 'react';
Next Video: "Our App got over 400k users, now in talks with angel investors, and a possible Google acquisition offer on the table. "
7 minutes, it's more than a hour, but still thank you for making this video, because of you I have another project in my resume. Keep making such videos.
LOL. I dislike videos like this. One of the Ten Commandments is to not lie.
It needs word-break: break-word; on message class though for long words
Good call
@@Fireship please help me
it says
Failed to compile
./src/App.js
Module not found: Can't resolve 'firebase/app' in 'D:\superchat\superchat\src'
This error occurred during the build time and cannot be dismissed.
@@quickflicks_007 after getting the code from github you just need to do npm install so that can install all the misssing package
Love these short format tutorials, straight to the point, not to mention the blog post helps too, Thanks keep up the good work!!!
Great video! However i think the RTDB is more suitable for a chat app because of the pricing.A chat app requires a lot of API calls to read and send messages. RTDB only charges for the amount of storage unlike firestore which charges for API calls(read, write...). We can minimize firestore cost by limiting the amount of message reads using infinite scrolling. But still The RTDB is an easier implementation.
RTDB query doesn't scale well with large data set, but firestore do.
RTDB query becomes slower as you data grow but firestore query doesn't depend on dataset but rather the result set of the query you make
stuck around 4:22, firebase settings are not coming as shown, can somebody help with firebase?
I don’t use react but that overriding of the form onSubmit has become one of my favourite things because even if JavaScript is disabled it will still function just with the redirect included, and on the server you can listen on a different route for form posts than what you query in your handler so you can handle them differently in the case the user doesn’t have JavaScript, even redirect them to a page telling them they need to enable JavaScript
I'm just wondering, what area you're working in that you have to care about disabled JS? There were e-books back in days that had browser but no JS, it's been 7 years ago though
Really cool :D Now the real question is: how long are you going to leave the app running? :)
we broke it already
I'll let the reads get to a few million or so
@@Fireship epic
@@Fireship later on redirect the url to rick roll like a true internet troll
Fireship aren’t you afraid of people using it for bad stuff?
The production quality of your tutorials keeps getting better and better! So impressed!
For anyone looking to do this now, it's outdated and will need a fair bit of reading through docs, debugging and problem solving. If you thought it was going to be a simple follow along, its not but its still really great practice and would recommend it for practice with reading docs and learning how to understand and abstract old code 👍
Did you implement it?
If you managed to get it working could you share your repo please
"CSS is too hard" that's very true 😂
these were the longest 7 minutes of my life!
6:11 - AMEN! This is the reason backend developers 'hate' CSS.
true that. I used to like CSS and i was pretty good at it, but when i focused more on backend, i just hated styling.
4:20 I dont get my text returned.. I just get a white screen.. Could anyone help?
Tip: if you want to implement the bad words ban, you need to enable the billing for the project.
Hey Jeff, why do you never stop to amaze us?🔥❤️
The firebase bill be like 💸💸💸 😂😂
400,000 reads already, might cost upwards of $1.00
@@Fireship Aren't Blaze plans pricing is like 5 cents per 100k reads?
@@Fireship but doesn't it have loads of writes?
@@Electricity0 not really, reads are a bigger concern for this type of app
@@Fireship Would love to watch a follow-up video on the billing part of this app! 🙏🏻 I cannot understand the terminologies used on their pricing page. Really confusing! And their pricing calculator is worthless for me because I don't know how much I need to turn the sliders for a real-world app. 🤷🏻♂️
If this app had all video listing on the left with discussions groups divided based on that, it would become a great place for developers who visit fireship.
For someone who's never used firebase before, this is FAR from 7min. So many little hurdles.
I'll list a few after going through this and standing one up for my self.
1. You'll need a blaze account if you try deploy the code as is from his github as it uses functions. It's a little scary because you will get charged if usage goes up beyond the free tier.
2. You need to manually create the firebase rules. As someone posted below, the default rule denies all access so you have to open it up as he did in the video. Not doing this will result in vague permission denied error in the browser console. Why couldn't google just use standard error response like 403 with url. Good god, fix this.
3. If "firebase deploy" fails with "missing firebase-functions" you need do npm install while inside the functions folder.
can you tell what functions need to be removed for this app to run on spark plan itself? I am trying not to pay for stuff :/
sounds terrible when you say it like that
What I learned from this is my averse attitude towards CSS is completely justified. That crap is some of the hardest stuff in software dev.
this channel is really awesome, it's really unique and presents helpful and enjoyable content that I don't see in other channels, I just wish to see MORE content about React js since it’s my preferred javascript framework/library.
I was just thinking of making a messaging app with React and Firebase yesterday and here it is, thanks!
"And the reality is that CSS is way harder than react or firebase" ~ fireship
True thattttttttt 😂😂😂
@Fireship sorry but i cant get the msg in 4:28 like in your examples , it's not working with me can you help please
I really wanted to learn Firebase & cloud functions! Jeff made that possible. Make a video that use nodejs and firebase-backend project!
amazing learning experience it took me 2+ hrs to understand :)
Change speed to 2x,build the app in 3.5 min.
Work smart!
Download the video and edit it to make it 4x faster. Now it is 1.75 minutes. which is 105 seconds. Sorry if I hurt, you by beating you.
6:48 - How can we get the dummy div to scroll in to view on initial render? I tried putting that line of code into a useEffect but no luck.
I figured it out. Add 'messages' to the dependency array of useEffect and then it'll scroll to the bottom on initial render.
@@KennyCarter90 Thank you for posting this. I just spent hours trying to figure this out until I searched these comments.
what can this man not do??
speak chinese. i think
create a blackhole
@@beinyourguard next video "React in 100 seconds (Chinese Version)"
ive never subbed so quick...right to the point. amazing
i hope jeff create another channel where he can live stream / record the entire process of making verities of apps ..just like this!!!
may be one day??
omfg. best video all my life. more videos build Applications in x minutes please
I usually 2x speed most coding tutorials. I had to 0.25x speed this one. Great work though.
Firebase v9 has different syntax. Request to make another video
Could make a full-course for this, just for intermediate react developers? You are so fast.
Yes, my courses are much more comprehensive. Expect a full react course later this year.
Hi Jeff, I wish you solved the bill problem and it didn't affect your recording productivity, we really appreciate what you are doing here, you taught us a lot
seeing an npm install that lasts less than 1 second is so satisfying
My exact thoughts !
🤣🤣🤣
You are doing a great job!
Its a pleasure to watch any of your videos.
Keep up the good work :)
This is really cool; how would you go about adding infinite scrolling to see older messages with Firebase?
You would add a div before all the messages and add an event listener to when it scrolls into view. Then you would poll firebase for earlier messages
@@TheOPtmal the polling part isn't trivial in my experience, since firebase doesn't do pagination or cursor based querying. you have to manually add an incrementing message id field to each message and then query that. this also really complicates handling updates to the ui based on updates in database state.
if you happen to know any better way of doing this do let me know
He has a short video on pagination too. It's easier now.
Lama Dev has an amazing tutorial with the latest firebase version
The new Firebase version makes this tutorial out of date. Would be nice to update it using the new version.
We tried xss, dos, bypassing the "cuss net", using alternative characters, etc. and the crazy thing is, Jeff stuffed ALL of us after spending only 7 minutes to build it including security measures. Jeff will be outsmarting us all 500 years from now, still! haha
lol, and i still cant setup firebase in my project omggggggg!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thanks for making this, really cool! By the way, I am "B". Really impressed with the quick fix time to the timestamp issue!
Anyone having troubles with import firebase, change the following lines
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
to
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
Thank you, thank you!
Thanks a lot; i was having issue with it; would you care to explain why?
@@oluwasogoenochawofeso1061 the video is from version 7 of firebase, now it's on v.9 the method of import is different now
Thanks for this video I was looking to make a chat app and you showed me how valuable a tool that fire base is. Definitely looking to learn more about it.
Took me 10 min, just to create the react app.
you leave little problems to solve too!! awesome way of teaching too ...noticed it in now 2 videos
I did a similar project and it has the same problem. You know when we use useAuthState and render component by whether user is logged in or not. If the user logged in, every time page refreshes we see the login screen in a flicker then the app runs (because user is null at first). How can I fix that?
loading... (yes loading screen)
I love your style with the emojis
*If messages aren't showing,* make sure you check the *rules* on the Firestore database, you can see the denied attempts in there to see if it's the issue! (it's shown later in the video if needed, but don't be discouraged if it isn't reading the messages!
You saved my life
i like your short videos, except the part where they take 1-2 hours to fully understand and implement xD
Title is suppose to be: "What coding would look like without debugging or version control"
Or testing..
=== coding in heaven
SMOKE SHOW JEFF OVER HERE ALWAYS POPPING OFF LEGENDARY LEVEL SURPRISE BLOCK PARTIES.
Fireship uploaded a video === stop everything you're doing
True
@@krunalshelki lol, just noticed :/
damn straight!!!!
@CDR Systems if(fireship.uploads.newUpload){
me.CurrentTasks = null;
me.watch.youtube(fireship.uploads.newUpload.url());
}
i tried that in the console and it throws an error
AT 2:24 IF YOU CANT FIND YOUR CONFIG CREDENTIALS FINISH SETTING UP APP THEN GO TO PROJECT SETTINGS PAGE. THEN YOU LOOK FOR THE PROJECT YOUR CREATED, PRESS THE CONFIG TAB AND THEN COPY AND PASTE YOUR CONFIG CREDENTIALS INTO THE REACT APP!!
i would love to watch this video with more explanation even 1 hour vid i would rewatch couple of times
petition for fireship to make explanation video about this not actual copy past 7 min vid
like if you agree
Stuck at 6:10.
It throws this error everytime I try to send a message: Unhandled Rejection (FirebaseError): Function addDoc() called with invalid data. Unsupported field value: undefined (found in field photoUrl in document messages/CKhzoT9421AOGgg42N9H)
Edit: I fixed it by changing photoUrl to photoURL
I think this is all very nice. I feel as if I did my own project and just run it off my own server it will have a much better effect. I would rather write something more crude and from the ground up since it will be easier to maintain since oneself wrote it. It will take a lot of time, but that's all what we developers are here for... Not some AI that will take other SDKs and do something that will only have very little limited functionality and brake easy like wine glass.
sheesh
good idea. I think you should invent your own programming language, although it probably would be better to create a new web protocol, actuallg that could probably work well on a custom operating system
at 3:42, it filters the first 25 messages in the database how can i make it filters the last 25 messages instead ?!
Chatgpt
In real life create react app itself will take 7 minutes 😭😭😭..
As someone who is still learning, this is extremely cool !
> "I built a chat app in 7 minutes"
> video has 8:52 minutes
> video has more cuts than a michael bay movie
> copy and paste a huge chunk of styling
> has most of the firebase stuff already set up
> didn't actually write most of the code, just used copy/paste with cuts or something
You built this in 7 minutes the same way I clean my room everyday.
Wow I am blown away by how you bring across the concept fast, simple/understandable and showing screens.
Totally with you for the 8 mins plus!
I am building a React App in my youtube channel when I come across your video!
Amazing! Thumbs up and Subscribe from me!