Vapor

Vapor turns whiteboard sketches into interactive React Native apps in seconds. Snap a photo, preview live, and push production code straight to GitHub.

Comment

Inspiration

Every great software product begins with a sketch: a rough drawing in a notebook, a wireframe diagrammed on a conference room whiteboard, or ideas scribbled on a coffee shop napkin.

However, the friction between drawing a wireframe and interacting with a live mobile prototype is traditionally massive. Designers spend hours recreating mockups in Figma, and mobile engineers spend days translating visual layouts into Flexbox stylesheets and boilerplate state trees. By the time a prototype is ready to test, the initial creative momentum has evaporated.

We built Vapor to obliterate this latency. Our goal was simple: point your smartphone camera at any hand-drawn wireframe, press snap, and hold an interactive, touchable mobile prototype in your hands 10 seconds later with clean React Native code pushed straight to your GitHub repository.

How We Built It

Vapor is built on a high-performance, modern full-stack mobile architecture combining React Native (Expo), RevenueCat Subscriptions & Paywalls, Mastra Multi-Agent AI Swarm, and GitHub REST APIs.

   ┌─────────────────────────────────────────────────────────────┐
   │                  VAPOR MOBILE APP (Expo)                    │
   │   • Camera / Sketch Upload    • Live Interactive Preview    │
   │   • RevenueCat Paywalls       • GitHub OAuth & Push         │
   └──────────────────────────────┬──────────────────────────────┘
                                  │ SSE Stream & Photo Upload
                                  ▼
   ┌─────────────────────────────────────────────────────────────┐
   │              VAPOR BACKEND SWARM (Mastra + Express)         │
   │                                                             │
   │   1. Visionary Agent  ───► Semantic Layout JSON             │
   │   2. Engineer Agent   ───► Responsive UI Synthesis          │
   │   3. QA Critic Agent  ───► $\text{Score} \ge \theta$ Audit  │
   └─────────────────────────────────────────────────────────────┘

1. Client-Side Engineering & Image Optimization

To enable fast photo uploads on mobile data connections, we implemented client-side image downscaling and quantization using expo-image-manipulator. If a raw mobile photo has dimensions $W_0 \times H_0$ and file size $S_0$, we rescale it to a bounded bounding box:

$$\text{scale factor } \alpha = \min\left(1.0, \, \frac{1024}{\max(W_0, H_0)}\right)$$

$$(W_{\text{new}}, H_{\text{new}}) = \left(\lfloor \alpha \cdot W_0 \rfloor, \, \lfloor \alpha \cdot H_0 \rfloor\right)$$

This dropped average wireframe payload sizes from $\sim 10\text{ MB}$ down to $\sim 250\text{ KB}$ (an $85\%$ bandwidth reduction), cutting upload latency significantly:

$$T_{\text{upload}} = \frac{S_{\text{compressed}}}{\text{Bandwidth}} \ll \frac{S_{\text{raw}}}{\text{Bandwidth}}$$

2. Multi-Agent AI Compiler Swarm (Mastra Pipeline)

Instead of relying on a single monolithic LLM prompt (which frequently hallucinated layouts), we designed a 3-Agent Specialized Swarm:

  1. The Visionary Agent: Parses raw wireframe imagery to extract spatial hierarchy, bounding boxes, navigation topology, and color cues into structured JSON.
  2. The Engineer Agent: Ingests the JSON schema and compiles interactive HTML5/CSS and React Native JSX components using an injected design token system.
  3. The QA Critic Agent (Vapor Pro): Audits the generated component for accessibility, responsiveness, and contrast, computing a quality score $\mathcal{Q} \in [0, 5]$. If $\mathcal{Q} < \theta_{\text{threshold}} = 4.0$, it automatically initiates a corrective rewrite iteration:

$$\text{Approved} = \begin{cases} \text{True}, & \mathcal{Q} \ge 4.0 \ \text{False (Trigger Rewrite)}, & \mathcal{Q} < 4.0 \end{cases}$$

All agent lifecycle milestones (visionary:start, engineer:done, critic:review) stream directly to the smartphone in real-time over Server-Sent Events (SSE).

3. RevenueCat SDK & Tier Gating

We integrated RevenueCat to create a seamless freemium-to-pro developer experience:

  • Entitlement Gated: Vapor Pro unlocking 3-Pass Critic Loops, Theme Customization, and Direct GitHub Exports.
  • Dynamic Offerings: Configured with 3 flexible plans:
    • Monthly: $\$9.99/\text{mo}$ (Cancel anytime)
    • Yearly: $\$79.99/\text{yr}$ (Save $35\%$)
    • Lifetime: $\$149.99$ (One-time payment)
  • Native Paywalls & Customer Center: Deep integration with react-native-purchases-ui for frictionless native paywall presentation and subscription self-management.

4. GitHub OAuth & Git Commit Engine

Users can connect their GitHub account via OAuth or Personal Access Tokens. With one tap, Vapor compiles the live prototype into a standalone .tsx component and executes an authenticated PUT commit directly to the user's remote repository branch.

Challenges We Faced

  1. Universal Cross-Platform Native Bundling: react-native-purchases and expo-haptics rely on native iOS/Android bridge binaries. When compiling the project for Web (localhost:8081), the Metro bundler crashed on native module lookups. We resolved this by architecting platform-gated dynamic loaders and sandbox mock layers, allowing the exact same codebase to run seamlessly in desktop browsers and mobile devices.

  2. Real-Time Agent Thought Streaming to Mobile: Delivering live reasoning feedback without blocking UI interactions required building a resilient SSE client in React Native that handles chunked JSON payloads, auto-reconnects, and triggers micro-haptic pulses as each agent completes its step.

  3. Compiler Resource Limits During Release Build: When building the final Android Release APK, Gradle encountered out-of-disk errors on the primary system drive. We resolved this by relocating Gradle cache roots ($env:GRADLE_USER_HOME) and Java temporary directories (-Djava.io.tmpdir) to high-capacity storage drives and eliminating package version mismatches between Expo SDK 57 and native Android modules.

What We Learned

  • Monetization as a Core UX Feature: RevenueCat's SDK made managing complex in-app subscriptions, entitlements, and customer centers effortless compared to building custom receipt validation backends.
  • Agentic Multi-Pass Reflection: Separating parsing (Visionary), synthesis (Engineer), and evaluation (Critic) drastically improved code correctness and layout fidelity over single-shot generation.
  • Cross-Platform Velocity: React Native paired with Expo's modern compiler ecosystem allowed us to build a production-grade camera app, prototype preview engine, and subscription paywall with unprecedented speed.

What's Next for Vapor

  • Multi-Screen Navigation Flows: Sketching arrows between screens on a whiteboard to automatically generate multi-route React Navigation stacks.
  • Design System Import: Connecting Figma token libraries so synthesized components adhere strictly to existing company design systems.
  • Supabase / Firebase Backend Generation: Automatically pairing UI forms with generated database tables and backend APIs.
Share this project:

Updates

Submission history