orbitspy

byLucifer Nexgen

Build a production-ready, single-tenant micro-SaaS called "AdSpyZero: Competitor Ad Monitor". The application must be fully operational, heavily optimized for low code footprints to build successfully within 10 credits, and leverage an opinionated stack. ### 1. THEME & VISUAL DESIGN (Deep Space / Black Hole Aesthetic) - Colors: Primary background must be rich deep space black (#050508). Surface cards must use a translucent cosmic dark blue-gray (#0d0e15) with a subtle border (#1e2235). - Accents: Neon singularity violet (#8b5cf6), event horizon cyan (#06b6d4), and stellar amber (#f59e0b) for high-performance badges. - Effects: Use Tailwind's backdrop-blur-md, radical gradients (`bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]`), and subtle neon box-shadows to simulate an event-horizon glow around active data modules. ### 2. SYSTEM ARCHITECTURE & CODE CONSTRAINTS - Stack: Next.js (App Router), Tailwind CSS, Lucide Icons, SQLite (via Prisma or native Node-sqlite) for the database. - Credit-Saving Constraint: Do NOT generate placeholder tests, excessive microservices, or complex multi-role setups. Consolidate logic. Keep backend endpoints inside Next.js API routes (/app/api/). - Mock Infrastructure: Create an internal simulated worker service (`/lib/services/adScraperSim.js`) that mimics scraping and populates the database with realistic competitor ad mock data (Ad copy, image/video thumbnail URLs, status, active days, platform, and date detected) when a user adds a competitor URL. ### 3. CORE DATA MODELS (Prisma/SQL Schema) - User: id, email, passwordHash, activeSubscription (boolean). - Competitor: id, userId, name, websiteUrl, dateAdded, trackingStatus (Active/Paused). - AdCreative: id, competitorId, platform (Meta, TikTok, Google), adText, visualUrl, daysRunning, dateDetected, firstSeen, status (Active/Inactive). ### 4. FRONTEND UI & PAGES (Space-Themed Tailwind Canvas) Build a clean, high-conversion SaaS dashboard layout featuring: 1. Landing / Auth Page: Cinematic "Event Horizon" marketing layout. A massive typography hero section ("Pull Your Competitors' Strategies into the Event Horizon") set against a dark radial gradient background, with a translucent login/signup card. 2. Main Dashboard Layout: Fixed left sidebar with a futuristic control-panel layout (Dashboard, Tracked Competitors, Ad Archive, Billing) using subtle violet active-state text glows. 3. Dashboard Overview Page: - Cosmic Stat Cards: 4 glassmorphism cards displaying Total Tracked Competitors, Total Ads Monitored, Active Ads, and Average Ad Lifespan (Days). - "Pull Competitor URL" Input: A sleek, neon-bordered input field that accepts a website URL and triggers the mock automated scraping sync. - Singularity Alerts Feed: A clean list showing newly discovered competitor ads with a neon badge for the platform (e.g., Meta, TikTok) and "Days Running" count. 4. Competitor Detail View: Clicking a competitor reveals their specific grid of captured ad creatives. Each ad card must display the thumbnail, ad copy text, platform icon, date detected, and a glowing "Supernova Performance" fire badge if daysRunning > 14. 5. Billing Tab: A simple tier selection page displaying the $79/mo plan with a mock payment success trigger toggle to update `activeSubscription` state. ### 5. BACKEND API LOGIC - POST `/api/competitors`: Validates and adds a competitor URL. Instantly triggers the mock crawler function to generate 3-5 randomized ad creative entries attached to that competitor id so the UI instantly feels alive. - GET `/api/ads`: Fetches all tracked ads sorted by `daysRunning` desc or `dateDetected` desc with basic query filtering by platform. - DELETE `/api/competitors/[id]`: Removes a competitor and cascades deletes their tracked ads. Execute this design immediately across Frontend, Backend, and Database layers. Rely on clean Tailwind utility patterns. Focus strictly on a pristine, functional UI and bulletproof local mock-data persistence to keep execution under 10 credits.