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: >
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); } } }
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.
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.
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.
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....!
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
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.
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.
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
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.
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 👍
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.
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.
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
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 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;
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
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.
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.
Hi there, you might run into errors when following this tutorial in 2024 no fault of Fireship. To correct it, simply add compat to your import file path and it should look like this import firebase from "firebase/compat/app"; import "firebase/compat/firestore"; import "firebase/compat/auth"; import "firebase/compat/analytics";
@@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
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
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.
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";
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??
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.
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
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';
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!
This is a really nice tutorial, but I don't really like when people just copy and paste stuff and say that they built an app in 10 minutes or something. Personally, I like longer videos where they type and explain as they go along so I don't have to play and pause a lot. I'm not a very experienced programmer, so it is really difficult to see what is going on, and what to type, especially when there is a lot of cutting. Again, this video is really good, but I would like it more if you could slow it down a little bit and explain stuff for programmers that don't have much experience like me. I really love watching your tutorials, but I would rather have a long video that explains stuff than a short video that doesn't really explain stuff. Also, I just wanted to say, I'm not writing this to offend you or anything, I just want to give you some feedback in my opinion. It's totally fine if anyone disagrees with me. Thanks!
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
@@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. 🤷🏻♂️
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
@@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
Hi jeff thanks for the awesome tutorials. Can you make a video debunking common firebase myths. I am having a hard time deciding going full firebase because of the many criticisms I read online regarding firebase not being scalable and the risk of google shutting it down can also be a possibility. Thanks!
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
😂😂😂
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
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);
}
}
}
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").. 😄
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😢
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?
Thank you! I became a full stack react developer after watching this video! No questions whatsoever!
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.
I literally started making an app in React+Firebase yesterday and he uploaded this video. Insane!!🔥🔥
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
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
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
"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.
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
This is one of the best channels out there. No BS, just straight to the point!
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 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!
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.
God, the way you explained all these in a short time is amazing.
* 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?
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.
Love these short format tutorials, straight to the point, not to mention the blog post helps too, Thanks keep up the good work!!!
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 👍
Did you implement it?
If you managed to get it working could you share your repo please
Can't imagine fully working live chat app in 7 minutes 😲. Great job 👏.
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.
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
these were the longest 7 minutes of my life!
react is easier than CSS? That's what I needed to hear to get started with react.
It’s really is!
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.
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
Cant wait to build this 7 minute app in 2 hours!
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.
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
Its easy.
Step one: copy
Step two:paste
The production quality of your tutorials keeps getting better and better! So impressed!
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.
Tip: if you want to implement the bad words ban, you need to enable the billing for the project.
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
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
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
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.
Hi there, you might run into errors when following this tutorial in 2024 no fault of Fireship. To correct it, simply add compat to your import file path and it should look like this
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import "firebase/compat/analytics";
Thank you!
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
Firebase v9 has different syntax. Request to make another video
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.
I really wanted to learn Firebase & cloud functions! Jeff made that possible. Make a video that use nodejs and firebase-backend project!
Hey Jeff, why do you never stop to amaze us?🔥❤️
I was just thinking of making a messaging app with React and Firebase yesterday and here it is, thanks!
Next Video: "Our App got over 400k users, now in talks with angel investors, and a possible Google acquisition offer on the table. "
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.
I love your style with the emojis
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?
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
"CSS is too hard" that's very true 😂
amazing learning experience it took me 2+ hrs to understand :)
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.
you leave little problems to solve too!! awesome way of teaching too ...noticed it in now 2 videos
I usually 2x speed most coding tutorials. I had to 0.25x speed this one. Great work though.
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.
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
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
I building this app for my class! They will be very happy.
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??
this is such a well done and concise video.
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
i like your short videos, except the part where they take 1-2 hours to fully understand and implement xD
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
You are doing a great job!
Its a pleasure to watch any of your videos.
Keep up the good work :)
"And the reality is that CSS is way harder than react or firebase" ~ fireship
True thattttttttt 😂😂😂
I'm glad that you said 'css is hard'
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
omfg. best video all my life. more videos build Applications in x minutes please
seeing an npm install that lasts less than 1 second is so satisfying
My exact thoughts !
🤣🤣🤣
The best premium-quality content I've ever seen. Thanks a lot.
So we buying likes and comments now?
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';
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!
Title is suppose to be: "What coding would look like without debugging or version control"
Or testing..
=== coding in heaven
This is a really nice tutorial, but I don't really like when people just copy and paste stuff and say that they built an app in 10 minutes or something. Personally, I like longer videos where they type and explain as they go along so I don't have to play and pause a lot. I'm not a very experienced programmer, so it is really difficult to see what is going on, and what to type, especially when there is a lot of cutting. Again, this video is really good, but I would like it more if you could slow it down a little bit and explain stuff for programmers that don't have much experience like me. I really love watching your tutorials, but I would rather have a long video that explains stuff than a short video that doesn't really explain stuff. Also, I just wanted to say, I'm not writing this to offend you or anything, I just want to give you some feedback in my opinion. It's totally fine if anyone disagrees with me. Thanks!
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
The first time I watched this video I was like "CSS is way harder than React and Firebase?!". But the gut was speaking from experience. Now I know.
This is how non-coders think all coders code.
As someone who is still learning, this is extremely cool !
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. 🤷🏻♂️
Woo 😘 so cool u got more ,keep it coming. Love your work . Can't wait for the next
In real life create react app itself will take 7 minutes 😭😭😭..
SMOKE SHOW JEFF OVER HERE ALWAYS POPPING OFF LEGENDARY LEVEL SURPRISE BLOCK PARTIES.
Took me 10 min, just to create the react app.
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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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.
It took me 7 DAYS to create a fullstack chat app using Python and Javascript!
Hi jeff thanks for the awesome tutorials. Can you make a video debunking common firebase myths. I am having a hard time deciding going full firebase because of the many criticisms I read online regarding firebase not being scalable and the risk of google shutting it down can also be a possibility. Thanks!