17 | )) 18 | Card.displayName = "Card" 19 | 20 | const CardHeader = React.forwardRef< 21 | HTMLDivElement, 22 | React.HTMLAttributes 23 | >(({ className, ...props }, ref) => ( 24 |

29 | )) 30 | CardHeader.displayName = "CardHeader" 31 | 32 | const CardTitle = React.forwardRef< 33 | HTMLDivElement, 34 | React.HTMLAttributes 35 | >(({ className, ...props }, ref) => ( 36 |

41 | )) 42 | CardTitle.displayName = "CardTitle" 43 | 44 | const CardDescription = React.forwardRef< 45 | HTMLDivElement, 46 | React.HTMLAttributes 47 | >(({ className, ...props }, ref) => ( 48 |

53 | )) 54 | CardDescription.displayName = "CardDescription" 55 | 56 | const CardContent = React.forwardRef< 57 | HTMLDivElement, 58 | React.HTMLAttributes 59 | >(({ className, ...props }, ref) => ( 60 |

61 | )) 62 | CardContent.displayName = "CardContent" 63 | 64 | const CardFooter = React.forwardRef< 65 | HTMLDivElement, 66 | React.HTMLAttributes 67 | >(({ className, ...props }, ref) => ( 68 |

73 | )) 74 | CardFooter.displayName = "CardFooter" 75 | 76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # 💬 Relay-Chat Typescript/React 3 | 4 | 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. 5 | 6 | --- 7 | 8 | ## 🚀 Getting Started 9 | 10 | 11 | 2. **Cloning the Repository**: 12 | ```bash 13 | git clone https://github.com/yashksaini-coder/relay-chat 14 | ``` 15 | 16 | 2. **Installing Dependencies**: 17 | ```bash 18 | npm install 19 | ``` 20 | 21 | 3. **Running the application**: 22 | ``` 23 | npm run dev 24 | ``` 25 | 26 | 4. **Click on the local deployment URL of the Application**: 27 | ```bash 28 | https://localhost/5173 29 | ``` 30 | 31 | --- 32 | 33 | ## ✨ Features 34 | 35 | ### 🏠 Room Management 36 | - 🆕 Create new rooms with auto-generated unique room IDs 37 | - 🔗 Join existing rooms using room IDs 38 | - 📋 Copy room IDs to clipboard for easy sharing 39 | - 👥 Real-time user connection tracking 40 | 41 | ### 💬 Chat Features 42 | - ⚡ Real-time message delivery 43 | - 🖼️ User-friendly message interface with distinct styling for sent/received messages 44 | - 👨‍👩‍👧‍👦 Support for multiple users in the same room 45 | - 📝 Username display for each message 46 | - ⏎ Enter key support for sending messages 47 | 48 | ### 🎨 UI/UX 49 | - 🌓 Clean, modern interface with dark theme 50 | - 📱 Responsive design that works on mobile and desktop 51 | - 🔔 Toast notifications for important actions 52 | - 🎢 Smooth transitions and hover effects 53 | - 📜 Scrollable message history 54 | 55 | 56 | ## 🛠️ Tech Stack 57 | 58 | ### 🌐 Frontend 59 | | React | TypeScript | Tailwind CSS | Vite | React Toastify | Lucide React | 60 | | :---: | :--------: | :----------: | :--: | :------------: | :----------: | 61 | | ![React](https://skillicons.dev/icons?i=react) | ![TypeScript](https://skillicons.dev/icons?i=ts) | ![Tailwind CSS](https://skillicons.dev/icons?i=tailwind) | ![Vite](https://skillicons.dev/icons?i=vite) | ![React Toastify](https://skillicons.dev/icons?i=react) | ![Lucide React](https://github.com/user-attachments/assets/f4ad1606-9ad2-4726-910d-7843e45e8f9f) | 62 | 63 | ## 🏗️ Architecture 64 | 65 | ### 🌐 Frontend Architecture 66 | The frontend is built as a single-page application (SPA) with React. Key components include: 67 | - 🔗 Connection management with WebSocket 68 | - 🗃️ State management using React hooks 69 | - 📐 Responsive UI components 70 | - ⚡ Real-time message handling and display 71 | 72 | ### 🖥️ Backend Architecture 73 | The backend implements a WebSocket server that handles: 74 | - 👥 User connections and disconnections 75 | - 🏠 Room management 76 | - 📡 Message broadcasting to room participants 77 | - 🔢 User count tracking 78 | 79 | ### 📡 Communication Protocol 80 | The application uses a simple message protocol over WebSocket: 81 | 82 | #### 🚪 Join Room Message 83 | ```json 84 | { 85 | "type": "join", 86 | "payload": { 87 | "roomid": "ROOM_ID" 88 | } 89 | } 90 | ``` 91 | 92 | #### 💬 Chat Message 93 | ```json 94 | { 95 | "type": "chat", 96 | "payload": { 97 | "name": "USERNAME", 98 | "message": "MESSAGE_CONTENT" 99 | } 100 | } 101 | ``` 102 | 103 | ## 🔒 Security Features 104 | - 🔐 Secure WebSocket connections (WSS) 105 | - 🛡️ Input validation 106 | - 🚪 Room isolation (messages only broadcast to users in the same room) 107 | 108 | 109 | ## 🌍 Deployment 110 | - 🌐 Frontend deployed on Vercel 111 | - 🖥️ Backend deployed on Render 112 | - 🔧 WebSocket server configured for production use 113 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/hooks/use-toast.ts: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | // Inspired by react-hot-toast library 4 | import * as React from "react" 5 | 6 | import type { 7 | ToastActionElement, 8 | ToastProps, 9 | } from "@/components/ui/toast" 10 | 11 | const TOAST_LIMIT = 1 12 | const TOAST_REMOVE_DELAY = 1000000 13 | 14 | type ToasterToast = ToastProps & { 15 | id: string 16 | title?: React.ReactNode 17 | description?: React.ReactNode 18 | action?: ToastActionElement 19 | } 20 | 21 | const actionTypes = { 22 | ADD_TOAST: "ADD_TOAST", 23 | UPDATE_TOAST: "UPDATE_TOAST", 24 | DISMISS_TOAST: "DISMISS_TOAST", 25 | REMOVE_TOAST: "REMOVE_TOAST", 26 | } as const 27 | 28 | let count = 0 29 | 30 | function genId() { 31 | count = (count + 1) % Number.MAX_SAFE_INTEGER 32 | return count.toString() 33 | } 34 | 35 | type ActionType = typeof actionTypes 36 | 37 | type Action = 38 | | { 39 | type: ActionType["ADD_TOAST"] 40 | toast: ToasterToast 41 | } 42 | | { 43 | type: ActionType["UPDATE_TOAST"] 44 | toast: Partial 45 | } 46 | | { 47 | type: ActionType["DISMISS_TOAST"] 48 | toastId?: ToasterToast["id"] 49 | } 50 | | { 51 | type: ActionType["REMOVE_TOAST"] 52 | toastId?: ToasterToast["id"] 53 | } 54 | 55 | interface State { 56 | toasts: ToasterToast[] 57 | } 58 | 59 | const toastTimeouts = new Map>() 60 | 61 | const addToRemoveQueue = (toastId: string) => { 62 | if (toastTimeouts.has(toastId)) { 63 | return 64 | } 65 | 66 | const timeout = setTimeout(() => { 67 | toastTimeouts.delete(toastId) 68 | dispatch({ 69 | type: "REMOVE_TOAST", 70 | toastId: toastId, 71 | }) 72 | }, TOAST_REMOVE_DELAY) 73 | 74 | toastTimeouts.set(toastId, timeout) 75 | } 76 | 77 | export const reducer = (state: State, action: Action): State => { 78 | switch (action.type) { 79 | case "ADD_TOAST": 80 | return { 81 | ...state, 82 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), 83 | } 84 | 85 | case "UPDATE_TOAST": 86 | return { 87 | ...state, 88 | toasts: state.toasts.map((t) => 89 | t.id === action.toast.id ? { ...t, ...action.toast } : t 90 | ), 91 | } 92 | 93 | case "DISMISS_TOAST": { 94 | const { toastId } = action 95 | 96 | // ! Side effects ! - This could be extracted into a dismissToast() action, 97 | // but I'll keep it here for simplicity 98 | if (toastId) { 99 | addToRemoveQueue(toastId) 100 | } else { 101 | state.toasts.forEach((toast) => { 102 | addToRemoveQueue(toast.id) 103 | }) 104 | } 105 | 106 | return { 107 | ...state, 108 | toasts: state.toasts.map((t) => 109 | t.id === toastId || toastId === undefined 110 | ? { 111 | ...t, 112 | open: false, 113 | } 114 | : t 115 | ), 116 | } 117 | } 118 | case "REMOVE_TOAST": 119 | if (action.toastId === undefined) { 120 | return { 121 | ...state, 122 | toasts: [], 123 | } 124 | } 125 | return { 126 | ...state, 127 | toasts: state.toasts.filter((t) => t.id !== action.toastId), 128 | } 129 | } 130 | } 131 | 132 | const listeners: Array<(state: State) => void> = [] 133 | 134 | let memoryState: State = { toasts: [] } 135 | 136 | function dispatch(action: Action) { 137 | memoryState = reducer(memoryState, action) 138 | listeners.forEach((listener) => { 139 | listener(memoryState) 140 | }) 141 | } 142 | 143 | type Toast = Omit 144 | 145 | function toast({ ...props }: Toast) { 146 | const id = genId() 147 | 148 | const update = (props: ToasterToast) => 149 | dispatch({ 150 | type: "UPDATE_TOAST", 151 | toast: { ...props, id }, 152 | }) 153 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) 154 | 155 | dispatch({ 156 | type: "ADD_TOAST", 157 | toast: { 158 | ...props, 159 | id, 160 | open: true, 161 | onOpenChange: (open) => { 162 | if (!open) dismiss() 163 | }, 164 | }, 165 | }) 166 | 167 | return { 168 | id: id, 169 | dismiss, 170 | update, 171 | } 172 | } 173 | 174 | function useToast() { 175 | const [state, setState] = React.useState(memoryState) 176 | 177 | React.useEffect(() => { 178 | listeners.push(setState) 179 | return () => { 180 | const index = listeners.indexOf(setState) 181 | if (index > -1) { 182 | listeners.splice(index, 1) 183 | } 184 | } 185 | }, [state]) 186 | 187 | return { 188 | ...state, 189 | toast, 190 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), 191 | } 192 | } 193 | 194 | export { useToast, toast } 195 | -------------------------------------------------------------------------------- /src/components/ui/toast.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ToastPrimitives from "@radix-ui/react-toast" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | import { X } from "lucide-react" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const ToastProvider = ToastPrimitives.Provider 9 | 10 | const ToastViewport = React.forwardRef< 11 | React.ElementRef, 12 | React.ComponentPropsWithoutRef 13 | >(({ className, ...props }, ref) => ( 14 | 22 | )) 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName 24 | 25 | const toastVariants = cva( 26 | "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", 27 | { 28 | variants: { 29 | variant: { 30 | default: "border bg-background text-foreground", 31 | destructive: 32 | "destructive group border-destructive bg-destructive text-destructive-foreground", 33 | }, 34 | }, 35 | defaultVariants: { 36 | variant: "default", 37 | }, 38 | } 39 | ) 40 | 41 | const Toast = React.forwardRef< 42 | React.ElementRef, 43 | React.ComponentPropsWithoutRef & 44 | VariantProps 45 | >(({ className, variant, ...props }, ref) => { 46 | return ( 47 | 52 | ) 53 | }) 54 | Toast.displayName = ToastPrimitives.Root.displayName 55 | 56 | const ToastAction = React.forwardRef< 57 | React.ElementRef, 58 | React.ComponentPropsWithoutRef 59 | >(({ className, ...props }, ref) => ( 60 | 68 | )) 69 | ToastAction.displayName = ToastPrimitives.Action.displayName 70 | 71 | const ToastClose = React.forwardRef< 72 | React.ElementRef, 73 | React.ComponentPropsWithoutRef 74 | >(({ className, ...props }, ref) => ( 75 | 84 | 85 | 86 | )) 87 | ToastClose.displayName = ToastPrimitives.Close.displayName 88 | 89 | const ToastTitle = React.forwardRef< 90 | React.ElementRef, 91 | React.ComponentPropsWithoutRef 92 | >(({ className, ...props }, ref) => ( 93 | 98 | )) 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName 100 | 101 | const ToastDescription = React.forwardRef< 102 | React.ElementRef, 103 | React.ComponentPropsWithoutRef 104 | >(({ className, ...props }, ref) => ( 105 | 110 | )) 111 | ToastDescription.displayName = ToastPrimitives.Description.displayName 112 | 113 | type ToastProps = React.ComponentPropsWithoutRef 114 | 115 | type ToastActionElement = React.ReactElement 116 | 117 | export { 118 | type ToastProps, 119 | type ToastActionElement, 120 | ToastProvider, 121 | ToastViewport, 122 | Toast, 123 | ToastTitle, 124 | ToastDescription, 125 | ToastClose, 126 | ToastAction, 127 | } 128 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { toast, ToastContainer } from "react-toastify"; 3 | import { Send, Copy, Plus, Users } from "lucide-react"; 4 | import "react-toastify/dist/ReactToastify.css"; 5 | import "./App.css"; 6 | import { sendMsg, createRoom, joinRoom, handleKeyPress } from "./lib"; 7 | import { Input } from "@/components/ui/input"; 8 | import { Button } from "@/components/ui/button"; 9 | import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"; 10 | 11 | function App() { 12 | const [connected, setConnected] = useState(false); 13 | const [roomid, setRoom] = useState(""); 14 | const [username, setUsername] = useState(""); 15 | const [ws, setWs] = useState(null); 16 | const [msgs, setMsg] = useState([]); 17 | const [currentMsg, setCMsg] = useState(""); 18 | 19 | interface Messages { 20 | name: string; 21 | message: string; 22 | } 23 | 24 | useEffect(() => { 25 | // const wsUrl = import.meta.env.VITE_BACKEND_URL; 26 | const wsUrl = "https://relay-chat-backend.onrender.com/"; 27 | if (!wsUrl) { 28 | console.error("WebSocket URL is not defined"); 29 | return; 30 | } 31 | const ws = new WebSocket(wsUrl); 32 | setWs(ws); 33 | 34 | ws.onmessage = (e) => { 35 | const data = JSON.parse(e.data); 36 | setMsg((prev) => [...prev, data]); 37 | }; 38 | }, []); 39 | 40 | const handleJoinRoom = () => { 41 | if (!username) { 42 | toast.error("Please enter a username"); 43 | return; 44 | } 45 | joinRoom(ws, username, roomid, setConnected); 46 | toast.success("Joined room successfully!"); 47 | }; 48 | 49 | const handleCreateRoom = () => { 50 | if (!username) { 51 | toast.error("Please enter a username"); 52 | return; 53 | } 54 | createRoom(ws, username, setConnected); 55 | // toast.success("Room created successfully!"); 56 | }; 57 | 58 | const handleSendMsg = () => { 59 | sendMsg(ws, currentMsg, username, setCMsg); 60 | }; 61 | 62 | return ( 63 |

64 | 65 | {!connected ? ( 66 | 67 | 68 |

69 | RTC Terminal 70 |

71 | 72 | 73 |

74 | 75 | setUsername(e.target.value)} 81 | /> 82 |

83 |

84 | setRoom(e.target.value)} 89 | /> 90 | 97 |

98 |

99 |

100 | or 101 |

102 |

103 | 111 | 112 | 113 | ) : ( 114 |

115 | 116 | 117 |

118 |

Room ID: {localStorage.getItem("roomid")}

119 | 131 |

132 | 133 | 134 | 135 | 136 | {msgs.map((e, index) => { 137 | const isUserMessage = localStorage.getItem("name") === e.name; 138 | return ( 139 |

143 | {e.name} 144 |

148 | {e.message} 149 |

150 |

151 | ); 152 | })} 153 | 154 | 155 | 156 | setCMsg(e.target.value)} 162 | onKeyDown={(e) => handleKeyPress(e, ws, currentMsg, username, setCMsg)} 163 | /> 164 | 171 | 172 |

173 | )} 174 |

175 | ); 176 | } 177 | 178 | export default App; 179 | -------------------------------------------------------------------------------- /public/rtc-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 233 | --------------------------------------------------------------------------------