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

Поделиться
HTML-код
  • Опубликовано: 28 дек 2024

Комментарии • 65

  • @abelkibebe577
    @abelkibebe577 2 года назад +5

    Lets gooooo boys, opening Vs

    • @ravenjs
      @ravenjs  2 года назад +3

      oh that was crazy quick @abel xD

    • @abelkibebe577
      @abelkibebe577 2 года назад +4

      @@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
      @ravenjs  2 года назад +5

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

  • @assad_bin_wadeen
    @assad_bin_wadeen Год назад +1

    thanks bro Its usefull

  • @babatundetaiwo5184
    @babatundetaiwo5184 10 месяцев назад +1

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

  • @Omar_Al_Seddik
    @Omar_Al_Seddik 2 года назад +2

    This channel is a hidden gem! Subbed.

    • @ravenjs
      @ravenjs  2 года назад +1

      thank you!

  • @무하마드왈라비
    @무하마드왈라비 Год назад +1

    thanks so much

  • @udaykulkarni5639
    @udaykulkarni5639 2 года назад +1

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

    • @ravenjs
      @ravenjs  2 года назад +1

      thank you uday :))

  • @dahamkalyana558
    @dahamkalyana558 2 года назад +1

    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 RUclips. Thank You. Keep it up the good work..!

  • @hatem.tommy.lamine
    @hatem.tommy.lamine 2 года назад +4

    what a gem! keep it up

  • @ricorico222
    @ricorico222 2 года назад

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

  • @ilikespaghetti2170
    @ilikespaghetti2170 2 года назад +2

    wow this tutorial is the best!!

  • @c3t5
    @c3t5 Год назад +1

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

  • @Kxffie
    @Kxffie 2 года назад +4

    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
      @ravenjs  2 года назад +5

      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
      @Kxffie 2 года назад +4

      @@ravenjs thank you!

    • @indraadha987
      @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
      @Kxffie 2 года назад

      @@indraadha987 not sure I can help you with that

    • @mohammadmemon
      @mohammadmemon 2 года назад

      @@indraadha987 send your git repository

  • @evantanjoonjuan3973
    @evantanjoonjuan3973 2 года назад +3

    Very Informative, THANK YOU VERY MUCH

  • @nsjsksjn
    @nsjsksjn 2 года назад +2

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

  • @kaelinvoker0914
    @kaelinvoker0914 2 года назад +1

    excelent video

  • @trackerprince6773
    @trackerprince6773 2 года назад +1

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

  • @pavanpyla5977
    @pavanpyla5977 2 года назад +5

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

  • @isitMaaz
    @isitMaaz 2 года назад +1

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

  • @pavanpyla5977
    @pavanpyla5977 2 года назад +4

    But ur videos are really awesome bro

  • @udaykulkarni5639
    @udaykulkarni5639 2 года назад +1

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

  • @aaliyahsymlar5689
    @aaliyahsymlar5689 2 года назад +1

    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
      @ravenjs  2 года назад +1

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

  • @indraadha987
    @indraadha987 2 года назад +3

    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
      @ravenjs  2 года назад +1

      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

  • @snowdane3920
    @snowdane3920 2 года назад +2

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

    • @ravenjs
      @ravenjs  2 года назад +1

      what browser are you using?

    • @snowdane3920
      @snowdane3920 2 года назад +1

      @@ravenjs google chrome

    • @ravenjs
      @ravenjs  2 года назад +1

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

    • @snowdane3920
      @snowdane3920 2 года назад +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
      @raphaelgomes7722 2 года назад

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

  • @a89529294
    @a89529294 2 года назад +3

    💯💯💯💯💯

  • @rochoe4575
    @rochoe4575 2 года назад +2

    How would you make this responsive to mobile devices?

    • @ravenjs
      @ravenjs  2 года назад +1

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

  • @zhanezar
    @zhanezar 2 года назад +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
      @ravenjs  2 года назад +1

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

  • @marcamooo
    @marcamooo 2 года назад +1

    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
      @ravenjs  2 года назад +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
      @marcamooo 2 года назад +1

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

  • @udaykulkarni5639
    @udaykulkarni5639 2 года назад

    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
    @lioarce 2 года назад

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

  • @wisnu-bjoey3724
    @wisnu-bjoey3724 2 года назад +2

    man youre incridible imposibble :D

  • @pavanpyla5977
    @pavanpyla5977 2 года назад +3

    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
      @ravenjs  2 года назад +3

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

    • @pavanpyla5977
      @pavanpyla5977 2 года назад +3

      @@ravenjs ❤

    • @pavanpyla5977
      @pavanpyla5977 2 года назад +1

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

  • @aaliyahsymlar5689
    @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
      @abhivyaktsharma 2 года назад

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

    • @aaliyahsymlar5689
      @aaliyahsymlar5689 2 года назад

      @@abhivyaktsharma nope, I was not.

    • @ravenjs
      @ravenjs  2 года назад +1

      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
    @TRT_MOOSIC 2 года назад

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

    • @muthusivaramakrishnan3578
      @muthusivaramakrishnan3578 2 года назад +1

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

  • @isitMaaz
    @isitMaaz 2 года назад

    Info for everyone: scrollbarWidth will only work with Firefox!

    • @raphaelgomes7722
      @raphaelgomes7722 2 года назад

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

  • @SalmanShah95
    @SalmanShah95 2 года назад +5

    Build a chat app with react and firebase 9 please.

    • @Omar_Al_Seddik
      @Omar_Al_Seddik 2 года назад

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