Full Stack
LumoChat
Real-time messaging with typing indicators, online presence, paginated history and a media gallery for images, video and audio.
Overview
A real-time messaging application built to production standards rather than as a demo. It covers JWT auth in HTTP-only cookies, file uploads, lazy-loaded message pagination, and a media gallery.
Role
I built both services: a React frontend and an Express and Socket.io backend, each deployed on its own.
The hard part
Keeping the live state and the stored history agreeing with each other. Presence and typing events arrive over Socket.io while old messages load in pages as you scroll, so the two have to meet in the middle without duplicating or dropping anything. Media also had to be compressed before upload, or sending a photo would block the whole conversation.
Architecture
React 18 and Vite on the frontend, with Socket.io for live events and TanStack Query for server state. Express 5 and Socket.io on the backend, PostgreSQL for storage, Cloudinary for media, and Sharp compressing files before they go up. The two services deploy independently on their own subdomains.
Stack
- React
- TypeScript
- Node.js
- Express
- Socket.io
- PostgreSQL
- Cloudinary
Test credentials
Throwaway accounts for the live demo.
- testing1@gmail.comPassword123
- testing2@gmail.comPassword123