LumoChat

Full Stack

Real-time messaging with typing indicators, online presence, paginated history and a media gallery for images, video and audio.

Live demo · Source: Frontend · Source: Backend

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

Sole engineer across both services: a React frontend and an Express and Socket.io backend, deployed separately.

The hard part

Keeping live state and historical state coherent: presence and typing events arrive over Socket.io while message history loads lazily in pages, and media uploads had to be compressed before storage so they didn't stall the send path.

Architecture

React 18 and Vite on the frontend, using Socket.io for real-time events and TanStack Query for server state. Express 5 with Socket.io on the backend, PostgreSQL for storage and Cloudinary for media, with Sharp compressing files before upload. 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.com · Password123
testing2@gmail.com · Password123