How To Build A Chat App With React And Stream

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

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

  • @bluechip6596
    @bluechip6596 Год назад +116

    It's not a true Facebook clone without the spyware.

  • @benshapiro9731
    @benshapiro9731 Год назад +7

    hey man ur probably never gonna see this comment but you are a very big inspiration for me man. whenever im struggling with coding you always got the answer, and you break it down so simply. just wanna say i appreciate your vixeos both for the knowledge the bestow upon society but also for the undeniable drive they incite to do better and build more projects.

  • @WebDevSimplified
    @WebDevSimplified  Год назад +3

    You can unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream.
    getstream.io/maker-account/?Developer&WebDevSimplified_January2023_Maker_klmh22

    • @mouhamaddiop1144
      @mouhamaddiop1144 Год назад

      Ce système de chat peut il être implémenté avec PHP et STREAM ?

  • @bayanonymous422
    @bayanonymous422 9 месяцев назад

    Thank you so much! Just built it out right now, finished and ready to go!

  • @keremardicli4013
    @keremardicli4013 Год назад +6

    That is perfect but a little fast advanced for a newbie

    • @rulenumber337
      @rulenumber337 10 месяцев назад

      Yes I don't understand majority of the concepts😢😢

  • @devjunioralves
    @devjunioralves Год назад +5

    This class is definitely going to be amazing!

  • @ivanrobles8692
    @ivanrobles8692 Год назад +3

    This is awesome! Could you do a follow up and show how to send events with Stream?? Like if I clicked a button, for other users on the channel to receive/listen to that event and recreate it on their side

  • @denissorn
    @denissorn Год назад +3

    This is more like building a client/GUI app for a chat application, which is proprietary service, collects your metadata, probably text messages too unless you yourself implement e2e encryption.

  • @ChildrenOfDemiurgos
    @ChildrenOfDemiurgos Год назад

    Been following Kyle for a while and his channel just keeps getting better and better. So Kyle, how's you shredding skills, we are still waiting for some shredding here 😀.
    Master Of Puppets please 🤘💥🎸💥🤘

  • @luciusartoriusdante
    @luciusartoriusdante Год назад

    So... basically we could have our homebrewed messenger app. Nice!

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

    I just saw the notification on my mac book.. You don't disappoint

  • @agonyman4177
    @agonyman4177 Год назад +5

    I see you use static env, if you know and would be interested would be nice to drop this guide on dynamic runtime config env because on vite it seems to be a bit of pain that has to be handled individualy for each stage of the project :/

  • @marvelBoy1909
    @marvelBoy1909 Год назад +2

    It would be awesome if u show how to deploy this.

  • @nisabmohd
    @nisabmohd Год назад +3

    finally kyle loves typescript

    • @raki0125
      @raki0125 Год назад

      Does he hate ts?

    • @Ken-zh4gu
      @Ken-zh4gu 9 месяцев назад

      No! Typescript loves him🙂

  • @GooseGumlizzard
    @GooseGumlizzard 4 месяца назад

    Okay you're a way better developer than me but I bet I could smoke you in a guitar duel!! lol great content you've helped me a lot over the years.

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

    Great tutorial. Thanks Kyle!

  • @mznunaya
    @mznunaya Год назад

    YES! Come 👏 through 👏 Kyle 👏
    MY MAN 😄

  • @ParadoxicalMilkSnare
    @ParadoxicalMilkSnare Год назад +2

    Good stuff, love your work my guy. I was kind of hoping that the API wouldn't cost a min of $499 a month though. As a beginner react dev it makes it hard to be able to feature anything we make based off your lesson for a portfolio or job application ( I was in the industry pre OO & ES6, round the time jQuery was hefty in use, and am keen to get back into it now after going down a different path for a while ). Any chance you'd be able to make a tutorial for a super simple version of a chat system in future using bare basics like node, react & graph QL kind of thing? again love your work man. Cheers!

    • @FlygOnLiTe
      @FlygOnLiTe Год назад

      He has some videos of chat apps with web sockets. Also, stream is free with a maker account.

  • @yangjiao6514
    @yangjiao6514 Год назад

    Thanks for the tutorial!

  • @milo77py
    @milo77py 7 месяцев назад

    Incredible video, thanks for share it!

  • @MikeKaipis
    @MikeKaipis Год назад

    thanks brooo for the content

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

    Very cool tool and great video but unfortunately it’s very expensive…

    • @maskman4821
      @maskman4821 Год назад +3

      It doesnt make sense to build a chat app with Stream API, way too expensive, nobody does this in real world application 😅

  • @johnadriandodge
    @johnadriandodge Год назад

    Shalom again Jedi K, this is another one, I want to work on with you.

  • @remcovandervoort8109
    @remcovandervoort8109 Год назад

    Great tutorial! Can you maybe make a video about identity with react with an registration and login. With an password and email?

  • @developer_george
    @developer_george Год назад

    Cant wait to try it 😀

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

    It's really nice but stream is way too expensive

  • @Optional_EH
    @Optional_EH Год назад +3

    Hello ,
    I finished high school in 2015, but due to financial difficulties, I was unable to continue my education. At the moment, I'm studying FULL Stack Web Development at a institute. I have a 7+ year study gap. Can I still find a job after that?

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

      Only if you believe, there is nothing that you can't achieve.

    • @_melts
      @_melts Год назад +3

      Plenty of valid reasons to have a career gap, pick one 😉

    • @FlygOnLiTe
      @FlygOnLiTe Год назад

      Stop worrying about the job and actually build something useful.

  • @johnadriandodge
    @johnadriandodge Год назад

    Shalom evening Jedi K, fantastic app. Would you recommend us deploying it and do you think Netlify would allow this?

  • @dmitriyk.2462
    @dmitriyk.2462 Год назад

    well done!

  • @belafekete3125
    @belafekete3125 2 месяца назад

    Hi, this is a great tutorial! Thanks
    Can you change this code to use a password for login and registration?

  • @Kacper-r5v
    @Kacper-r5v Год назад

    Really great video. But why tailwind?......

  • @Siegfried-q3y
    @Siegfried-q3y Год назад

    Many thanks for the always all great content
    Just 1 question, around 55:00, in the useEffect to set the streamChat, instead of the isInterrupted logic, couldn t we check for the streamChat to be defined, and is yes, just to return ?..

  • @weler2491
    @weler2491 Год назад

    What's that extention for altering the integrated terminal path to a yellow color?

  • @crusader_
    @crusader_ Год назад

    Man you need to make a svelte video

  • @ahmedahmedx9600
    @ahmedahmedx9600 Год назад

    Hi sir, can you make a video about building a dashboard ui using html and css and javascript only ??

  • @kalichaudhary472
    @kalichaudhary472 Год назад

    Can you build css files client and admin side both separately?

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

    FYI Stream STARTS at $500/mo...

  • @zelenytypek
    @zelenytypek Год назад

    video great as always, but 500$ a month is way too much for a startup project

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

      They have a maker program which is free up to you earning 100k per year or with a team of more than 5

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

    Do the API key expire after 1 month of free trial ??

  • @UnderstandingCode
    @UnderstandingCode Год назад

    Nice

  • @mamalli
    @mamalli Год назад

    How to change the template from right to left ??

  • @carlogaballo6479
    @carlogaballo6479 Год назад

    Can you make one for nuxt 3?

  • @LookitszTral
    @LookitszTral 9 месяцев назад

    Hey there! Love this tutorial and was working on a project of mine, trying to implement the code I have onto a hostinger website and everytime I run "npm run build" in my server folder, I get errors. I added the "build": "tsc && vite build" to my package.json script and I am still not getting the components built. Any advice would be amazing! Thanks for what you do and keep it up!

  • @cricknwicks6979
    @cricknwicks6979 11 месяцев назад

    Can we get same app in Javascript instead of Typescript?

  • @faroukmabrouk-m6k
    @faroukmabrouk-m6k 16 дней назад

    bro can you do the same using node

  • @minikame2272
    @minikame2272 Год назад

    It makes building chat applications easy for the low low fee of $499 per calendar month 😶😶

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

      It's free bro unless you're making over 100k a year from your app

  • @omarhassan2548
    @omarhassan2548 Год назад

    I'm trying to add the voice note feature, can anyone guide me how to start ?

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

    It is easy to say but difficult to do. Okay 👌

  • @DanOhCaptainDaniel
    @DanOhCaptainDaniel Год назад

    8:56 anyone else seeing this Cannot use JSX unless the '--jsx' flag is provided error?

  • @321sas
    @321sas Год назад +2

    Can you do one with Angular?

  • @zSnowzmanz
    @zSnowzmanz Год назад

    what a big meal

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

    Around 19 minutes. I thought I dont use arrow functions for const . As per your previous video.

  • @mel-182
    @mel-182 Год назад

    stream is expensive for me :(

  • @michaelkurzewski2937
    @michaelkurzewski2937 Год назад

    Am I seeing correctly? 500$ per month? I did a little of research. Isn't weavy something we could use instead?

    • @alexandernewland7420
      @alexandernewland7420 Год назад

      It looks like Weavy is a much superior option. You think it'd be pretty easy to follow the tutorial and swap out the APIs?

  • @azaghalo9307
    @azaghalo9307 Год назад

    Does anyone know if this guide is still 100% working? im getting this error when trying to sign up: "Both secret and user tokens are not set. Either client.connectUser wasn't called or client.disconnect was called"

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

    are you at x2 irl?

  • @Bettercalldough
    @Bettercalldough Год назад +2

    Don’t worry people, it’s only $499 a month for stream

  • @alexandernewland7420
    @alexandernewland7420 Год назад

    Anyone having any issues with their paths

  • @mitchellthomas4846
    @mitchellthomas4846 Год назад

    nce

  • @classicdrumpercussion1608
    @classicdrumpercussion1608 Год назад

    🤩

  • @Spacey.
    @Spacey. Год назад

    yoo

  • @rishiraj2548
    @rishiraj2548 Год назад

    👍🙏

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

    $499/mo... wow. Thanks but no ☺

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

    You are a fucking machine

  • @jackepner9984
    @jackepner9984 24 дня назад

    "Incredibly robust??" Really?!?? Wish the algorithm didn't keep putting your videos on top, it seems like you're more song and dance than knowledge and sharing. There are several other videos about building chat functionality using Stream, and all are far more detailed and actually teach what's going on very well.

  • @Almighty_Flat_Earth
    @Almighty_Flat_Earth Год назад +3

    React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated.
    Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening.
    Svelte and react have confusing code. Developer experience matters.

  • @kenshinhimura3140
    @kenshinhimura3140 Год назад

    What do you think about chat gpt?

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

    error when starting dev server:
    TypeError: fs$l.rmSync is not a function
    at loadCachedDepOptimizationMetadata (file:///Users/prajvaggu/Documents/job-projects/chat-app/client/chat-app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:42640:10)
    at createDepsOptimizer (file:///Users/prajvaggu/Documents/job-projects/chat-app/client/chat-app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:42020:28)
    at initDepsOptimizer (file:///Users/prajvaggu/Documents/job-projects/chat-app/client/chat-app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41989:15)
    at file:///Users/prajvaggu/Documents/job-projects/chat-app/client/chat-app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:61152:23
    at async Server.httpServer.listen (file:///Users/prajvaggu/Documents/job-projects/chat-app/client/chat-app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:61164:17)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! chat-app@0.0.0 dev: `vite`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the chat-app@0.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR! /Users/prajvaggu/.npm/_logs/2023-01-27T01_06_25_982Z-debug.log
    What is this error?