https://github.com/tomdoestech/realtime-chat-application

https://github.com/tomdoestech/realtime-chat-application

chat-application nodejs react socket-io typescript

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/tomdoestech/realtime-chat-application
• Owner: TomDoesTech
• License: mit
• Created: 2021-06-27T09:55:35.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-02T08:49:09.000Z (about 3 years ago)
• Last Synced: 2024-04-17T06:07:24.812Z (9 months ago)
• Topics: chat-application, nodejs, react, socket-io, typescript
• Language: TypeScript
• Homepage: https://www.youtube.com/watch?v=a_xo-SbIfUQ
• Size: 18.3 MB
• Stars: 61
• Watchers: 5
• Forks: 26
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)

## 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](https://socket.io/docs/v3/emit-cheatsheet/index.html)

## Support

[Buy me a Coffee](https://www.buymeacoffee.com/tomn)

[Sign up to DigitalOcean](https://m.do.co/c/1b74cb8c56f4) I 💖 DigitalOcean

[Subscribe on YouTube](https://www.youtube.com/channel/UClEEzwG7Tl3-8eY11Qytsog)

## Screenshots

### Home screen

![](./screenshots/1.png)

### No rooms

![](./screenshots/2.png)

### In chat

![](./screenshots/3.png)

## Let's keep in touch

- [Subscribe on YouTube](https://www.youtube.com/TomDoesTech)

- [Discord](https://discord.gg/4ae2Esm6P7)

- [Twitter](https://twitter.com/tomdoes_tech)

- [TikTok](https://www.tiktok.com/@tomdoestech)

- [Facebook](https://www.facebook.com/tomdoestech)

- [Instagram](https://www.instagram.com/tomdoestech)

[Buy me a Coffee](https://www.buymeacoffee.com/tomn)

[Sign up to DigitalOcean 💖](https://m.do.co/c/1b74cb8c56f4)