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 💖