Dash Decoder

Landing Page Repo | App Repo | Updated: June 22, 2025

An AI-powered mobile diagnostic tool that decodes car dashboard warning lights through your phone camera. Snap a photo of any warning light and get an instant diagnosis in plain English, without the panic or the mechanic visit.

Tech Stack: - JavaScript (frontend) - HTML/CSS (landing page) - Supabase (backend database and functions) - Vite (build tooling) - AI/ML (computer vision for dashboard light recognition)

Why I Built This

That moment when an unfamiliar warning light appears on your dashboard is universally stressful. Is it serious? Can I keep driving? Do I need to pull over immediately? Most people have no idea what the symbols mean, and searching online is frustrating when you're trying to describe an ambiguous icon you've never seen before.

I wanted to solve that anxiety with a simple mobile app: point your phone camera at the dashboard, snap a photo, and get an instant AI-powered diagnosis. No manual entry, no searching through symbol databases, no deciphering cryptic owner's manual diagrams. Just real-time recognition and a clear answer about what the light means, how urgent it is, and what to do next.

The opportunity was to combine computer vision for symbol recognition with an LLM for plain-English explanations. Dashboard warning lights are standardized enough to train a recognition model, but varied enough that you need intelligence to explain them in context. The result is a tool that turns panic into clarity in seconds.

How It Works

The architecture splits into two parts: a consumer-facing landing page for waitlist signups and the diagnostic application itself.

User Journey:

Landing Page (dash-decoder)
    ├── Waitlist Form (email capture)
    ├── Supabase Backend (signup storage)
    └── Real-time Counter (shows total signups)

Mobile App (dash-decoder-app)
    ├── Camera Interface (capture dashboard photo)
    ├── Vision AI (recognize warning light symbol)
    ├── Diagnostic Engine (lookup meaning + context)
    └── Plain-English Output (urgency + next steps)

The landing page is a conversion-focused single-page site built with vanilla JavaScript and Vite for the build pipeline. It uses Supabase for backend functionality: storing waitlist signups in a Postgres database and running edge functions to update the real-time signup counter. The page dynamically displays how many drivers have joined, creating social proof for new visitors.

The application backend handles the core diagnostic flow. When a user snaps a photo of their dashboard, the image is processed through a computer vision model trained on common warning light symbols (check engine, oil pressure, brake system, battery, etc.). The model identifies which light is active, then queries a diagnostic database for the meaning, severity level, and recommended action. An LLM formats the technical diagnosis into plain English that a non-expert can understand.

The split-repo approach keeps the high-traffic public landing page lightweight and separate from the private application logic. The landing page repo is fully open-source as a reference implementation for waitlist pages with real-time counters. The app repo houses the proprietary diagnostic logic and model integration.

What I Learned

Building a waitlist landing page taught me the importance of social proof and urgency. The real-time signup counter and "limited beta access" messaging significantly increased conversion rates compared to a static form. Supabase made it trivial to add backend functionality without managing servers - edge functions handle the counter updates, and the Postgres database scales automatically.

Computer vision for dashboard lights is harder than it looks. Warning light symbols vary by manufacturer, model year, and region. Training a robust recognition model requires a comprehensive dataset covering major brands and variations. The fallback path (asking the user to manually select the symbol if recognition fails) is essential for edge cases.

Plain-English explanations need to balance simplicity with accuracy. Early versions were too technical ("Check engine light indicates OBD-II code detected") or too vague ("Something's wrong with your engine"). The right approach is structured output: what the light means, how urgent it is (safe to drive / see mechanic soon / pull over immediately), and what specific action to take.

Separating the landing page from the app was the right architecture decision. It allowed rapid iteration on the marketing site without touching diagnostic logic, and it let me open-source the landing page as a learning resource while keeping the core IP private.

If I were building this again, I'd add a feedback loop where users can report if the diagnosis was accurate. That data would be invaluable for improving the recognition model and refining the diagnostic explanations over time.

An AI-powered tool that turns dashboard warning lights from sources of panic into moments of clarity.