DealDash

Problem

Influencer marketing agencies juggle dozens of simultaneous deals across WhatsApp conversations, spreadsheets, and email threads. There was no single tool purpose-built for the Arabic/MENA influencer marketing workflow.

• Deal data scattered everywhere: Deal terms lived in WhatsApp, profile screenshots, and manually-updated Google Sheets — making audits painful.
• Manual contract generation: Copy-pasting deal parameters into contract templates was slow and error-prone.
• No structured deal status tracking: Teams had no visibility into which deals were active, pending payment, or flagged.
• Profile discovery friction: Quickly capturing influencer profile links and stats from Instagram/TikTok required screenshot juggling with no context.

Research & Discovery

As both the builder and a practitioner familiar with influencer marketing workflows, the research was observational and workflow-mapping based:

• Workflow mapping: Traced the complete lifecycle of a deal from initial outreach to payment confirmation, identifying every manual hand-off and tool switch.
• Pain point ranking: Deal history retrieval and contract generation were the two highest-friction points.
• WhatsApp-first insight: Most deal conversations happen on WhatsApp — any tool that didn't meet users in WhatsApp would face adoption resistance.
• Existing tools audit: Ground Truth, Influencer.co, and Creator.co all solve agency-scale problems but ignore the small-to-mid operator working primarily from WhatsApp.

Key insight: The right solution isn't just a dashboard — it needs to reach into WhatsApp (via a Chrome extension side panel) and capture deal data where it already lives.

Solution & Approach

DealDash is a multi-surface deal management system comprising four components that work together:

1. Web App — Central command: manage deals, run the pricing calculator, view history, manage contacts.
2. Backend API — Express + Drizzle + Supabase/Postgres; handles authentication, business logic, and all data persistence.
3. WhatsApp Chrome Extension — Side panel extension that lets agents capture deal data from an active WhatsApp conversation without leaving the chat.
4. LinkShot Chrome Extension — Instant screenshot + OCR tool for capturing influencer profile data (followers, stats) with automatic URL and timestamp metadata.

Architectural decisions:

• pnpm monorepo to share TypeScript types across web, API, and extensions — eliminating drift between surfaces.
• Drizzle ORM for type-safe SQL queries without the weight of Prisma.
• MV3 Chrome extensions (React-based) using the Side Panel API for non-intrusive UX that doesn't disrupt workflow.
• Google Sheets as backup/export — early versions used Sheets as primary storage; later migrated to Postgres while keeping Sheets sync for user comfort.

Features & Functionality

Core Features:

• Deal creation & contract generation — form-based input generates populated contracts instantly
• Deal history — searchable, filterable table with 5 status types (Active, Finished, Unpaid, Pending, Flagged) and color-coded badges
• Pricing calculator — flexible view format support (4m, 100k notation), platform-aware pricing
• Contact management — influencer profiles linked to deal history
• Templates — customizable contract templates with placeholder variables
• Tasks / reminders — linked to deals for follow-up management
• Teams / collaboration — multi-user support for agency workflows
• Dark/light mode — persisted user preference

Hero Features:

WhatsApp Extension (Side Panel): Opens as a Chrome side panel alongside WhatsApp Web. Agents can create or update a deal record directly from an active conversation — the profile URL, username, and any deal notes are captured without switching tabs.

LinkShot Extension: One-click screenshot capture with automatic OCR text extraction and URL/timestamp metadata. Designed for quickly archiving influencer stats pages (follower counts, engagement). Images and extracted text are attached to the deal record in DealDash.

AI-Ready Architecture: The backend exposes a structured API surface designed for autonomous AI agent consumption — schema-typed routes, typed deal status enums, and an AGENTS.md for agent onboarding. The AI schema endpoint (/server/routes/ai-schema.ts) provides machine-readable route contracts.

Test Coverage:

• Unit: 89/89 passing
• Integration: 127/127 passing
• E2E: 155/155 passing (Playwright)
• Security: 0 high vulnerabilities (pnpm audit)

Design & UX

Design philosophy:

• Professional and minimal — no gradients, no emoji in UI, no visual noise
• Utility-first with Tailwind CSS 4 + shadcn/ui components
• Accessibility-first component library (shadcn = WCAG-compliant by default)
• Dark mode with smooth transitions and localStorage persistence

Key UI decisions:

• Status badges use semantic color coding: green (Active), amber (Pending), red (Unpaid), slate (Finished), orange (Flagged)
• Side panel extensions use the Chrome Side Panel API — no modal popups, no tab hijacking
• Inter typography with JetBrains Mono for URLs and contract code fields
• Consistent 4px spacing scale throughout

Accessibility:

• Keyboard navigable forms and tables
• Focus rings on all interactive elements
• shadcn/ui primitives are screen-reader tested

User Flow — Deal Creation:

flowchart TD
    A["Agent opens DealDash or WhatsApp Extension"] --> B["Enter deal parameters\n(platform, views, stories, price)"]
    B --> C["Select or create influencer contact"]
    C --> D["Auto-generate contract from template"]
    D --> E["Review & edit contract inline"]
    E --> F["Copy contract / send via WhatsApp"]
    F --> G["Deal saved to history\nwith 'Pending' status"]
    G --> H{"Deal outcome?"}
    H -->|"Payment received"| I["Mark as 'Finished'"]
    H -->|"No payment"| J["Mark as 'Unpaid'"]
    H -->|"Issue flagged"| K["Mark as 'Flagged'"]

Technical Architecture

Tech Stack:

Architecture Overview:

graph TB
    subgraph "User Surfaces"
        WA["WhatsApp Extension\n(Chrome MV3 Side Panel)"]
        LS["LinkShot Extension\n(Chrome MV3)"]
        WEB["Web App\n(React + Vite)"]
    end
    subgraph "Backend"
        API["Express API\n(Node.js 22)"]
        AUTH["Auth Layer\n(JWT + Google OAuth)"]
        JOBS["Background Jobs"]
    end
    subgraph "Data"
        DB["PostgreSQL 15\n(Supabase)"]
        GS["Google Sheets\n(Backup/Export)"]
    end
    subgraph "Shared"
        TYPES["shared/\nTypeScript types\n+ utilities"]
    end

    WA -->|REST| API
    LS -->|REST| API
    WEB -->|REST| API
    API --> AUTH
    API --> DB
    API -.->|sync| GS
    API --> JOBS
    TYPES --> WEB
    TYPES --> API
    TYPES --> WA
    TYPES --> LS

Notable technical challenges:

• Monorepo type sharing — /shared package provides a single source of truth for deal types, status enums, and validation schemas used across all four surfaces, preventing the type drift common in multi-surface products.
• MV3 extension constraints — Chrome MV3's service worker model required moving OCR processing to an offscreen document in the LinkShot extension.
• AI-agent readability — Routes and schema were designed with structured contracts in mind (ai-schema.ts endpoint), making the API consumable by autonomous agents without human documentation lookup.

Process & Iteration

Phase 1 — Google Sheets MVP: Started as a simple React app backed by Google Sheets via Apps Script. Quick to build, validated the core deal management workflow with real users.

Phase 2 — Database migration: Moved primary persistence to PostgreSQL/Supabase while retaining Google Sheets as a familiar backup/export layer. Drizzle ORM added type safety to all queries.

Phase 3 — Extension development: Added the WhatsApp side panel extension to address the core discovery: deal capture needed to happen inside WhatsApp, not as a separate tab-switching workflow.

Phase 4 — LinkShot + AI readiness: Added OCR capabilities to LinkShot for profile stat capture. Refactored API surface to be AI-agent compatible. Added comprehensive test coverage (89+127+155 tests).

Key pivot: Initially designed extensions as standalone tools. Repositioned them as components of the DealDash ecosystem — data captured in extensions flows directly into the web app's deal records.

Outcomes & Impact

• Test suite: 371 tests passing (89 unit + 127 integration + 155 e2e), 0 high security vulnerabilities
• Full-stack coverage: Single codebase spans 4 user surfaces — web app, API, 2 Chrome extensions
• AI-ready architecture: Structured API contracts, typed schema endpoint, AGENTS.md onboarding — designed for autonomous agent consumption
• (estimated) Time savings: Reducing deal creation from a 5-minute manual workflow (WhatsApp → Sheets → contract template) to under 60 seconds
• (estimated) Error reduction: Type-safe schema + structured status tracking eliminates the ambiguity of spreadsheet deal tracking

No public user metrics available (private deployment). Qualitative outcome: the system handles the full deal lifecycle — from first contact capture to payment confirmation — without requiring the user to leave their primary tools.

Reflections

What went well:

• The monorepo architecture paid dividends — adding the second extension was straightforward because types were already shared
• Test coverage from day one meant aggressive refactoring was safe and fast
• The AI-readiness design turned out to be forward-thinking as LLM-based workflow automation became more relevant

What I'd do differently:

• Start with the API-first approach rather than the Google Sheets MVP — the migration created some technical debt
• Reduce any usage in route handlers earlier (flagged in the 2026-02-18 codebase review as a priority)

Skills demonstrated:

• Full-stack product engineering (React, Node.js, PostgreSQL)
• Chrome extension development (MV3, Side Panel API, offscreen processing)
• Monorepo architecture and shared type systems
• AI-agent-ready API design
• Comprehensive test strategy (unit + integration + e2e)