A system design learning platform where the AI interviewer talks back: voice-mode mock interviews, a drag-and-drop architecture canvas, 340+ HLD and LLD topics, and code that actually runs in the browser.
System design is the interview round engineers fear most, and the way we prepare for it is broken: reading other people's diagrams. You do not learn design by reading, you learn it by being questioned, by drawing, and by defending your choices. I wanted a platform where you practice against an interviewer that pushes back, in your own voice, on any company's style you choose.
ArchitechIQ became my flagship: an AI mock interviewer with real-time voice, an architecture canvas you design on, a class-diagram editor that generates runnable code skeletons, and a paid product with unit economics I designed before writing the pricing page.
Company-style HLD interviews with Claude, streamed responses, and text-to-speech that starts speaking before the model has finished thinking. Users can type any company name and the prompt adapts.
A UML editor with 4 classifier types (class, abstract, interface, enum) and 6 edge types (inheritance, realization, composition, aggregation, association, dependency).
The class diagram generates code skeletons in Java, Python, JavaScript or Go, which run against Judge0 in a Monaco editor with an output console.
React Flow based sandbox for HLD practice: drag components, wire them up, export the design as a PNG to share or submit.
248 HLD and 94 LLD structured topics, with AI explanations on demand and progress synced across devices via Zustand + Supabase.
Free, Pro and Premium tiers with concrete mock-interview limits per month, designed around LLM token cost with roughly 50% gross margin, billed through Razorpay.
The product is split into two repos: a Next.js 16 UI deployed on AWS Amplify, and a separate Next.js API layer on AWS Lambda that holds every secret and every integration. The UI never talks to Claude, Judge0 or Razorpay directly; it only knows the API. Supabase handles auth and Postgres with row-level security, and progress state syncs from a Zustand store.
Stack: Next.js 16 (Turbopack), React 19, TypeScript, Tailwind CSS 4, Supabase (auth + Postgres 17 with RLS), Anthropic Claude, Judge0 CE, Razorpay, React Flow, Monaco, Zustand, Google Chirp 3 HD TTS, AWS Amplify + Lambda.
Waiting for a full LLM response before speaking makes voice mode feel dead. I built progressive TTS: the first complete sentence is dispatched to the speech engine while the rest of the response is still streaming, tracked through a pending-speech ref so audio never overlaps or repeats. The interviewer starts talking almost immediately, and the illusion of a live conversation holds.
The LLD code runner originally used Piston, which switched to a whitelist-only policy and cut public access. I migrated the execution layer to Judge0 CE: new submission model, new polling flow, language ID mapping for Java, Python, JavaScript and Go, all behind the same UI so users never noticed. Lesson learned: isolate third-party dependencies behind your own interface, because they will change under you.
Users design an architecture, hit export, and get an empty PNG. The culprit was canvas tainting in html2canvas when rendering the React Flow viewport. I swapped the pipeline to html-to-image, which serializes the DOM to SVG before rasterizing, and exports have been pixel-clean since.
Unlimited AI interviews would mean every heavy user costs more than they pay. I worked the token math per mock interview and set concrete monthly limits per tier (Free 1, Pro 4, Premium 8) so each plan holds roughly 50% gross margin. Server-side enforcement, not just UI hiding. Pricing is a feature you design, not a page you write.
Gating had to arrive gradually: auth gates, plan checks and a feature-flag table so individual capabilities could be switched on or off in production without a deploy. Free CTAs deliberately route to public content first, and Razorpay checkout auto-opens after login when a user arrives with a plan intent in the URL.