Full Stack React Chat App Tutorial (Firebase v9 + ChakraUI + NextJS)
Vložit
- čas přidán 27. 07. 2024
- 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) - Věda a technologie
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 CZcams. Thank You. Keep it up the good work..!
Very Informative, THANK YOU VERY MUCH
what a gem! keep it up
Fantastic video. This video helped a really big project I am working on. I appreciate it
wow this tutorial is the best!!
This channel is a hidden gem! Subbed.
thank you!
thanks, nice ez tutorial, i built mine with reactjs and tailwind, thanks for tutorial
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.
Thank you so much :))
Lets gooooo boys, opening Vs
oh that was crazy quick @abel xD
@@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
it's so so so great to hear this 🤣 thank you so much man
excelent video
Build a chat app with react +nodejs+firebase V9+express js plzzzzzzz
Cant thank you enough bro.. You saved my life.. Earned a new subbb !!! Keep uploading.
thank you uday :))
thanks so much
But ur videos are really awesome bro
Hey, great video! What plugins did you use to get your VS code to auto complete so much? it looks so helpful! Thanks :)
I always fail to understand.. Why do these videos and creators dont get the recognition that they deservee😢😢😢😢
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!.
Using firebase rtdb would be better choice for chat instead of firestore
💯💯💯💯💯
man youre incridible imposibble :D
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...
Im getting this error "TypeError: Cannot read properties of undefined (reading 'includes')", someone know how to solve it?
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.
this is a great idea! added to my list :))
Build a chat app with react and firebase 9 please.
But... That's exactly what the video you're commenting on is about...
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
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
@@ravenjs thank you!
@@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?
@@indraadha987 not sure I can help you with that
@@indraadha987 send your git repository
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?
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
do you mean deleting it from ReactJS UI or from the Firebase console?
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 🙏
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
Is anyone having trouble with sx={{ scrollbarWidth: "none" }} it doesn't seem to work for me
what browser are you using?
@@ravenjs google chrome
@@snowdane3920 I think someone mentioned that scrollbarWidth=none only works on Firefox in the comments
@@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
You can use "sx={{ "&::-webkit-scrollbar": { width: "0px" } }}"
How would you make this responsive to mobile devices?
Chakra UI supports responsive breakpoints when using style props:
chakra-ui.com/docs/styled-system/responsive-styles
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
Hahaha alright I'll add this to my list 😉 great suggestion :))
@@ravenjs ❤
@@ravenjs Bro try and do some youtube kind of thing withreact + node js and fire v9 pllzzzz
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
were you able to get rid of Cannot read properties of undefined (reading 'indexOf') ?
@@abhivyaktsharma nope, I was not.
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?
As usual... Errors started to pour when Installing chakraUI itself...
I am 14 and a self-taught programmer please help.
Try installing from chakra site itself I did it today everything is working in this video
Info for everyone: scrollbarWidth will only work with Firefox!
You can use "sx={{ "&::-webkit-scrollbar": { width: "0px" } }}"
thanks bro Its usefull
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);
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
@@ravenjs ahh that makes sense! thank you so much for the response!