ArchDrill

LeetCode for system design. Pick a problem with real constraints, design the architecture on a canvas, simulate how it holds up under load, and get AI feedback graded against a hidden rubric. Iterate until the score climbs.

Live: archdrill.pages.dev

Why it exists

Reading about system design does not build the instinct you need in an interview. You build that instinct by making decisions against hard numbers and seeing where they break. ArchDrill puts you in that loop: constraints on the left, a canvas in the middle, a live model and a graded review on the right. No accounts, no backend, no telemetry. Your work stays in your browser.

What you can do

• Solve problems with teeth. Each problem states functional requirements plus hard numeric constraints: QPS, latency budgets, availability targets.
• Design on a canvas. Drag typed components (load balancer, cache, queue, databases, CDN, and more), set replica counts, annotate your reasoning, drop sticky notes, undo and redo, and auto-arrange with one click.
• Simulate under load. A flow model propagates traffic from your Client node along your edges and reports offered versus served RPS, success rate, estimated latency, availability, and per-component utilization. One click right-sizes replica counts.
• Break your own design. Toggle chaos scenarios (AZ outage, primary DB failure, cache cold start, 10x spike, network partition, hot key, slow dependency) and watch the numbers react. A zones setting controls how replicas spread.
• Get reviewed like an interview. Bring your own Anthropic or OpenAI key. The model returns a score out of 100, a per-dimension breakdown, issues paired with fixes, follow-up questions, and a stress-test verdict per scenario. Attempt history tracks your progress.
• Generate new problems. One click writes an original problem, rubric, reference solution, and solution diagram.
• Study reference solutions. Every problem ships a written walkthrough and a ready-made diagram you can load onto the canvas, behind a spoiler guard.
• Share your work. Export any design as a social-ready PNG with your score.

Quick start

npm install
npm run dev

Pick a problem, drag components from the palette, connect them left to right, and annotate nodes with your reasoning (the grader reads annotations). The simulation panel reacts as you build.

To enable AI review and problem generation, open Settings, choose a provider, and paste an API key. Use a scoped, low-spend-limit key. It lives in localStorage, which browser extensions can read. Everything except the AI features works without a key.

How grading works

Each problem ships a hidden rubric: expected components, key trade-offs, and red flags. Your diagram (components, connections, annotations, replica counts, and notes) is serialized to text and sent with the problem and rubric to the model. The model returns dimension scores, strengths, issues with fixes, and follow-up questions. Selected chaos scenarios are stress-tested in the same call. The rubric is never shown in the UI.

Grading quality lives in the rubric, not in prompt tricks. Better rubrics produce better feedback.

How the simulator works

The simulator is deterministic and local. No AI is involved. Traffic starts at Client nodes and follows your edges. Each component serves what its capacity allows and forwards the rest, split across its outgoing edges. Caches and CDNs absorb their hit share, so only misses continue downstream. Replicas multiply capacity and add redundancy across configurable availability zones. Treat it as directionally honest, not as a queueing-theory proof.

Add a problem

1. Copy a file in src/problems/ (for example, url-shortener.ts).
2. Write the statement (markdown), functional requirements, constraints, and trafficRps.
3. Write the rubric: expectedComponents, keyTradeoffs, redFlags, dimensions.
4. Write the solution (markdown) and solutionDesign (canvas nodes and edges).
5. Register it in src/problems/index.ts.

Pull requests with new problems are welcome.

Develop

npm run dev      # start the dev server
npm run build    # typecheck and build for production
npm run lint     # oxlint
npm test         # run the test suite

Stack

Vite, React 19, TypeScript, React Flow, Tailwind CSS v4, zustand, dagre, zod, lucide.

Security

No backend means no server to attack and no shared data between users. API keys stay in localStorage and are sent only to the provider you choose. Production ships a strict Content-Security-Policy that pins outbound connections to the Anthropic and OpenAI APIs, so a compromised dependency cannot exfiltrate a key elsewhere. See sysdesign-arena-threat-model.md for the full model.

License

MIT