I built a chat app in 7 minutes with React & Firebase
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2020
- Build a secure feature-complete chat app with React & Firebase in 7 minutes. Try it out 👉 fireship-demos.web.app/
Source Code: github.com/fireship-io/react-...
ReactFire Game Lobby by Jarrett Helton: fireship.io/lessons/game-lobb...
#react #js #firebase
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font - วิทยาศาสตร์และเทคโนโลยี
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 😅
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.
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").. 😄
* 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?
Nothing beats short tutorial videos. Directly to the important part.
Its easy.
Step one: copy
Step two:paste
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.
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
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....!
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
This is one of the best channels out there. No BS, just straight to the point!
Love these short format tutorials, straight to the point, not to mention the blog post helps too, Thanks keep up the good work!!!
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.
Thank you! I became a full stack react developer after watching this video! No questions whatsoever!
I literally started making an app in React+Firebase yesterday and he uploaded this video. Insane!!🔥🔥
"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.
a couple of months ago i wouldn't have understood any of this, im proud to say I actually understand it now!
The production quality of your tutorials keeps getting better and better! So impressed!
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
God, the way you explained all these in a short time is amazing.
Can't imagine fully working live chat app in 7 minutes 😲. Great job 👏.
This is pure gold. Make time 0.5x, open tab with source code and then we too are golden.
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?
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
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
You are doing a great job!
Its a pleasure to watch any of your videos.
Keep up the good work :)
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.
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 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.
I was just thinking of making a messaging app with React and Firebase yesterday and here it is, thanks!
What a straight-up outstanding video...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.
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.
The best premium-quality content I've ever seen. Thanks a lot.
ive never subbed so quick...right to the point. amazing
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 really wanted to learn Firebase & cloud functions! Jeff made that possible. Make a video that use nodejs and firebase-backend project!
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
amazing learning experience it took me 2+ hrs to understand :)
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.
@@aadarshpandit1773 after getting the code from github you just need to do npm install so that can install all the misssing package
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
As someone who is still learning, this is extremely cool !
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.
Hey Jeff, why do you never stop to amaze us?🔥❤️
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
this is such a well done and concise video.
Woo 😘 so cool u got more ,keep it coming. Love your work . Can't wait for the next
"CSS is too hard" that's very true 😂
react is easier than CSS? That's what I needed to hear to get started with react.
It’s really is!
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
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.
Next Video: "Our App got over 400k users, now in talks with angel investors, and a possible Google acquisition offer on the table. "
Tip: if you want to implement the bad words ban, you need to enable the billing for the project.
Cant wait to build this 7 minute app in 2 hours!
these were the longest 7 minutes of my life!
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
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!
Thanks! I was just looking fo something like this.
Thanks for this awesome tutorial!
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?
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!
you leave little problems to solve too!! awesome way of teaching too ...noticed it in now 2 videos
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.
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.
omfg. best video all my life. more videos build Applications in x minutes please
Thank you so much for sharing this, I was in the middle of making a chat app
I usually 2x speed most coding tutorials. I had to 0.25x speed this one. Great work though.
"And the reality is that CSS is way harder than react or firebase" ~ fireship
True thattttttttt 😂😂😂
Really loved this video this is way more productive than a udemy course. Make more such videos with angular also ..
I love your style with the emojis
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.
The new Firebase version makes this tutorial out of date. Would be nice to update it using the new version.
Very nice! Would like to see more of these cool and small project videos - but with Vue3 instead.
YOOOOOOOO THIS IS EXACTLY WHAT I WANTED THANKS SO MUCH
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??
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
U r a legend...a life saviour.. ❤️🔥 Thank u
I building this app for my class! They will be very happy.
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. 🤷🏻♂️
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 like your short videos, except the part where they take 1-2 hours to fully understand and implement xD
Thanks for making this, really cool! By the way, I am "B". Really impressed with the quick fix time to the timestamp issue!
In real life create react app itself will take 7 minutes 😭😭😭..
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)
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.
Really helpful, thanks! Can you speak to when you opt for direct database calls within a component vs adding on a Node & Express layer for an API?
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
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.
This was awesome!!!!!!!!!! So helpful
yooooo at last this is what i have been looking for
Took me 10 min, just to create the react app.
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
This was great. Thanks!
I have been seeing a lot more React content on your channel as of late. Does this mean you recommend React over something like Vue or Angular? Also great video.
what can this man not do??
speak chinese. i think
create a blackhole
@@beinyourguard next video "React in 100 seconds (Chinese Version)"