Exchange1 Analytics
Campaign analytics dashboard with spreadsheet-driven data
A programmatic-advertising dashboard where non-technical stakeholders update a live report by drag-dropping the agency's Excel export. Server-side parsing, Firebase session-cookie auth, platform→creative→size drill-downs and demographic breakdowns, every chart hand-rolled in SVG.
The Problem
The client's campaign report had 27 days of numbers hard-coded in JavaScript; every update meant editing code and redeploying.
The Solution
Next.js App Router with server components: uploaded sheets are parsed server-side with SheetJS, published to Firestore, and archived to Cloud Storage, with a 5-tier data-source fallback so the dashboard always renders. Auth uses the correct Firebase SSR pattern: Admin-SDK-minted http-only session cookies verified at the edge proxy and on every server page.
Architecture
- Next.js 16 App Router, React Server Components, TypeScript
- Firebase session-cookie auth: ID token → createSessionCookie → http-only cookie → edge verification
- SheetJS server-side parsing with header normalization and computed CTR/CPM
- Atomic data grain (platform×creative×size×day) rolled up into three-level drill-downs
- Hand-rolled animated SVG charts, no chart library
Challenges & How I Solved Them
Firebase auth that works with SSR
Client-side Firebase auth breaks server rendering; session cookies minted by the Admin SDK give every server component verifiable identity, with logout revoking refresh tokens.
My Contributions
- Entire dashboard: auth architecture, data pipeline, visualizations
Impact
- Report updates went from code-change-and-redeploy to drag-and-drop
Lessons Learned
Most dashboards die at the data-entry step: meeting the client at 'upload the Excel you already have' is the whole product.