I built a chat app in 7 minutes with React & Firebase 

me: runs npm install - takes 7 minutes to install.

assert("I built a chat app in 7 minutes with React & Firebase" != "I explained a chat app in 7 minutes with React & Firebase")

The most intense 8 minutes of my life so far

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.

it's unfair, your code magically gets pasted. Meanwhile my react app is still being created.

Spending 7 minutes to make a chat while I spent 3 months debugging the one a previous employee did 😅

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.

* adds react to resume *

Nothing beats short tutorial videos. Directly to the important part.

i usually have to speed up tutorials, this is the only channel I have to slow it down xd

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 was with you up until "CSS is way harder than React and Firebase."

"in 7 minutes" That's impressive and demoralizing at the same time. I would take ages to create something like this

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 literally started making an app in React+Firebase yesterday and he uploaded this video. Insane!!🔥🔥

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.

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!!!

a couple of months ago i wouldn't have understood any of this, im proud to say I actually understand it now!

Thank you! I became a full stack react developer after watching this video! No questions whatsoever!

Can't imagine fully working live chat app in 7 minutes 😲. Great job 👏.

God, the way you explained all these in a short time is amazing.

The production quality of your tutorials keeps getting better and better! So impressed!

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.

This is pure gold. Make time 0.5x, open tab with source code and then we too are golden.

I was just thinking of making a messaging app with React and Firebase yesterday and here it is, thanks!

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

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.

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

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.

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

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!

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!

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

What a straight-up outstanding video...Thank you so much

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.

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.

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.

ive never subbed so quick...right to the point. 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!

I really wanted to learn Firebase & cloud functions! Jeff made that possible. Make a video that use nodejs and firebase-backend project!

As someone who is still learning, this is extremely cool !

Woo 😘 so cool u got more ,keep it coming. Love your work . Can't wait for the next

react is easier than CSS? That's what I needed to hear to get started with react.

Hey Jeff, why do you never stop to amaze us?🔥❤️

amazing learning experience it took me 2+ hrs to understand :)

Thank you so much for sharing this, I was in the middle of making a chat app

It needs word-break: break-word; on message class though for long words

Next Video: "Our App got over 400k users, now in talks with angel investors, and a possible Google acquisition offer on the table. "

Really loved this video this is way more productive than a udemy course. Make more such videos with angular also ..

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;

Tip: if you want to implement the bad words ban, you need to enable the billing for the project.

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!

Thanks! I was just looking fo something like this.

Love the explanation, this is why you are the biggest coding channel IMO. much love from dominican republic

6:11 - AMEN! This is the reason backend developers 'hate' CSS.

Cant wait to build this 7 minute app in 2 hours!

YOOOOOOOO THIS IS EXACTLY WHAT I WANTED THANKS SO MUCH

"CSS is too hard" that's very true 😂

Change speed to 2x,build the app in 3.5 min. Work smart!

Thanks for making this, really cool! By the way, I am "B". Really impressed with the quick fix time to the timestamp issue!

this is such a well done and concise video.

Really cool :D Now the real question is: how long are you going to leave the app running? :)

The new Firebase version makes this tutorial out of date. Would be nice to update it using the new version.

omfg. best video all my life. more videos build Applications in x minutes please

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.

"And the reality is that CSS is way harder than react or firebase" ~ fireship True thattttttttt 😂😂😂

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!

Very nice! Would like to see more of these cool and small project videos - but with Vue3 instead.

these were the longest 7 minutes of my life!

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??

Fireship uploaded a video === stop everything you're doing

Thanks for this awesome tutorial!

you leave little problems to solve too!! awesome way of teaching too ...noticed it in now 2 videos

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 usually 2x speed most coding tutorials. I had to 0.25x speed this one. Great work though.

yooooo at last this is what i have been looking for

I love your style with the emojis

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";

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';

I building this app for my class! They will be very happy.

i like your short videos, except the part where they take 1-2 hours to fully understand and implement xD

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.

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?

Only 7 mintes? That's amazing. I really gotta try this

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 👍

In real life create react app itself will take 7 minutes 😭😭😭..

The firebase bill be like 💸💸💸 😂😂

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.

Could make a full-course for this, just for intermediate react developers? You are so fast.

Took me 10 min, just to create the react app.

Love this, any more React x Firebase content would be very welcome

Awesome video as usual. I miss that 80's style ending, btw :(

seeing an npm install that lasts less than 1 second is so satisfying