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
- .net
- amazon-web-services
- angular.js
- anthropic-claude
- app-router
- astro
- auth0
- azure
- azure-blob
- azure-cosmos-db
- azure-openai
- bullmq
- c#
- canvas-api
- celery
- class-variance-authority
- clerk
- cloudflare
- cloudflare-r2
- clsx
- cockroachdb
- convex
- convex-cloud
- convex-document-store
- convex-react
- createportal
- css-custom-properties
- css3
- cypress
- dart
- django
- dm-sans
- docker
- dynamodb
- elasticsearch
- eslint
- express.js
- fastapi
- firebase
- firebase-auth
- firebase-storage
- firestore
- flutter
- fly.io
- framer-motion
- gcp
- go
- go-fiber
- google-cloud-spanner
- google-gemini
- gpt-5-mini
- graphql
- grpc
- hono
- html5
- hugging-face
- inngest
- instrument-serif
- java
- javascript
- jax
- jest
- jetpack-compose
- jspdf
- jsx
- kotlin
- kubernetes
- langchain
- laravel
- lit
- llamaindex
- lucia
- lucide-react
- markdown
- mongodb
- motion
- mysql
- nestjs
- netlify
- next.js-16
- next.js-api-routes
- nextauth
- npm
- npm-run-all
- nuxt
- openai-api
- paddle
- pinecone
- planetscale
- playwright
- postcss
- postgresql
- prettier
- python
- pytorch
- qwik
- radix-ui
- railway
- react-19
- react-dom
- react-flow
- react-hooks
- redis
- remix
- render
- rest
- ruby-on-rails
- rust
- s3
- shadcn/ui
- solid
- spring-boot
- sql
- stripe
- supabase
- supabase-auth
- svelte
- tailwind-css-4
- tailwind-merge
- tensorflow
- trpc
- tsx
- turso
- tw-animate-css
- typescript
- typescript-compiler
- vercel
- vercel-ai-sdk
- vitest
- vue
- webpack
- websockets
- zod
- zustand
Log in or sign up for Devpost to join the conversation.