Skip to content

PLAN.md

Latest commit

 

History

History
183 lines (137 loc) · 5.57 KB

PLAN.md

File metadata and controls

183 lines (137 loc) · 5.57 KB
Raw

Stack-Detector — Development Plan

A viral, single-click utility to instantly reveal the tech stack of any website. "Font-Stealer" for the entire backend.

A. Vision

What It Is

A lightweight web application (and potential browser extension) that analyzes a given URL and displays its underlying technology stack—frameworks, CMS, analytics, fonts, server software, and more.

Why It Matters

  • Curiosity: Developers constantly wonder "How was this built?"
  • Competitive Intelligence: Founders need to know what tools competitors use.
  • Simplicity: Existing tools (Wappalyzer, BuiltWith) are often clunky extensions or paid/enterprise-focused. We want the "Font-Stealer" vibe: fast, free, visual, and extremely shareable.
  • Viral Growth: High shareability factor ("Check out my stack!") drives traffic back to Reality Shifting Tech.

Design Principles

  1. Speed: Analysis must happen in < 3 seconds.
  2. Visual First: Logos and clean UI over raw text lists.
  3. One Click: No sign-up, no barriers. URL -> Result.

B. Target User Experience

Core Flow

  1. Landing Page: Minimalist input field: "Enter a URL to reveal its stack."
  2. Analysis: Loading state with "Scanning headers...", "Analyzing DOM...", "Checking scripts..." animation.
  3. Results Card:
    • Frontend: React, Vue, Svelte, Tailwind, etc.
    • Backend/Server: Node.js, Python, Nginx, Vercel, Netlify.
    • CMS/Platform: Shopify, WordPress, Webflow.
    • Tools: Google Analytics, Stripe, Intercom.
  4. Share Action: "Share this Stack" button generates a clean image or link preview.

Advanced Usage (Future)

  • Comparison: "Compare with [Competitor URL]"
  • History: "Recent scans" (local storage)

C. Technology Stack

Framework

  • Next.js 14 (App Router): For server-side rendering, API routes, and SEO.
  • TypeScript: Type safety for analysis logic.

Core Dependencies

  • Wappalyzer (Core): wappalyzer (npm package) for the detection engine.
  • Cheerio / Puppeteer: For fetching and parsing page content if Wappalyzer needs a browser context (or lightweight HTML parsing).
  • Tailwind CSS: For rapid, beautiful UI.
  • Framer Motion: For the "scanning" animations and result reveals.

Infrastructure

  • Vercel: Hosting and serverless functions (handling the analysis API).
  • Redis (Optional): Caching results for popular URLs to reduce re-scanning.

D. Project Structure

/
├── app/
│   ├── api/
│   │   └── analyze/      # API route: receives URL, runs detection, returns JSON
│   ├── components/
│   │   ├── SearchBar.tsx
│   │   ├── ResultCard.tsx
│   │   └── StackIcon.tsx
│   ├── layout.tsx
│   └── page.tsx          # Main landing + results view
├── lib/
│   ├── detector.ts       # Wappalyzer wrapper / custom heuristics
│   └── utils.ts
├── public/
│   └── icons/            # Fallback icons
└── styles/
    └── globals.css

E. API Design

POST /api/analyze

  • Input: { "url": "https://example.com" }
  • Output: 
    {
  "status": "success",
  "data": {
    "domain": "example.com",
    "technologies": [
      { "name": "Next.js", "category": "Framework", "icon": "nextjs.svg" },
      { "name": "Vercel", "category": "Hosting", "icon": "vercel.svg" },
      { "name": "Tailwind CSS", "category": "UI", "icon": "tailwind.svg" }
    ],
    "screenshot": "https://..." (optional)
  }
}

F. Feature Breakdown

Phase 1: MVP (The "Viral Utility")

  • Input field for URL.
  • Server-side analysis using standard headers + HTML scraping.
  • Clean display of detected technologies.
  • Mobile-responsive design.

Phase 2: Polish & Shareability

  • "Share" button generating a social card image (OG Image generation).
  • "Popular Stacks" ticker.
  • Dark mode default (developer aesthetic).

Phase 3: Extension

  • Chrome Extension wrapper that injects the analysis into the current tab.

G. Testing Strategy

Unit Tests

  • Test the detector.ts logic with known HTML snippets.
  • Validate URL validation logic.

Integration Tests

  • Test the API route with live URLs (e.g., scan google.com, vercel.com) to ensure non-empty results.

Manual Testing

  • Test with SPA (Single Page App) sites vs. static sites.
  • Test with site redirects.

H. Build & Release

Build

  • Standard Next.js build.

CI/CD

  • GitHub Actions to run linting and type checking on push.
  • Vercel automatic deployments.

I. Documentation

README

  • Install: npm install, npm run dev
  • Architecture: Explanation of the Wappalyzer integration.
  • Contributing: How to add new detection rules.

J. Implementation Checklist

Setup

  • Initialize Next.js project (TypeScript, Tailwind, ESLint).
  • Configure shadcn/ui (optional, for fast components).

Core Logic

  • Implement lib/detector.ts using wappalyzer or similar library.
  • Create API route /api/analyze to handle requests.
  • Handle CORS and rate limiting (prevent abuse).

Frontend

  • Build SearchBar component with validation.
  • Build ResultCard to display categories (Frontend, Backend, etc.).
  • Add loading skeletons/animations.

Polish

  • Add error handling (invalid URL, timeout).
  • Optimize icons (use a CDN or local set).
  • Add "Built by Reality Shifting Tech" footer.

Status: Ready for Implementation