React & Firebase Chat App Tutorial

Build a fully functional and scalable chat or messaging app with a beautiful UI using React and Firebase!

Timestamps:
0:00 Introduction
1:12 Setting up our workspace
3:15 Linking our firebase
6:01 User authentication
15:45 Showing messages
22:09 Sending messages
29:30 Adding CSS
34:09 Outro

[Techthology]

*ATTENTION*: If you are having an error that the messages are not showing up, even after changing the firebase permissions, make sure to add a 'createdAt' field in firebase next to the 'text' field, and set the value of that field to timestamp. This should fix the error, and if you have any questions, feel free to comment down below!

[atulpatil]

Thank you so much brother, completed the project today, Keep helping and motivating. Big love from INDIA.

[elias.helfand]

Awesome tutorial, thx for helping me, u deserve more views and subs, keep up the good content!

[AshrafulIslam-orbu]

You won not just the subs but heart as well brother

[spifet]

Very good tutorial! The first thing I want to say is that Nastya Boiko is right, showing the code in full screen or at least in a big font is useful, especially for those of us that copy while watching to learn. Second, regarding the photo URL in the Firebase user field that is missing in the video: messages collection should have each message to contain text, photo URL, uid as strings (you can make the first one empty) and createdAt to be a timestamp (just select the date of today for the first message). Then login into your app and send another message and it will work. You can always delete the first message if created a second one.

[jaypatel]

superb tutorial and repo is working properly it helps me

[munteanudan]

Awesome content brother. Waiting for continue with delete and edit functionality, it will be great!

[minhluudinh]

Dude, at 21:30 you clicked outside and then your data in firebase magically has the "createdAt" field. WTF?

[NarrowedPath]

Literally killed your like button!
Thanks man.

[annsusan]

I have copy pasted everything from the github except the keys, still my react page is blank. Why is it so? What should I do?

[sydneyroseenglish]

after 'npm install' and 'npm start, ' why isn't it working properly?

[gautamkanzariya]

please close the browser window when recording video.We can not read all contents of editor if two windows are opened side by side.only keep one video opened at a time.

[AntOn_BrandOn_RufUs]

That's awesome! Thanks a lot)) Waiting for new videos, cheers!)

[abhishekvayam]

if you are getting any error in import firebase use this

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

[blazi_]

11:50 yep, i spent 2 hours to find whats cousing that bug, omg it took you 20 seconds to write that /auth but for me 2hours !

[anonymoussaif]

Why onsnapshot function is not working 😔😔😔😔

[NewAgeWallStreet]

Is there a way to make an app like this for a bubble website? Thank you

[GameVerse]

i have a error
Can't resolve 'firebase' in 'D:\Reacr firebase chat app\firechat\src'

[VinayKrishnamurthy-xgix]

Hi nice video.
You have displayed the google accounts image how can I get the email id of the account user I want to display that also witht the image tag?

[nilanjanchanda]

why the createdAt is not showing in my case
did same