Full Stack React Chat App Tutorial (Firebase v9 + ChakraUI + NextJS)

Рет қаралды 17,238

Күн бұрын

Build a chat app from scratch with ReactJS.
Live Demo:
chat.yapsh.com
The code used in this video:
github.com/LogicismX/fullstac...
Firebase Auth Playlist:
• React Authentication C...
Cloud Firestore Playlist:
• How to set up React wi...
Flexbox CSS Guide:
css-tricks.com/snippets/css/a...
Timestamps:
0:00 Introduction
2:10 Environment Setup
4:04 Login Component (UI)
13:24 Sidebar Component (UI)
25:16 Chat Area (UI)
38:17 Authentication
49:20 Sidebar (DB)
1:08:55 Chats (DB)
1:18:19 Sending Chats (DB)

Пікірлер: 67

@dahamkalyana558 2 жыл бұрын

This is the best video so far related to a chat system using next js and firebase v9. This video simply excesses any WhatsApp Clone videos out in KZfaq. Thank You. Keep it up the good work..!

@Tommy-and-Ray 2 жыл бұрын

what a gem! keep it up

@ilikespaghetti2170 2 жыл бұрын

wow this tutorial is the best!!

@evantanjoonjuan3973 2 жыл бұрын

Very Informative, THANK YOU VERY MUCH

@ricorico222 Жыл бұрын

thanks, nice ez tutorial, i built mine with reactjs and tailwind, thanks for tutorial

@abelkibebe577 2 жыл бұрын

Lets gooooo boys, opening Vs

@ravenjs 2 жыл бұрын

oh that was crazy quick @abel xD

@abelkibebe577 2 жыл бұрын

@@ravenjs dude u have no idea how u helped me when u uploaded ur CRUD tutorial.... U r just my "wanna be " guy ... Keep up

@ravenjs 2 жыл бұрын

it's so so so great to hear this 🤣 thank you so much man

@babatundetaiwo5184 5 ай бұрын

Fantastic video. This video helped a really big project I am working on. I appreciate it

@kaelinvoker2007 Жыл бұрын

excelent video

@user-ye2sw6kf7c Жыл бұрын

thanks so much

@Omar_Al_Seddik Жыл бұрын

This channel is a hidden gem! Subbed.

@ravenjs Жыл бұрын

thank you!

@udaykulkarni5639 2 жыл бұрын

Cant thank you enough bro.. You saved my life.. Earned a new subbb !!! Keep uploading.

@ravenjs 2 жыл бұрын

thank you uday :))

@pavanpyla5977 2 жыл бұрын

But ur videos are really awesome bro

@nomanraihan4558 2 жыл бұрын

I am sorry with the number of subscribers and views. Bro please never stop uploading videos. You are the inspiration of learning programming. Please upload more videos. Love to see all of your videos. Please make more videos.

@ravenjs 2 жыл бұрын

Thank you so much :))

@a89529294 2 жыл бұрын

💯💯💯💯💯

@pavanpyla5977 2 жыл бұрын

Build a chat app with react +nodejs+firebase V9+express js plzzzzzzz

@c3t5 Жыл бұрын

Hey, great video! What plugins did you use to get your VS code to auto complete so much? it looks so helpful! Thanks :)

@wisnu-bjoey3724 2 жыл бұрын

man youre incridible imposibble :D

@udaykulkarni5639 2 жыл бұрын

I always fail to understand.. Why do these videos and creators dont get the recognition that they deservee😢😢😢😢

@nsjsksjn Жыл бұрын

Hi Logicism, any tip to add date to the messages? I tried with moment() but still can´t get the proper data. Pd, thanks you a lot your content!.

@trackerprince6773 2 жыл бұрын

Using firebase rtdb would be better choice for chat instead of firestore

@isitMaaz 2 жыл бұрын

so how can I display names instead of emails in sidebar and topbar? also in my other account, all messages are showing on one side...

@zhanezar 2 жыл бұрын

Hi Love athis video its clear , can you talk more about chaining diffrent requests in firebase like searching for items based on multiple search criterias, for example messages sent by "Name" date less than 1 week, or having a group and getting meesges sent by multiple diffrent people?. it seems like you cant add multiple where() functions to firebase.

@ravenjs 2 жыл бұрын

this is a great idea! added to my list :))

@udaykulkarni5639 Жыл бұрын

Hey there ! Getting TypeError: Cannot read properties of undefined (reading 'indexOf') And it points to this line > 24 | let q = collection(db, "chats", id, "messages"); Any idea what could be the issue?

@lioarce 2 жыл бұрын

Im getting this error "TypeError: Cannot read properties of undefined (reading 'includes')", someone know how to solve it?

@SalmanShah95 2 жыл бұрын

Build a chat app with react and firebase 9 please.

@Omar_Al_Seddik Жыл бұрын

But... That's exactly what the video you're commenting on is about...

@indraadha987 2 жыл бұрын

Thanks for this tutorial,but when i deploy to vercel,it shows blank page with no errors,do you know why is that? Locally work fine but when i deploy to vercel and netlify,it goes blank page Hope u help this 🙏

@ravenjs 2 жыл бұрын

you might wanna check your browser developer console for any error outputs. I have a feeling that you're domain name might not be authenticated in your Firebase Console

@aaliyahsymlar5689 2 жыл бұрын

Hi there! I'm wondering if you can show us how to delete messages from a firebase chat app now that we have one created? that's the one feature I still need

@ravenjs 2 жыл бұрын

do you mean deleting it from ReactJS UI or from the Firebase console?

@assad_bin_wadeen Жыл бұрын

thanks bro Its usefull

@Kxffie 2 жыл бұрын

So i uploaded it to vercel and it wont let me login? the google sign in popup just closes itself. it works fine in localhost but not anywhere else

@ravenjs 2 жыл бұрын

Ah this is a very easy fix. Go to your Firebase Console → Authentication → Sign-in method → Authorized Domains, and add your vercel domain name there

@Kxffie 2 жыл бұрын

@@ravenjs thank you!

@indraadha987 2 жыл бұрын

@@Kxffie when i deploy to vercel why it goes blank page?i uploaded to github first then deploy to vercel and the result is blank page,do u know the solution to that?

@Kxffie 2 жыл бұрын

@@indraadha987 not sure I can help you with that

@mohammadmemon 2 жыл бұрын

@@indraadha987 send your git repository

@rochoe4575 2 жыл бұрын

How would you make this responsive to mobile devices?

@ravenjs 2 жыл бұрын

Chakra UI supports responsive breakpoints when using style props: chakra-ui.com/docs/styled-system/responsive-styles

@snowdane3920 2 жыл бұрын

Is anyone having trouble with sx={{ scrollbarWidth: "none" }} it doesn't seem to work for me

@ravenjs 2 жыл бұрын

what browser are you using?

@snowdane3920 2 жыл бұрын

@@ravenjs google chrome

@ravenjs 2 жыл бұрын

@@snowdane3920 I think someone mentioned that scrollbarWidth=none only works on Firefox in the comments

@snowdane3920 2 жыл бұрын

@@ravenjs okay, I will leave it in just in case, but I also tried with plain css still no luck... Maybe it is exclusive to Firefox

@raphaelgomes7722 Жыл бұрын

You can use "sx={{ "&::-webkit-scrollbar": { width: "0px" } }}"

@aaliyahsymlar5689 2 жыл бұрын

Hey there! This app doesn't deploy to vercel.. Getting errors that says this: TypeError: Cannot read properties of undefined (reading 'indexOf') and Error occurred prerendering page "/chat/[id] And advice on how to resolve this would be truly helpful! Thanks

@abhivyaktsharma 2 жыл бұрын

were you able to get rid of Cannot read properties of undefined (reading 'indexOf') ?

@aaliyahsymlar5689 2 жыл бұрын

@@abhivyaktsharma nope, I was not.

@ravenjs 2 жыл бұрын

Weirdly enough, I've redeployed my Chat App to vercel multiple times recently at chat.yapsh.com, and I didn't get any breaking errors... have you tried deploying the code from my github link without modifying the contents?

@TRT_MOOSIC 2 жыл бұрын

As usual... Errors started to pour when Installing chakraUI itself... I am 14 and a self-taught programmer please help.

@muthusivaramakrishnan3578 2 жыл бұрын

Try installing from chakra site itself I did it today everything is working in this video

@isitMaaz 2 жыл бұрын

Info for everyone: scrollbarWidth will only work with Firefox!

@raphaelgomes7722 Жыл бұрын

You can use "sx={{ "&::-webkit-scrollbar": { width: "0px" } }}"

@pavanpyla5977 2 жыл бұрын

Bro i have been following your channnel since last month Try and complete the flow of react+nodjs+expree js + firebase completely By building something. U shifted to nextks again its dissapointing bro plzzzZ

@ravenjs 2 жыл бұрын

Hahaha alright I'll add this to my list 😉 great suggestion :))

@pavanpyla5977 2 жыл бұрын

@@ravenjs ❤

@pavanpyla5977 2 жыл бұрын

@@ravenjs Bro try and do some youtube kind of thing withreact + node js and fire v9 pllzzzz

@marcamooo 2 жыл бұрын

hey Logicism, i am getting a undefined in my console when i attempt the snapshot part at 55:56. Is there an error with my code? import { useCollection } from 'react-firebase-hooks/firestore'; import { collection } from '@firebase/firestore'; import { db } from '../firebaseconfig'; export default function Sidebar() { const [user] = useAuthState(auth); const [snapshot, loading, error] = useCollection(collection(db, "chats")); console.log(snapshot);

@ravenjs 2 жыл бұрын

the snapshot is undefined for the short period of time in the beginning that it needs to initialize and contact the API, you might have to account for that manually in your code

@marcamooo 2 жыл бұрын

@@ravenjs ahh that makes sense! thank you so much for the response!