Work02/04Next.js · React · Real-time
Orbit Chat — AI chatbot CRM & landing site
An embeddable AI chatbot SaaS. I built both the SEO-optimized landing page and the real-time, data-heavy CRM behind it — unified inboxes, bot training and assignment workflows.
- Role
- Organisation
- Period
- Status
The problem
Orbit Chat needed two very different frontends at once: a marketing site that had to rank and convert, and a support console where agents live all day. One is a static-first SEO problem, the other is a real-time, data-dense application problem. Both had to ship from the same codebase and design language.
The approach
01A landing page built for search
Server-rendered Next.js with proper metadata, Open Graph and structured data, so the marketing surface is fully crawlable and fast on first paint rather than a client-rendered shell that search engines have to work to read.
02Real-time inbox over WebSockets
Incoming messages and inbox state arrive on a socket instead of being polled. The console reflects a new customer message the moment it lands — which is the difference between a support tool people trust and one they refresh.
03State split by what it actually is
Server state lives in TanStack Query with its own caching and invalidation; ephemeral UI state lives in Zustand; and filter, tab and pagination state lives in the URL via Nuqs, so any view an agent is looking at is a link they can send to a colleague.
04Data-dense UI that stays fast
TanStack Table drives the high-throughput dashboards, shadcn/ui keeps the component layer consistent, and Zod validates every form and payload boundary so bad data fails loudly at the edge rather than quietly in a reducer.