Skip to main content

Agatha.AI: Remix demo

A ChatGPT-style chat UI I built as a portfolio and learning project. Replies are mock lorem ipsum (no live LLM), so demos stay cheap and the real work stays on product engineering: auth, routing, data shape, and tests.

Problem​

A chat product needs more than a textarea. You want accounts, sessions, a conversation layout, and tests in place before you wire a real model.

Solution​

Full-stack Remix app with TypeScript, Tailwind, Postgres, and Docker for local setup. Vitest covers units; Cypress covers the critical paths. The chat shell is written so a future LLM adapter can replace the mock generator without rewriting the UI.

Impact​

  • Shows the full path from schema and API boundaries through E2E flows.
  • Mock replies keep screenshots and demos stable for reviewers.

Lessons learned​

  • Keep message rendering and streaming hooks abstract early so you can swap the model later.
  • Unit and E2E tests catch different bugs: React trees vs server loaders.
  • Dockerized Postgres removes a lot of “works on my machine” friction.

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