← work

Ping

Real-time chat client

A Next.js chat client built against an external REST and Socket.io API.

Ping screenshot 1
Ping screenshot 2
Ping screenshot 3
Ping screenshot 4
Ping screenshot 5
1 / 5

about

Ping is a frontend for an external chat API that I did not build. That constraint turned out to be the most interesting part of the project. When you do not control the backend, you have to work with the API you were given, including its quirks.

The app handles authentication, direct and group conversations, and realtime messaging. The client is Next.js with TypeScript and TanStack Query.

interesting

The API returns messages newest-first and documents an off-by-one on hasMore. Pagination and cache merging handle both without leaking the quirk into UI code.

Messages send through the socket only. There is no REST fallback. Pending, sent, and failed states reconcile from a single source of truth, which keeps the UI consistent even when the socket drops.

The app uses query invalidation instead of optimistic updates. The trade-off is documented in the architecture writeup: optimistic updates feel faster but lie to the user when the server rejects them.

The landing page is deliberately minimal. It presents the product in one screen without feature grids or marketing copy.

stack

Next.js · TypeScript · Socket.io · TanStack Query · Tailwind

links