Summit Chase Client Intelligence Platform, Client Portal V2 interactive POC
Built the front-end proof-of-concept for a B2B agency's proprietary Client Intelligence Portal, replacing a fragile Supermetrics → Sheets → Looker Studio reporting stack for 34+ clients across 12+ ad platforms. Delivered as one self-contained HTML file with vanilla JavaScript and hand-rolled SVG charts, covering every platform page (Google, Meta, LinkedIn, TikTok, Microsoft, Reddit, OpenAI), plus Campaigns, Conversions, a config-driven multi-funnel CRM view, and a WebGL geomarketing globe. Established a reusable convention set, sortable tables with totals and paging, selectable multi-metric trends, per-cell deltas, single-ring donuts, and lineage columns, and config-driven conversion labels sourced from the Admin rather than hardcoded. Because the build agent could not see its own output, stood up a headless Chromium screenshot pipeline (resolving a missing X library) so every page was visually verified against its mockup before hand-off.
Every page was screenshot-verified through a headless Chromium pipeline before it shipped, so nothing was ever built blind.
Role: Product/UX architect and sole implementer of the front-end POC, directing an AI build agent (Cowork) page-by-page
The Problem
The agency's current reporting stack (Supermetrics → Google Sheets → Looker Studio) is fragile, manual and does not scale to 34+ clients across 12+ ad platforms. The team needs a proprietary Admin + Client portal reading a BigQuery warehouse and Supabase metadata, but the client-facing UX had to be validated before committing backend engineering.
Build a pixel-faithful, fully interactive multi-page dashboard (per-platform pages, Campaigns, Conversions, CRM Funnel, Geomarketing) as a single self-contained HTML file using vanilla JS and inline SVG charts, with reconciling metrics, config-driven labels, sortable tables, selectable trends, and a WebGL globe, all verifiable without a browser in the loop.
One ~370KB single-file vanilla-JS artifact with no framework; every metric had to reconcile to page totals; conversion labels and funnel stages had to be config-driven (decided in the Admin), not hardcoded; multi-tenant conventions had to hold; and the agent could not 'see' its own output, forcing construction of a headless screenshot verification pipeline to stop building blind.
Approach & Architecture
Rebuilt each portal page against supplied mockups under a strict 'add, never remove' rule, applying a consistent convention set: sortable tables with Total rows and pagers, selectable 3-metric trend charts, per-cell vs-prev deltas, single-ring donuts, and lineage columns in every Performance Explorer. Introduced reusable systems (a data-driven 'View all' modal, config-driven conversion labels, chart primitives) and a headless render-verification loop so every page was screenshot-checked before delivery.
One HTML file with an app-shell CSS grid (244px sidebar + scrollable main), a renderPage(key) switch that toggles .page.on visibility and calls per-page render functions, hand-written SVG chart helpers, and a global pick/selector + sortable-table framework. A workspace-sandbox bash environment runs playwright-core against a bundled Chromium to screenshot each page for visual verification, then the file is synced to the user's demos/ folder.
Key Decisions & Trade-offs
Hardest Part
Being unable to see the rendered output caused repeated 'it doesn't look like the mockup' rework; fixed by getting a headless Chromium running in the sandbox (resolving a missing libXdamage.so.1 via apt-get download + dpkg-deb + LD_LIBRARY_PATH) so every page could be screenshot-verified before hand-off.
Technical Detail
Portal reads (design intent): BigQuery marts (mart_paid_media_overview, mart_conversion_summary, mart_crm_funnel_) + Supabase metadata (clients, conversion_mappings, campaign_classifications, dashboard_settings). POC itself uses synthetic in-file data.
Front-end target Next.js 15 + Netlify (production); the POC is a static HTML file. Verification via a Linux sandbox running playwright-core + Chromium 1134.
Per-page headless screenshots at multiple scroll offsets and viewport sizes; JS syntax gate via new Function over each <script> block; md5 sync check between scratch output and the workspace demos/ copy.
Code
apt-get download libxdamage1 dpkg-deb -x libxdamage1_.deb /tmp/libs export LD_LIBRARY_PATH=/tmp/libs/usr/lib/aarch64-linux-gnu node /tmp/shot.js # playwright-core + chromium-1134, screenshots each .page
const m=[...h.matchAll(/<script>([sS]?)<\/script>/g)];
m.forEach((x,i)=>{try{new Function(x[1])}catch(e){console.log('script',i,'ERR',e.message)}});The entire POC was constructed inside Claude 'Cowork' mode: the human specified requirements and pasted mockups; the agent edited a single HTML file with file tools, ran bash to headlessly render and screenshot each page, read the screenshots back, and iterated until the render matched the mockup. A tight build→render→verify loop replaced a designer + front-end pair.
A repeatable headless render-verification routine (Chromium screenshot per page) used as the acceptance step for every UI change.
Measured Results
Produced an interactive, headlessly-verified multi-page Client Portal V2 POC covering all paid-media platform pages plus Campaigns, Conversions, CRM Funnel and Geomarketing, with reusable config-driven systems (conversion labels, chart primitives, a data-driven 'View all' modal). It is a validated UX reference for the production build; all displayed figures are synthetic demo data.
| Metric | Value | Before | Source |
|---|---|---|---|
| POC single-file size Artifact size, not a business result | ~370KB | n/a | file inspection in-chat |
Every figure above was recorded during the work itself. Where no number was measured, none is claimed.