CompletedNext.jsTypeScriptNode.js+5 more
EchoChat
Modern 1-to-1 real-time chat app with dark UI, JWT auth, Socket.IO messaging, online presence indicators, and a planned WebRTC video calling layer.
Timeline
2 Weeks
Role
Full Stack Developer
Status
CompletedTechnology Stack
Next.js
TypeScript
Node.js
Express
PostgreSQL
Prisma
Socket.IO
Tailwind CSS
Key Challenges
- Socket.IO auth with JWT
- Online presence tracking
- Real-time message sync
- Next.js + Express hybrid setup
Key Learnings
- WebSocket architecture
- Prisma with PostgreSQL (Neon)
- Socket.IO rooms
- Tailwind v4 CSS-first theming
Overview
EchoChat is a full-stack 1-to-1 chat application built for speed and simplicity. It uses a REST API for authentication and chat history, and Socket.IO for real-time messaging. The frontend is a dark, elegant interface designed to feel modern and polished.
Architecture
The project is split into a Next.js frontend and an Express + Socket.IO backend, with Prisma managing a PostgreSQL database on Neon.
Key Features
Authentication
- JWT-based register and login with bcrypt password hashing
- Protected
GET /auth/meendpoint for session persistence - Tokens passed via
socket.authfor authenticated WebSocket connections
Real-time Messaging
- Socket.IO for instant message delivery
- Online presence indicators updated in real-time across all clients
- Chat history loaded from
GET /messages/:userIdon room entry
UI
- Dark theme with teal accent colors
- Mobile-friendly responsive layout
- User list excluding self (
GET /users)
Roadmap
- Audio/Video calling via WebRTC
- File and image sharing
- Read receipts and typing indicators
- Group chats
Tech Stack
Next.js 16 · TypeScript · Tailwind CSS v4 · shadcn/ui
Node.js · Express · Socket.IO · Prisma
PostgreSQL (Neon) · JWT · bcrypt