Chat application with React.js, Node.js & Socket.io

Video: https://www.youtube.com/watch?v=a_xo-SbIfUQ

What are we building?

A chat application with rooms

What technologies are we using?

Node.js

Socket.io
ExpressJS
TypeScript

React.js

NextJS
Socket.io-client
React hooks
Context API
TypeScript
CSS Modules

What will you learn?

How sockets work on the server and the client
How to setup socket.io-client correctly in React
How to organize code for maintainability

Structure

Bootstrap backend
Bootstrap frontend
Setup sockets on the backend
Setup sockets in React with context API
Add set username functionality
Add create room functionality
Add send message functionality
Styling

Socket.io Emit cheatsheet

Support

Buy me a Coffee

Sign up to DigitalOcean I 💖 DigitalOcean

Subscribe on YouTube

Screenshots

Home screen

No rooms

In chat

Let's keep in touch

Buy me a Coffee

Sign up to DigitalOcean 💖