Challenge
This project had to do more than show attractive charts. It needed to support real media-buying workflows with operational clarity: Meta Ads diagnostics, profit reading, deep-dive analysis, alerting, and a protected product surface that could scale beyond a static mock.
Role
I treated it as a true product dashboard rather than a portfolio concept. The work combines interface density, data readability, route architecture, and practical delivery concerns such as auth, billing, database migrations, and Cloudflare-compatible backend behavior.
System
The product is built on a Vite + React + TypeScript front end with Tailwind styling, ECharts for charting, TanStack Table for dense data views, and Cloudflare Pages Functions for API logic. The codebase also includes D1-backed auth and subscription foundations, protected app routes, and Google Sheets-driven data ingestion.
Interactions
- KPI and diagnostic panels are tuned for fast operational scanning rather than presentation-only dashboards.
- Tables, deep-dive views, and alerts support denser decision-making without losing hierarchy.
- Public routes, login flows, and protected app areas show that the product surface can extend beyond the dashboard itself.
Implementation
- Multi-route product shell covering overview, Meta performance, alerts, profit, clients, and settings.
- Cloudflare Pages Functions for auth, billing, subscription, and data endpoints.
- D1 migrations and account logic to support a real SaaS foundation instead of a front-end-only mock.
Outcome
- The portfolio gains a stronger analytics and operations register grounded in an actual application codebase.
- It shows that I can work across UI, product structure, and delivery logic when a project needs more than a polished front end.
- It complements the more editorial portfolio pieces with a denser, more technical product example.