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

1. Bootstrap backend
2. Bootstrap frontend
3. Setup sockets on the backend
4. Setup sockets in React with context API
5. Add set username functionality
6. Add create room functionality
7. Add send message functionality
8. 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

• Subscribe on YouTube
• Discord
• Twitter
• TikTok
• Facebook
• Instagram

Buy me a Coffee

Sign up to DigitalOcean 💖