Skip to main content

Agatha.AI — Remix demo

A ChatGPT-inspired chat UI and supporting flows, implemented as a learning and portfolio piece. Responses are mock lorem ipsum (no live LLM), which keeps costs predictable and makes the focus product engineering—auth, routing, persistence shape, and tests.

Problem​

Shipping a credible chat product skeleton requires more than a textarea: accounts, session handling, conversation layout, and quality gates (tests, CI) should be in place before swapping in a real model.

Solution​

Full-stack Remix app with TypeScript, Tailwind for UI, Postgres for data, Docker for reproducible dev, Vitest for unit coverage, and Cypress for critical paths. Chat is structured so a future LLM adapter can replace the mock generator without rewriting the shell.

Impact​

  • Demonstrates end-to-end ownership: from schema and API boundaries to E2E flows.
  • Mock responses make demos and screenshots stable for reviewers and recruiters.

Lessons learned​

  • Swap the model, not the UX: keep message rendering and streaming hooks abstract early.
  • E2E + unit together catch regressions in both React trees and server loaders.
  • Dockerized Postgres removes “works on my machine” for collaborators.

Tech stack​

  • Framework: Remix, React, TypeScript
  • Styling: Tailwind CSS
  • Database: PostgreSQL
  • DevOps: Docker
  • Testing: Vitest, Cypress

Screenshots​

Login

Login Page

Signup

Signup Page

Home

Home Page

Chat detail

Detail Page