Nithin Pradeep

Posted on Jun 14

I Built an AI System Design Coach — Clone It, Try It, Break It

#ai #systemdesign #webdev #opensource

The problem I kept running into

Every time I practiced system design, I'd hit the same wall: I'd sketch out a rough idea for "design WhatsApp" or "build a URL shortener," and then... nothing. No feedback. No indication if my choice of Kafka over RabbitMQ was justified or just cargo-culting. No one to ask "hey, what's your latency requirement?"

Real interviews have a human who prods you with the right questions. Solo practice doesn't. I built Arcwise to fix that.

What Arcwise does

Arcwise is an open-source, AI-powered system design coach. Drop in any problem, and it walks you through the full design process — just like a real interview session.

Here's the flow:

Describe ──▶ Clarify ──▶ Design ──▶ Refine ──▶ Review

Describe — Enter "Design a ride-sharing platform like Uber" or pick from built-in problems (WhatsApp, Twitter, Netflix, YouTube...)
Clarify — The AI asks 5 targeted questions: expected traffic, consistency model, latency targets, geographic scope, key constraints
Design — Based on your answers, it generates a live Mermaid architecture diagram
Refine — Chat with it: "add a caching layer", "swap to eventual consistency", "how would I handle 10M daily active users?"
Review — Get a scored breakdown across 5 dimensions (1–10 each)

Score Dimension	What it measures
`functional_coverage`	Are all core requirements addressed?
`nfr_handling`	Scale, latency, availability
`component_justification`	Are tech choices explained and appropriate?
`tradeoff_awareness`	Does the design reason about tradeoffs?
`overall`	Holistic design quality

No hand-wavy "looks good!" — actual structured feedback on what you missed.

The stack (for the curious)

I wanted this to be a real production-quality project, not a toy demo:

Layer	Tech
AI	LiteLLM — swap between Claude, GPT-4o, Gemini, Groq, or local Ollama from Settings
Backend	FastAPI · Pydantic v2 · SSE streaming · PostgreSQL (async SQLAlchemy)
Frontend	Next.js 16 App Router · React 19 · TypeScript · Zustand
Diagrams	Mermaid.js (live DSL rendering — edit the diagram directly or via chat)
Auth	JWT · bcrypt · GitHub OAuth · Google OAuth · SMTP password reset
Infra	Docker Compose · optional Redis session store

One thing I'm especially happy with: LiteLLM as the AI abstraction layer. You set your key in .env and the whole thing works — switch from Claude to GPT-4o to a local Llama3 model without touching a line of code.

Try it in 3 commands

git clone https://github.com/nithiin7/arcwise.git
cd arcwise
echo "ANTHROPIC_API_KEY=sk-ant-..." > backend/.env
docker compose up

Open http://localhost:3000. Done. No account required to start — auth is optional and off by default.

Prefer a different model? Set OPENAI_API_KEY, GEMINI_API_KEY, or GROQ_API_KEY instead (or all of them) and switch from the Settings page.

What I learned building this

Streaming UX matters more than I expected. When the diagram generates token by token and you see it appear in real time, it feels alive. Buffering the whole response and dumping it at once felt dead in comparison. SSE streaming from FastAPI to Next.js was worth the extra plumbing.

Mermaid.js is underrated. Everyone reaches for D3 or a graph library when they need diagrams. Mermaid gives you a clean DSL that an LLM can generate directly — no coordinate math, no node positioning. The diagram is just a string. That means the AI can edit it through chat without any special graph manipulation logic.

Multi-model by default was the right call. I started hardcoded to Claude, then added a ModelSelect component and LiteLLM routing. The moment local Ollama worked — fully offline, free, no API key — it changed the feel of the whole project. It's not just a Claude wrapper anymore.

What's next (and where you come in)

I have ideas, but I want to build what's actually useful:

Export to PDF / PNG — shareable artifacts for interviews
Timed interview mode — 45-minute countdown with hints disabled
Community problem library — upvote/submit design problems
Diagram diff view — show what changed between refinement rounds
Team mode — collaborate on a design in real time

If any of these resonate with you — or you have a completely different idea — open an issue or drop a comment below. I read everything.

DEV Community