TextUp is a real-time room-based chat application built with React, TypeScript, and WebSockets (ws). It enables users to instantly create or join chat rooms, exchange messages in real time, view online participants, and automatically reconnect after temporary connection interruptions—all wrapped in a bold Brutalist UI.
🔗 TextUp
- 💬 Real-time messaging using WebSockets
- 🚪 Create or join chat rooms with a unique Room ID
- 👥 Live online users list
- ⚡ Instant message delivery with low latency
- 🔄 Automatic reconnection support
- ♻️ Refresh-safe room joining
- 🆔 Unique sender ID for each user
- 🚪 Leave Room button that closes the user's WebSocket connection and redirects them to the Home page
- 🗑️ Rooms are automatically deleted when all users leave
- 🎨 Responsive Brutalist UI
- React
- TypeScript
- Vite
- React Router DOM
- Node.js
- TypeScript
- WebSockets (
ws) - NanoID
TextUp/
├── frontend/
│ ├── src/
│ │ ├── Pages/
│ │ │ ├── Home.tsx
│ │ │ └── Room.tsx
│ │ ├── App.tsx
│ │ └── main.tsx
│ └── package.json
│
├── backend/
│ ├── src/
│ │ └── index.ts
│ └── package.json
│
└── README.md
git clone https://github.com/aru-shi2/TextUp.git
cd TextUpcd backend
npm install
npm run devcd frontend
npm install
npm run devConfigure the WebSocket URL according to your environment.
ws://localhost:8080
wss://your-backend-url
- The application establishes a WebSocket connection.
- Users create a new room or join an existing one using a unique Room ID.
- Once connected, the user is automatically added to the selected room.
- Messages are delivered in real time to everyone in the same room.
- The online users list updates instantly whenever someone joins or leaves.
- If the connection is interrupted, the client automatically reconnects and rejoins the room.
- Clicking Leave Room closes the user's WebSocket connection and redirects them back to the Home page.
- When the last participant leaves a room, it is automatically removed from the server.