https://github.com/yashksaini-coder/sample-relay-chat
Simple repo for the dev container development for the relay-chat repo
https://github.com/yashksaini-coder/sample-relay-chat
daytona typescript vite websocket
Last synced: 4 months ago
JSON representation
Simple repo for the dev container development for the relay-chat repo
- Host: GitHub
- URL: https://github.com/yashksaini-coder/sample-relay-chat
- Owner: yashksaini-coder
- License: mit
- Created: 2024-12-13T19:10:07.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-18T05:35:03.000Z (6 months ago)
- Last Synced: 2024-12-18T06:35:45.997Z (6 months ago)
- Topics: daytona, typescript, vite, websocket
- Language: TypeScript
- Homepage: https://relay-chat.netlify.app/
- Size: 132 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💬 Relay-Chat Typescript/React
RTC Terminal is a modern real-time chat application that enables users to create or join chat rooms and communicate instantly with other participants. The application features a clean, responsive interface and supports real-time message delivery using WebSocket technology.
---
## 🚀 Getting Started
### Open Using Daytona
1. **Install Daytona**: Follow the [Daytona installation guide](https://www.daytona.io/docs/installation/installation/).
2. **Create the Workspace**:
```bash
daytona create https://github.com/yashksaini-coder/relay-chat-daytona
```
3. **Next start the application**:
```
npm run dev
```
4. **Click on the local deployment URL of the Application**:
```bash
https://localhost/5173
```
---
## ✨ Features
### 🏠 Room Management
- 🆕 Create new rooms with auto-generated unique room IDs
- 🔗 Join existing rooms using room IDs
- 📋 Copy room IDs to clipboard for easy sharing
- 👥 Real-time user connection tracking
### 💬 Chat Features
- ⚡ Real-time message delivery
- 🖼️ User-friendly message interface with distinct styling for sent/received messages
- 👨👩👧👦 Support for multiple users in the same room
- 📝 Username display for each message
- ⏎ Enter key support for sending messages
### 🎨 UI/UX
- 🌓 Clean, modern interface with dark theme
- 📱 Responsive design that works on mobile and desktop
- 🔔 Toast notifications for important actions
- 🎢 Smooth transitions and hover effects
- 📜 Scrollable message history
## 🛠️ Tech Stack
### 🌐 Frontend
| React | TypeScript | Tailwind CSS | Vite | React Toastify | Lucide React |
| :---: | :--------: | :----------: | :--: | :------------: | :----------: |
|  |  |  |  |  |  |
## 🏗️ Architecture
### 🌐 Frontend Architecture
The frontend is built as a single-page application (SPA) with React. Key components include:
- 🔗 Connection management with WebSocket
- 🗃️ State management using React hooks
- 📐 Responsive UI components
- ⚡ Real-time message handling and display
### 🖥️ Backend Architecture
The backend implements a WebSocket server that handles:
- 👥 User connections and disconnections
- 🏠 Room management
- 📡 Message broadcasting to room participants
- 🔢 User count tracking
### 📡 Communication Protocol
The application uses a simple message protocol over WebSocket:
#### 🚪 Join Room Message
```json
{
"type": "join",
"payload": {
"roomid": "ROOM_ID"
}
}
```
#### 💬 Chat Message
```json
{
"type": "chat",
"payload": {
"name": "USERNAME",
"message": "MESSAGE_CONTENT"
}
}
```
## 🔒 Security Features
- 🔐 Secure WebSocket connections (WSS)
- 🛡️ Input validation
- 🚪 Room isolation (messages only broadcast to users in the same room)
## 🌍 Deployment
- 🌐 Frontend deployed on Vercel
- 🖥️ Backend deployed on Render
- 🔧 WebSocket server configured for production use