https://github.com/ahoward2/nest-react-websockets
Real-time chat application with NestJS websockets and a React frontend.
https://github.com/ahoward2/nest-react-websockets
nestjs react socket-io websockets
Last synced: 5 months ago
JSON representation
Real-time chat application with NestJS websockets and a React frontend.
- Host: GitHub
- URL: https://github.com/ahoward2/nest-react-websockets
- Owner: ahoward2
- Created: 2022-11-06T01:38:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-27T23:58:06.000Z (about 3 years ago)
- Last Synced: 2025-05-06T02:39:09.121Z (9 months ago)
- Topics: nestjs, react, socket-io, websockets
- Language: TypeScript
- Homepage: https://www.delightfulengineering.com/blog/nest-websockets/basics
- Size: 1.11 MB
- Stars: 34
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Description
> This is a realtime chat application built with NestJS, React and Socket.io. Nest provides support out of the box for websockets via Socket.io while we're using a Socket.io client in the React application. Users can login and create or join existing chat rooms!
## Design
### Server
- Chat websocket [gateway](https://docs.nestjs.com/websockets/gateways).
- Object schema validation via [pipes](https://docs.nestjs.com/pipes) with [zod](https://github.com/colinhacks/zod).
- Attribute-based access control authorization via [guards](https://docs.nestjs.com/guards) with [CASL](https://casl.js.org/v6/en).
### Client
- Socket.io client to interact with the server through websockets.
- Client/server state management with [Tanstack Query](https://tanstack.com/query/v4).
- CSS styling with [tailwindcss](https://tailwindcss.com/).
- Client-side routing with [Tanstack Location](https://react-location.tanstack.com/).
- Forms with [react-hook-form](https://react-hook-form.com/).
- Object schema validation for events, forms, and more with [zod](https://github.com/colinhacks/zod).
## Installation
```bash
$ yarn
```
## Running the app
```bash
# start client and server in development mode
$ yarn dev
# build client and server for production
$ yarn build
# start server in production
$ yarn start:prodserver
```