ChurnScope: Saving My Friend’s Startup from Silent User Drop-Off with Open AI & DOM Intelligence

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend What I Built The Story: Building for Marcus A few weeks ago, my close friend Marcus finally launched his bootstrapped SaaS after six months of late-night coding. He poured his savings into it, launched on Product Hunt, and drove over 2,000 visitors in his first 48 hours. He expected signups. Instead, he got silence. When Marcus opened his analytics dashboard, he saw a soul-crushing statistic: 73.9% of his visitors abandoned the site right at the registration step. He was overwhelmed. Traditional web analytics (like Google Analytics) gave him cold numbers telling him where users left, but left him completely in the dark about why. He tried watching session replay tools, but scrubbing through dozens of hours of video was exhausting and invasive from a user privacy perspective. Worse, commercial CRO (Conversion Rate Optimization) agencies quoted him $3,500 for a single audit-money an indie founder simply doesn't have. Watching a friend lose sleep and question his life's work wasn't an option. Over the weekend, I built ChurnScope for him. What ChurnScope Does ChurnScope is an automated website UX and user drop-off diagnostic engine. It bridges the gap between raw web traffic metrics and real frontend code: - Scrapes & Maps Live DOM Elements: Uses automated scraping to extract live page facts-form field counts, clickable button footprints, navigation depth, mobile viewport compression, and visual assets. - Correlates Telemetry in Real-Time: Ingests funnel drop-off logs (CSV/JSON) and matches friction spikes directly to physical UI culprits. - Plain-English Diagnoses (Zero Jargon): Translates dense technical issues into simple, empathetic explanations (e.g., "Your signup form demands 9 inputs upfront before demonstrating any product value. Cut it to 3 to recover up to 28% of abandoned users"). - Before/After ROI Modeling: Demonstrates mathematically how fixing specific bottlenecks increases conversion health. - Executive PDF & JSON Audits: Instantly generates a clean, downloadable 2-page audit report featuring friction gauges, drop-off bar charts, and an actionable developer remediation checklist. When Marcus ran his landing page through ChurnScope, the diagnosis took less than 15 seconds. It spotted a cramped 9-field desktop table that collapsed into an unclickable mess on mobile devices. He trimmed the form down to email and password, deployed the fix, and his signups increased by 31% within 72 hours. Demo - GitHub Repository: https://github.com/2007Talha/ChurnScope ### Core User Interface: - Interactive Health Dashboard: Visual friction score gauge (0-100), categorization across 4 dimensions (Navigation & Menus, Forms & Inputs, Visual Assets, Mobile Ergonomics). - Dual Visual Themes: Engineered with custom zero-glow B2B themes-Venom Dark Mode (pure pitch-black #000000 , crisp zinc borders, and stark white contrast) and Spider-Man Light Mode (crisp canvas with crimson accents). - Before / After Differential Engine: Interactive toggle demonstrating conversion lift projections when fixes are applied. Export Engine: Native 2-page print & vector PDF report generation with visual charts powered by client-side canvas rendering. --- ## Code --- ## How I Built It ChurnScope is designed with a strict engineering principle: Prefer being uncertain over being wrong. Every finding must have strict provenance back to a concrete DOM element. ### The 9-Stage Diagnostic Pipeline Target URL + Telemetry [1. SSRF Guard & Sanitizer] ▼ [2. Live DOM Extractor (Bright Data)] ▼ [3. Semantic Parser (Buttons, Forms, Viewports)] ▼ [4. Ephemeral Behavioral Minimizer (Zero-PII)] ▼ [5. Funnel-to-DOM Friction Correlation Engine] ▼ [6. Deterministic Mathematical Scoring Bounds] ▼ [7. Strict Provenance & Hallucination Gate] ▼ [8. Open-Weight LLM Plain-English Synthesis] ▼ [9. Interactive UI & 2-Page Executive PDF Export] 🔍 ChurnScope See your website through the eyes of your users. An automated website UX and user drop-off diagnostic engine powered by Bright Data Scraper Studio. 📖 Overview & The Problem Traditional web analytics tell you where users drop off, but leave you guessing why. Heatmaps and session replays require hours of manual scrubbing, while generic AI tools hallucinate recommendations that don't match your actual code or layout. ChurnScope bridges this gap: - Scrapes & Understands: Uses Bright Data Scraper Studio to extract live, structured website intelligence (DOM hierarchy, CTAs, navigation patterns, form complexity, cognitive loads). - Correlates User Behavior: Ingests funnel drop-off telemetry (CSV or JSON) and correlates high-friction drop-off steps directly with measured website facts. - Diagnoses in Plain English: Explains every insight, flaw, and solution in simple everyday language so founders and developers know exactly what is broken and how to fix it. - Exports Executive Reports: Generates structured JSON… Architecture & Technology Stack - Frontend & App Framework: Next.js 14 (App Router), React 18, TypeScript 5.6 (Strict Mode). - Styling & Motion: Tailwind CSS 3.4, Framer Motion, Lucide React. - Web Scraping Infrastructure: Bright Data Scraper Studio for server-side anti-bot bypassing and accurate SPA DOM extraction. - Open-Source AI & Agent Harness: - Integrated with open-weight models (Llama 3.3 70B and Mistral NeMo) running via local inference harnesses (Ollama / vLLM) with deterministic JSON guardrails. - The open-source model operates inside a quarantined JSON-schema boundary: the prompt is fed strictly verified website facts and telemetry metrics. The model synthesizes the findings into human, empathetic, jargon-free advice without hallucinating phantom elements. - Reporting Engine: jsPDF & html2canvas generating client-side, vectorized 2-page executive summary documents. - Security & Privacy Layer: Custom Server-Side Request Forgery ( SSRF ) validator blocking internal RFC1918 subnets, AWS/GCP metadata endpoints (169.254.169.254 ), and loopback addresses. ### Ephemeral In-Memory Privacy Architecture Unlike traditional analytics platforms that hoard raw visitor telemetry, ChurnScope implements ephemeral in-memory minimization: - Uploaded CSV/JSON event logs are parsed in transient server memory. - All PII (emails, names, IP addresses, session IDs) is automatically stripped on ingest. - The raw data is discarded within 14 milliseconds, retaining only aggregate drop-off percentages. Why Does Open Innovation Matter? When you build software for a friend, ethics, privacy, and accessibility become deeply personal. Closed AI APIs and proprietary analytics platforms carry three severe flaws: - Opaque Hallucinations: Closed black-box models frequently invent UX problems that do not exist in the DOM, giving founders bad advice that wastes engineering sprints. Open-weight models allowed us to inspect token probabilities, enforce JSON constraints, and verify provenance against exact CSS selectors. - Data Privacy & Telemetry Traps: Sending sensitive user funnel logs to closed commercial models often results in customer data being retained or used for model retraining. Open-weight models running locally or via self-hosted endpoints guarantee that no visitor data ever leaves the security perimeter. - Economics for Indie Builders: Bootstrapped creators and indie friends cannot afford $20/month per-seat fees or unpredictable closed-API token bills just to understand why their checkout isn't converting. Open-source innovation democratizes enterprise-grade conversion diagnostics for anyone with a browser and an idea. Open innovation made it possible to build a tool that belongs to the community-trustworthy, verifiable, and free from corporate rent-seeking. --- ## My Agent Session Developing ChurnScope over a fast-paced weekend was accelerated using autonomous coding agents for iterative pair programming. ### How the Agent Accelerated Development: - Security & SSRF Defense Hardening: The agent helped design and stress-test the isSafePublicUrl validator inssrfDefense.ts , ensuring that the scraper engine cannot be tricked into probing cloud instance metadata endpoints (169.254.169.254 ) or private RFC1918 subnets (10.0.0.0/8 ,192.168.0.0/16 ). - Deterministic Provenance Verification Engine: To adhere to our "Strict Provenance & Zero Hallucinations" rule, the agent scaffolded the verification pipeline in evidenceEngine.ts . Every single recommendation generated must bind to an audited DOM selector and an observed bounce rate. - Dual-Theme Design System: The agent configured the zero-glow B2B design system, crafting the high-contrast Venom Dark theme ( #000000 pitch black with crisp zinc borders) and Spider-Man Light theme with Crimson accents. - Client-Side Vector PDF Architecture: The agent helped calculate pixel-perfect coordinate grids for the 2-page executive audit in exportPdf.ts , ensuring the score gauge, bar charts, and developer checklist render cleanly across any browser without requiring headless Chromium on the backend. > All development commits, schema validations, and agentic workflows are documented directly in the ChurnScope GitHub Commit History. --- ## Prize Categories - Primary Track: Hacktoberfest Weekend Challenge: Build for a Friend - Partner Categories / Themes: Open-Source AI, Local Inference & Open Innovation, Privacy-First Architecture Built with ❤️ for Marcus and every indie developer fighting to turn their dream into a sustainable reality. Top comments (0)