Realtime Chat App | React, GraphQL & Websockets

Let's build a realtime chat app with React, Apollo, GraphQL Subscriptions, Websockets and Module Federation
Jack Herrington KZbin Channel:
/ @jherr
Code:
github.com/jherr/chat-o-matic
React starter project: github.com/jherr/wp5-starter-...
Apollo client: www.apollographql.com/docs/re...
Graphql-Yoga: github.com/prisma-labs/graphq...
💖 Support The Channel!
/ traversymedia
Website & Brad Traversy Udemy Course Links:
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@AbdulSamadDev]

This channel is turning into new Netflix Thankyou Brad

[@TraversyMedia]

Coding Netflix, I like that :)

[@maxosall6972]

You mean Codeflix

[@devguyahnaf]

You mean Codeflix? NAME YOUR CHANNEL CODEFLIX!!

[@ytabhigan]

@@TraversyMedia Or just Codeflix, OMG it's a great brand name. Get well soon buddy.

[@magicmystery4211]

Codeflix? Nope. More creativity needed.

[@WebDevProfesh]

Jack has one of the most underrated KZbin channels in the dev community, glad to see him on your platform!

[@TraversyMedia]

I agree. His stuff is very high quality

[@alrifay]

@Muhammad Sami The link is in the description .

[@GrungeUA]

1kk sub is underrated? Are you sure?

[@WebDevProfesh]

GrungeUA yesterday he had around 3.4k subs. Now he has around 4.5k thanks to brad. But yes , highly underrated. His content quality is better than most dev channels over 1 million subscribers.

[@DevsLikeUs]

He is definitely underrated or maybe others do extra KZbin gimmicks, but I love his presentation and style he’s really good.

[@bitsread7249]

This channel is best when it comes to programming knowledge. It has inspired me to start up my channel involving knowledge surrounding the tech world. Thanks Brad

[@_b001]

Not related to web development but this is the coolest voice I've ever heard, he should be a voice actor.

[@jherr]

Thanks!

[@MasayaShida]

Yeah his voice is very suitable for radio or podcasting

[@yitzchaksviridyuk932]

Wow, great video. Literally jam-packed with a ton of useful info. Thanks Jack for making this video, and thanks Brad for having him on!

[@TheNerdyDev]

Great to see new dev channels with awesome content. Totally feels like a platform experience where instructors are sharing their knowledge with devs.

[@kirkbeaty6655]

Thanks Brad! Jack did an excellent job stepping us through everything- informative and fun! You guys ROCK!!

[@DEVDerr]

Holy shit, that was actually good quality. Brad is turning his channel into WebDev's Netflix 😅

[@SaifUlIslam-di5xv]

The kind of series and videos I want to binge. Thanks, Brady!

[@baremetals]

Module federation blew my filking mind! excellent tutorial. I like how Brad is allowing other teachers to leverage his platform. Thanks Brad!

[@erraticbreakfast1249]

i love this, fast straight to the point and he sounds like fully know what he's doing and what he's going to do

[@SaiKumar-vf9lz]

What a way to discover wide variety of instructors .. great stuff Jack and thanks Brad

[@rsrini7]

Finally the right place to project you ... very talented person. Thank you

[@mtin79]

Awesome, thank you Jack for awesome tutorial and thank you Brad hosting him!

[@sinyolinuxozy]

awesome!!! just randomly thinking about similar project thank you Traversy Media

[@craigjohnson8279]

I've been wanting to learn GraphQL Subscriptions for the longest. This video is awesome!!!

[@fahmidamashura7076]

This is what I am looking for...Thank you, man.

[@zanzaraloggan3713]

Bred, this idea of showcasing other KZbinrs was AMAZING!

[@jondarling7933]

Cool guy, solid project! Thanks to the both of you.

[@midnighttornado22]

Holy smokes, this channel went in overdrive! To Brad and Co, great jobs and thanks!

[@kevintech2442]

Ok, I will watch more of this guy, his energy is awesome!!!

[@samgates1622]

Really enjoyed the section on module federation. Great video, very informative!

[@waellaataoui8502]

im glad to see jack in this channel he is such a hard working man,cheers! 🍻

[@Artificial_Intelligence_AI]

Now conan o'brien teaches you programming stuff 😲. Definitely this channel is bringing the best talent out there, I wonder who will be the next guest 🤔🤔

[@shikharshrivastava6965]

Excellent tutorial! Thanks Jack

[@niyongaboeric]

I love what you do! This video is what I will need from next week. Thanks for sharing brother. Besides, your intro convinced me to subscribe to your channel. Keep it up. Thumbs up to Brad Traversy.

[@tolmind]

Great exposure. Thanks Brad

[@seoexpert3118]

Thanks a million Jack For supplying these valuable resources

[@HereIam123]

This is a fantastic tutorial, with amazing new tech to learn.

[@ahmetozdemir2207]

It is clear that Jack is going to be successful channel soon! This is very high quality content indeed! Thank you very much! :)

[@danielbark]

Jack has a great voice!! Great vid! Thanks 🙏🏻

[@achyuthreddy7335]

its really Crazy ...Everything You Explained its crystal clear ❤

[@victoriduh3130]

Great video. But I’m in 05:13 and it tells me GraphQLServer is not a constructor, because of the “new” keyword

thank you so much Brad. I carved this too

[@MegaRonaldinh0]

Brad very innovative conception of traversy media sharing knowledge for all

[@anshikgupta2993]

This was one of the most needed topics, thank you. Can we also integrate database in this.

[@joaomelo6642]

amazing video. this diversity of youtubers is awesome.

[@rampritsahani6854]

You are also awesome instructor I like your all video in your Chanel

[@dev_casper]

Very good explanation. Thanks!

[@apenet-]

Just watched the intro and I'm really excited for what's to come in this video. Thanks for sharing!

[@apenet-]

Wow, definitely learned a lot of new and cool things here. Module federation seems useful - I've been using s in the past.

[@echonabin]

I'm with him also now Subscribed Jack !! Great work Brad you're giving us the new content creators and great content at a same time.

[@jm.fantin]

just passing by to say that i disliked messing with databases for the past 5 years as a frontend developer, and this class TWISTED THE SHIT OUT of the limiting beliefs i grew used to. i think that was the most relevant tech content i've ever watched & coded along, which will be immediately added to a project i'm carefully building. thank you Brad and Jack for the coordinated effort!

[@KuzyoYaroslav]

Awesome, tutorial. Thanks

[@retex73]

That was awesome. Really enjoyed !

[@hrupesh]

Highest quality Video Creator on KZbin to date. Shame that he is underrated.

[@luisssss43]

Man, this invaluable content will grant you a place in heaven Brad and Jack

[@Sunwarul]

Thank you so much. Great one!

[@elpotatoslayer]

This video has helped alot... thanks

[@lardosian]

React Vertical Timeline is a nice little package that could be used for the UI as well, can be customized and has nice little animations.

[@andrewclarke6916]

Well, I know absolutely nothing about GraphQl, Apollo or Module Federation so I'm going to be learning a lot of new stuff whilst watching and following along coding this project.

[@lukekeum]

thx 4 making video :D This video was so helpful 4 me

[@elad3958]

I became a fan. Learned a ton. I will be subscribing to your channel Jack Herrington

[@romimaximus]

i really like the way he explains things , i gonna checkout his channel..👍

[@MrJfergs]

I always find it crazy just how fast the web ecosystem moves, this tutorial isn't that old and pretty much all of the dependencies have had 2 major version updates since this tutorial.I understand it is extra work but I think for tutorial videos it is always a good idea to keep all the dependencies in a package.json that way it is much simpler that all the correct versions are installed when the project is created. Just my 2 cents though.

[@rahulpyd1]

Great. I enjoyed watching this video.

[@RiseWith]

That moment you find EXACTLY the thing you needed.

[@codewithkg9096]

Needed it.....thankkkkssss

[@reno_hub762]

Nice to meet you Man!

[@krtirtho]

I don't know who are you MR. Herrington but I like your wonderful speaking convention. Thanks for this great explanation 💗. Voting for a separate and free video platform made only for Developers of all kind but by Traversy Media. Love Traversy, Grow Traversy... Thanks Brad & Herrington

[@dikegoodluck3076]

Never clicked so fast for a video

[@MaksymCzech]

Great stuff, thank you!

[@historymobile6210]

Brad this channel is so good man 👌

[@TraversyMedia]

Thanks :)

[@jonasex3001]

Very cool, nice to meet him

[@bhuwanadhikari6732]

I think this man deserve competition with Brad :D

[@bilelkhelifa44]

we need a react-table course @thank you brad team

[@voidmind]

I'm a big fan of using the .jsx extension for React JS files. Mainly because I like the icon better than the yellow JS icon that comes with most icon themes :)

[@ridl27]

hmm, Module Federation is really interesting thing :) thx Brad. thx Jack.

[@egehurturk6209]

It is actually pretty simple. I made a slack-like chatt app with flask and javascript using SocketIO and I made it in 1 week (without watching any course)

[@lserranoit]

Thanks for share your knowledge.

[@Habib_HBB_17]

Thank you so much ❤️🙏

[@gorillatv577]

Thank you very much!

[@camilogomez5151]

Gracias, me ayudo bastante.

[@kishanpatel6113]

Travesy Media is Immortal 😎

[@johncerpa3782]

Excellent video

[@JohnWeland]

holy shit man, that is awesome!

[@MrAngryNeard]

Thank you for that information Connon O'Brian.

[@techlead...]

One thing I have noticed here is there are much more likes and replies from Brad on random comments here. Which is great actually ☺. Brad is enjoying his "me" time... 🎊

[@AlifMunim]

Greatest coding channel on KZbin

[@aliasalias510]

Just a suggestion: What about videos that talk about topics in software engineering in general? So far the content always focused only on specific technologies or personal things/life development. What about specific topics in general? Security, Design Patterns, etc.?

[@TraversyMedia]

That is something I do have in the current lineup and something I am actively looking for :) I completely agree

[@aliasalias510]

@@TraversyMedia Good to hear. So this channel is actually going to turn into the next Netflix for software developers as the comments already stated :D

[@AttkBeast]

kzbin.info/www/bejne/hmjXYmaJfN6niM0 😂

[@amritanshurai4428]

@@TraversyMedia Also, testing

[@samarth.saxena]

Well explained.

[@michaelporter2853]

Excellent Content

[@VinniiMiranda]

Really really nice

[@Lokeshsanapalli1729]

nice video... just wanted to know which approach do you follow in making tutorial videos ? do you first screen record and then do dubbing ? or record audio and screen recording both at once

[@jherr]

I write all the code, then do several takes at a screencast to get it smooth, then i voice it over, then I add the intro/outro and any graphics.

[@VeeWebCode]

So awesome.. hopefully one day I will get to make video for you too.. :)

[@gauravvala27]

That Voice!!!🔥🔥🔥

[@AlexFord]

This guy is a genius!…. Except when it comes to distinguishing left from right 😆 That voice though…

[@kipraskrasauskas4294]

Did not knew Conan did Webdev tutorials. Overall, awesome tutorial.

[@AngelGarcia-pb5nf]

So awesome that Conan O'Brien is teaching web dev now

[@atmospheric_b]

this module federation is like new era for s. Also interesting ,is it possible to hot reload changes of exposed component without browser reload?

[@rahulkulkarni9653]

Amazing, love from india,🇮🇳🇮🇳🇮🇳🇮🇳

[@WIBEDRILLMusic]

Damn bro, you've got Apollo Twin audio interface back on that table...!!😱😱😱😱😱😱

[@herbertk9266]

Cool thanks subscribed to your channel

[@avneet12284]

Excellent

[@SuperWiseacre]

Amazing videos

[@tenminutetokyo2643]

That’s nuts!

[@sjiun811]

Great Video! Thanks a lot! I'm quite new to React and GraphQL. For some reason I couldn't get 'shards-react' to work as soon /long as 'subscriptions-transport-ws' was installed. It kept on failing to find 'shards-react' modules - that is - it failed to compile with "Error: Can't resolve ...". Upon dropping 'shards-react' everything worked (but wasn't as visually appealing ;-) )

[@SHIVAMPANDEYSJTG]

We already know his channel and community as well!!!

[@siddheshb.kukade4685]

THANK YOU SIR

[@inferno407]

Can you share your source code , actually I am having trouble with setting up subscription.

[@sourabhbagrecha]

Hey, which theme are you using? I really liked the way how those triple equals to (===) became three lines in a column.

[@jherr]

One Dark Italic Theme and Cascadia Code.

[@Karinnederland]

Why when I install the react wp5 starter kit it does not work when i try to run it with 'npm start'? is this library that you created made only to work with yarn?