Inspiration

We rebuilt our hackathon project 3 times. Not because the code was bad, but because we picked the wrong stack every time. Firebase couldn't handle our queries. Our auth cost $500/mo at scale. Our AI pipeline had no queue so users waited 40 seconds staring at a spinner.

That's a \$50,000+ mistake in the startup world. And every developer makes it.

Every AI tool today (Cursor, Claude Code, Lovable) helps you write code faster. None of them ask if you're building on the right foundation. We built Preflight to fix that.


What it does

Preflight is an AI architect that sits before your IDE. You describe your idea in plain English, it asks smart follow-up questions like a senior engineer would, then recommends the optimal stack from 229+ technologies, generates a scored visual architecture, lints it for 30+ anti-patterns, and exports implementation-ready artifacts to Cursor, Claude Code, Lovable, or VS Code in one click.

The scoring formula evaluates every technology across 8 dimensions:

$$S_{total} = \sum_{i=1}^{8} w_i \cdot d_i \quad \text{where } d \in {\text{speed, complexity, scalability, cost, ops, lock-in, reliability, AI-readiness}}$$

Weights shift based on your constraints. A hackathon gets speed-optimized picks. An enterprise app gets scalability-optimized picks. Same catalog, different math, right answer every time.


How we built it

Layer Tech Why
Framework Next.js 15 (App Router, RSC, Streaming SSR) Server components + edge runtime
Backend Convex (reactive DB, serverless functions, real-time subscriptions) Zero-ops, instant sync
AI OpenAI GPT 5.2 with 2,000+ word custom system prompt Structured architect behavior
Canvas React Flow (custom nodes, auto-layout, edge animations) Interactive architecture visualization
Auth Clerk (JWT, OAuth, org management, Convex webhooks) Drop-in, secure
State Zustand + TanStack Query + Convex subscriptions Client + server state sync
UI React 19 + shadcn/ui + Radix + Framer Motion Accessible, animated components
Design Tailwind v4 + custom Claymorphism token system Warm dark theme, gold accents, clay depth
Typography DM Sans + Instrument Serif Professional, not generic
DevOps Vercel + GitHub Actions + Turborepo + TypeScript strict Zero any types, CI on every PR

The tech catalog is ~3,000 lines of hand-scored TypeScript with ComponentMeta interfaces covering scores, company usage, cost estimates, maturity ratings, best-for/avoid-when tags. The linter runs 30+ pure functions against every generated architecture. The export system generates tool-specific artifacts (.cursorrules, CLAUDE.md, agent directives) not generic READMEs.

This isn't an LLM wrapper. It's a domain-specific intelligence layer.


Challenges we ran into

Making AI think like an architect, not a chatbot. LLMs ramble. Architects don't. The 2,000-word system prompt forces structured extraction, max 4 questions per turn, and context-aware transitions through a state machine: $\text{UNDERSTAND} \rightarrow \text{SELECT} \rightarrow \text{CONFIRM} \rightarrow \text{SANDBOX}$

Scoring 229 technologies fairly. Should Firebase score $7$ or $8$ on build speed? Every number changes downstream recommendations. Context-dependent weighted scoring was harder than any feature we built.

Chat-to-canvas transition. Going from conversation to visual graph without breaking the user's flow required careful state machine design and animation choreography.


Accomplishments that we're proud of

  • 229 technologies, 22 categories, 8 dimensions of scoring, all hand-curated
  • AI that actually pushes back: "you don't need Kafka for a hackathon"
  • Full pipeline: idea $\rightarrow$ conversation $\rightarrow$ components $\rightarrow$ visual architecture $\rightarrow$ one-click export. Under 2 minutes.
  • Design that belongs next to Google and OpenAI, not a weekend hackathon

What we learned

Architecture is the highest-leverage decision in software. A wrong database choice costs more than 10,000 lines of buggy code. Developers don't need more ways to write code. They need better ways to think.


What's next for PreFlight

🔜 Stripe subscriptions (launching in days) to go live for real users

🤖 Agentic Builder that takes your finalized architecture and autonomously scaffolds the entire codebase: schemas, routes, configs, deployment. Not vibe-coded slop, architecturally sound code.

🧠 Multi-LLM Council where Claude, Gemini, and GPT debate your architecture in real-time from different lenses

🌍 Architecture Marketplace to share, fork, and remix community-vetted templates

Plan before you build. Build right the first time.

Built With

Share this project:

Updates