JW-Talk
Real-time secure group chat with JWT auth and WebSocket messaging
Overview
JW-Talk is a real-time, secure group chat web application built with a modern decoupled client-server architecture. It enables multiple users to communicate instantly across shared chat rooms with JWT-based authentication and WebSocket-powered messaging. The frontend, built with Next.js and deployed on Vercel, handles authentication context, chat logic via custom hooks, and Axios-based API communication with automatic JWT injection. The backend, built with Express.js and Socket.io, manages RESTful auth endpoints, room management, WebSocket broadcasting, and persistent message storage.
Problems
Real-time message synchronization across multiple clients
Building a chat application requires reliable, low-latency bidirectional communication. Messages sent by one user must appear instantly on all connected clients in the same room, with chronological ordering and no message loss.
Secure authentication for WebSocket connections
JWT-based authentication in a decoupled architecture requires careful handshake validation for WebSocket connections. The socket must verify the user's identity before allowing them to join rooms or send messages, preventing unauthorized access.
Race conditions in room creation
Multiple users creating rooms simultaneously could lead to duplicate room entries or inconsistent state. The frontend needed loading states and prevention mechanisms to avoid duplicate room creation submissions.
Persistent message history with real-time updates
The chat must maintain message history in the database so users joining a room can see previous messages, while simultaneously pushing new messages in real-time to all connected clients in that room.
Solutions
Socket.io with JWT handshake validation
Implemented Socket.io for real-time bidirectional messaging with JWT validation during the connection handshake. Each socket connection is authenticated before allowing room joins or message sends, preventing unauthorized access to chat channels.
Decoupled REST + WebSocket architecture
Separated concerns cleanly: REST API handles stateful operations (auth, room CRUD, message history) while WebSocket handles real-time events (send-message, receive-message, join-room, leave-room). This allows independent scaling and clear protocol boundaries.
Race condition prevention with loading states
Implemented loading state management on room creation to prevent duplicate submissions. The create room button is disabled during the API request, and optimistic UI updates provide immediate feedback while the server processes the request.
Message persistence with auto-scroll
Messages are stored in PostgreSQL via Prisma ORM with User, Room, and Message models. On room join, message history is fetched from the database and displayed chronologically. New messages are appended in real-time with auto-scroll to the latest message.
Contributions
Architected the complete decoupled client-server application with independent Next.js frontend and Express.js backend deployments
Designed and built the Express.js backend with RESTful API endpoints for authentication (register/login), room management (create/join), and message history retrieval
Implemented JWT authentication with bcrypt password hashing, token generation, and middleware-based route protection on all protected endpoints
Built the Socket.io WebSocket server for real-time bidirectional messaging with JWT handshake validation for connection security
Developed the Next.js frontend with App Router, AuthContext for global session management, and custom useChat hook encapsulating Socket.io logic
Implemented Axios interceptors for automatic JWT token injection on every API request and token cleanup on 401 responses
Designed the PostgreSQL database schema with Prisma ORM — User, Room, and Message models with proper relations and indexes
Created the chat UI with LeftPanel (room management) and RightPanel (message display) components, including auto-scroll to latest messages
Features
User Authentication
Secure register, login, and logout with bcrypt-hashed passwords and JWT-based stateless session management
Real-Time Group Chat
Instant bidirectional messaging via Socket.io WebSockets with support for multiple concurrent chat rooms
Room Management
Create new chat rooms or join existing ones by Room ID with loading state prevention for duplicate submissions
Chat History
Persistent message history loaded from PostgreSQL database on room join, displayed in chronological order
JWT Session Management
Stateless token-based auth with localStorage persistence, auto-injected via Axios interceptors on every request
Route Protection
Unauthenticated users are automatically redirected to the login page, preventing access to chat without valid credentials
Tech Stack
- Next.js
- Express
- TypeScript
- Socket.io
- Prisma
- PostgreSQL
Gallery
1 / 4
Results
Decoupled Architecture
Independent frontend (Next.js/Vercel) and backend (Express.js) deployments communicating via REST + WebSocket protocols
Real-Time Messaging
Socket.io WebSockets deliver sub-second message delivery to all connected clients in the same room
Secure by Design
bcrypt password hashing, JWT authentication at REST and WebSocket layers, and automatic token management via Axios interceptors
Persistent Data
PostgreSQL via Prisma ORM ensures message history persists across sessions and survives server restarts