Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

158 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BeforeYouBuild Logo

BeforeYouBuild

Know if your startup idea is worth building. In 60 seconds.

Stop wasting months on ideas nobody wants. Get an AI-powered market validation report — competitor analysis, market sizing, MVP roadmap — before you write a single line of code.


React TypeScript Claude AI Supabase Tailwind CSS Vite


🚀 Live Demo · 📖 Setup Guide · 🐛 Report Bug · 💡 Request Feature


🎯 The Real Problem We're Solving

Every day, thousands of founders waste months building products nobody wants.

A student in Pune spends 6 months building a food delivery app → launches → gets 0 users.
Why? He never validated if the market actually wanted it.

BeforeYouBuild fixes this. Type your idea, get a full AI market research report in 60 seconds — before writing a single line of code.

Who uses this?

🎓 College Students 🚀 First-time Founders 💼 Freelancers & SaaS Builders
Have a startup idea but don't know if it's worth building before dropping semesters on it Before pitching to investors, validate your assumptions with real market data Unsure about competition? Get clarity on your niche instantly

✨ Features

🤖 AI-Powered Market Validation

  • Uses Claude Sonnet 4 with live web search to research your idea in real time
  • Returns a brutally honest, structured report — not generic fluff
  • India-first context: UPI, kirana, tier-2, D2C, and more

⚡ Spark — Floating AI Chat Agent

A persistent AI advisor that lives on every page of the site:

  • Powered by Claude Haiku 4.5 for fast, cheap conversational responses
  • Spark persona — a YC-trained startup advisor, sharp and direct
  • Nudge bubble appears after 8 seconds to prompt engagement
  • Starter prompts, full conversation history, unread dot indicator
  • One-click link to the full validation report from inside the chat

📊 Full Validation Report (7 Scored Sections)

Section What You Get
🔥 Verdict HOT / CAUTION / DEAD — one sharp sentence why
📈 Scores Market Size, Competition, Timing, Buildability (each /10)
🎯 The Problem Who feels it daily, current solutions, payment moment
👤 Ideal Customer ICP profile, where they hang out, what they currently use
💰 Market Size TAM / SAM / SOM with India-first context
⚔️ Competitors Top 3 with weaknesses and threat levels (HIGH/MEDIUM/LOW)
🛠️ MVP Roadmap 3 core features + first 100 users acquisition playbook

🎨 Premium UI / Design System

  • Animated dot-grid hero background with floating colour blobs
  • Live idea counter with count-up animation (2,847+ validated)
  • Typing placeholder in the textarea — cycles through 5 startup ideas with a blinking cursor
  • Scrolling ticker bar showing recent HOT / CAUTION / DEAD verdicts
  • AI Live Terminal mockup that streams analysis steps and loops automatically
  • "What AI Analyses" grid — 7 coloured cards, one per report section
  • Scroll-reveal on every section (IntersectionObserver, no library)
  • Animated score bars on sample report cards (CSS @property + keyframes)
  • Rotating gradient CTA border (conic-gradient via @property)
  • Animated star ratings that pop in one by one on scroll
  • Nav scroll-state — stronger blur + glow shadow after 50 px scroll
  • Newsletter row in footer with success state

💳 Pricing Tiers

Free Pro — ₹499/mo Startup — ₹1,499/mo
2 validations/month Unlimited validations Everything in Pro
Full AI report PDF export 5-seat team access
Web view Saved history (30 reports) API access
Priority AI model Priority support (2h SLA)

🔐 Authentication

  • Google OAuth via Supabase
  • Magic Link email login (no password needed)
  • Free-tier usage tracking per user per month

🛠️ Tech Stack

Frontend       →  React 19 + TanStack Router + TanStack Start
Styling        →  Tailwind CSS v4 + Custom Design System
AI (Reports)   →  Claude Sonnet 4 (claude-sonnet-4-20250514) + Web Search Tool
AI (Agent)     →  Claude Haiku 4.5 (claude-haiku-4-5) — fast chat responses
Auth + DB      →  Supabase (Google OAuth + Magic Link + Postgres)
Payments       →  Stripe (Checkout + Webhooks)
Build          →  Vite 7 + Bun
Deploy         →  Cloudflare Workers (via Wrangler)
Typography     →  Space Grotesk (headings) + Inter (body) — Google Fonts

🚀 Quick Start

Prerequisites

  • Bun installed (curl -fsSL https://bun.sh/install | bash)
  • A Supabase project
  • An Anthropic API key ← required for both validator + Spark agent

1. Clone the repo

git clone https://github.com/Suraj-kummar/BeforeYouBuild.com.git
cd BeforeYouBuild.com/idea-spark

2. Install dependencies

bun install

3. Configure environment variables

cp .env.example .env.local

Fill in .env.local:

# ── Supabase ───────────────────────────────────
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here

# ── Anthropic (Claude AI) ──────────────────────
# Powers BOTH the full validator AND the Spark AI agent
ANTHROPIC_API_KEY=sk-ant-your-key-here

# ── Stripe (optional for payments) ────────────
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
STRIPE_PRO_PRICE_ID=price_...
STRIPE_STARTUP_PRICE_ID=price_...

# ── App URL ────────────────────────────────────
APP_URL=http://localhost:8080

4. Run locally

bun run dev

Open http://localhost:8080 🎉

Note: Restart the dev server after editing .env.local — environment variables only load at startup.


📁 Project Structure

idea-spark/
├── public/
│   ├── logo.png                 # Full wordmark logo
│   └── logo-icon.png            # Icon / favicon
├── src/
│   ├── components/
│   │   ├── AIAgent.tsx          # ⚡ Spark — floating AI chat agent (new)
│   │   ├── SiteNav.tsx          # Sticky navbar with scroll-state + mobile menu
│   │   └── SiteFooter.tsx       # Footer with newsletter row + social icons
│   ├── lib/
│   │   ├── agent.ts             # ⚡ Claude Haiku server fn for Spark chat (new)
│   │   ├── validate.ts          # Claude Sonnet + web search server fn
│   │   ├── supabase.ts          # Supabase client + auth + usage tracking
│   │   ├── checkout.ts          # Stripe checkout session server fn
│   │   └── stripe.ts            # Stripe webhook handlers
│   ├── hooks/
│   │   └── useSubscription.ts   # Current user plan hook
│   ├── routes/
│   │   ├── __root.tsx           # Root layout — mounts AIAgent globally
│   │   ├── index.tsx            # Landing page (hero, ticker, AI terminal, CTA)
│   │   ├── app.tsx              # Idea input + loading stepper
│   │   ├── report.tsx           # Full validation report (7 sections)
│   │   ├── report.$id.tsx       # Shareable report by ID
│   │   ├── history.tsx          # Saved reports history
│   │   ├── pricing.tsx          # Pricing tiers + comparison + FAQ
│   │   ├── login.tsx            # Google + magic link auth
│   │   └── checkout/            # Stripe checkout success/cancel pages
│   └── styles.css               # Design system — dark theme, animations, utilities
├── .env.example                 # Environment variable template
└── vite.config.ts               # Vite + TanStack Router + Cloudflare config

🎨 Design System

Built on a premium dark-first design system with a full emerald green brand identity.

Background:    #0A0A0A   (near black)
Surface:       #111111   (card backgrounds)
Surface+:      #161616   (elevated elements)
Primary:       #10B981   (emerald green)
Primary Glow:  #34D399   (lighter emerald)
Text:          #FAFAFA   (near white)
Muted:         #737373   (secondary text)
Destructive:   #EF4444   (red — "DEAD" verdict)
Warning:       #F59E0B   (amber — "CAUTION" verdict)

Animations

Utility Effect
animate-fade-up Element slides up + fades in on load
animate-scale-in Element scales from 96% → 100%
text-shimmer Gradient headline sweeps continuously
animate-float Gentle bob up/down (floating icons)
animate-blob Organic shape morphing background blobs
animate-ticker Infinite horizontal scroll ticker
animate-glow-border Pulsing emerald border glow
cta-spin-border Rotating conic-gradient border via @property
bar-fill-anim Score bar fills from 0 → target % on scroll
star-anim Stars pop in one-by-one with spring easing
reveal / reveal-left / reveal-right Scroll-reveal via IntersectionObserver
dot-grid Animated dot-grid background (pure CSS)
nav-scrolled Stronger blur + glow applied after 50px scroll

🔌 Claude API Integration

Full Validator (validate.ts)

Uses Claude Sonnet 4 with the web search beta tool for real-time market research:

export const validateIdea = createServerFn({ method: "POST" })
  .handler(async ({ data }) => {
    const response = await fetch("https://api.anthropic.com/v1/messages", {
      headers: {
        "anthropic-beta": "web-search-2025-03-05",  // 🔍 Live web search
      },
      body: JSON.stringify({
        model: "claude-sonnet-4-20250514",
        tools: [{ type: "web_search_20250305", max_uses: 5 }],
        // Returns strict JSON with all 7 report sections
      }),
    });
  });

System Prompt: YC-trained startup analyst — brutally honest, India-aware, returns strict JSON.

Spark AI Agent (agent.ts)

Uses Claude Haiku 4.5 for fast, cheap chat responses:

export const chatWithAgent = createServerFn({ method: "POST" })
  .handler(async ({ data }) => {
    const response = await fetch("https://api.anthropic.com/v1/messages", {
      body: JSON.stringify({
        model: "claude-haiku-4-5",   // Fast + affordable for chat
        max_tokens: 512,
        system: AGENT_SYSTEM_PROMPT, // "Spark" persona — YC advisor
        messages: data.messages,     // Conversation history (last 10)
      }),
    });
  });

Persona: "Spark" — a sharp, friendly AI startup advisor. Speaks like a smart YC-batch friend. Short, punchy answers. India-aware.


🗺️ Roadmap

  • Landing page with sample reports
  • AI validation with Claude Sonnet + web search
  • Full 7-section validation report
  • Supabase Google + magic link auth
  • Pricing page (Free / Pro / Startup)
  • Premium dark design system
  • Logo + favicon
  • Animated landing page (ticker, terminal, score bars, reveal)
  • Spark AI agent — floating chat on every page
  • Shareable report links
  • Saved report history
  • Stripe payments (in progress)
  • PDF export for Pro users
  • Team collaboration (Startup tier)
  • API access for developers
  • Mobile app (React Native)

📦 Download as Parts

The full project is also available as 20 split archives for easy sharing:

idea-spark-parts/
├── BeforeYouBuild.part01.bin  (~47 KB)
├── BeforeYouBuild.part02.bin
├── ...
└── BeforeYouBuild.part20.bin

Reassemble on Mac/Linux:

cat BeforeYouBuild.part*.bin > full.zip && unzip full.zip

Reassemble on Windows (PowerShell):

$parts = Get-ChildItem "BeforeYouBuild.part*.bin" | Sort-Object Name
$out = [IO.File]::Create("full.zip")
foreach ($p in $parts) { $b = [IO.File]::ReadAllBytes($p.FullName); $out.Write($b,0,$b.Length) }
$out.Close(); Expand-Archive full.zip .

🤝 Contributing

Contributions are welcome! Please:

  1. Fork the repo
  2. Create a feature branch (git checkout -b feat/amazing-feature)
  3. Commit your changes (git commit -m 'feat: add amazing feature')
  4. Push to the branch (git push origin feat/amazing-feature)
  5. Open a Pull Request

📄 License

MIT License — see LICENSE for details.


👤 Author

Suraj Kumar

Built by a student, priced for founders. 🇮🇳

GitHub


If this helped you validate a real idea, give it a ⭐

Stop building. Start validating.

About

AI-powered startup idea validator — get a market research report (competitor analysis, market sizing, MVP roadmap) in 60 seconds, before you write a single line of code. Built with React, Claude AI, and Supabase.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages