Case Study: Building an Interactive Dashboard with AI
Explore the live dashboard
Filter the Netflix catalog by region, genre, and popularity — then export your shortlist.
The Business Challenge (The Friction) Deploying custom, interactive discovery applications for large-scale enterprise datasets typically creates a heavy engineering bottleneck. Building a bespoke web application to explore 7,786 streaming catalog titles across 40 multi-dimensional fields—integrating geographical mapping, four-quadrant scatter matrices, dual-axis yield charts, and CMS-backed case study portals—demands cross-functional resources:
- High Development Overhead: Building such an application via traditional full-stack engineering requires 100+ hours across frontend UI development, data parsing, caching layer design, and interactive charting.
- State & Filter Complexity: Implementing 10+ synchronized filtering criteria (hierarchical macro-region to country drill-downs, dual-range runtime sliders, season steppers, and rating/vote thresholds) frequently introduces render bugs, state-update race conditions, and URL query synchronization failures.
- Performance & Data Friction: Delivering smooth client-side filtering on multi-megabyte payloads (6MB raw sheet data) often leads to sluggish browser repaints, Webpack bundle timeouts, and delayed stakeholder decision-making.
The Solution Architecture (The Build)
The application was built as a Next.js 15 single-page application using TypeScript, Tailwind CSS, and Cursor IDE’s AI agent to orchestrate the codebase from natural language specifications to production deployment:
[Live Data Sources]
└── Notion CMS Hub (Executive Summaries & Case Study Sub-Pages)
│
▼
[Server-Side Ingestion & Performance Layer]
├── Node HTTPS Streaming & Local Disk Caching (data/.sheet-cache.json)
├── 5-Minute Stale-While-Revalidate Background Polling
└── Payload Stripping (Synopses deferred to on-demand server reads)
│
▼
[State Management & Filter Engine]
├── Decoupled URL Query Synchronization (useCallback + useEffect)
└── Multi-Tier Filter Rail (Macro-Region, Country, Decades, Imputation Toggle)
│
▼
[Interactive Presentation Modules]
├── Module A: Regional Choropleth Map (Dynamic Geo-Zoom & Treemap Fallback)
├── Module B: Genre Yield Analyzer (Dual-Axis Volume vs. Engagement)
├── Module C: 4-Quadrant Catalog Matrix (TMDb Popularity vs. IMDb Rating)
├── Module D: Dynamic Title Leaderboard (50/Page Virtualization & Binge Badges)
└── Module E: Notion Case Studies Hub (/case-studies & /case-studies/[slug])
- Tool Selection: Next.js 15 (App Router) and Tailwind CSS provided a responsive UI aligned with modern enterprise design standards. Google Sheets served as the lightweight live database, while the Notion API (ZainNotionAPI) allowed dynamic editorial management of portfolio case studies without code redeployments.
Governance & Quality Controls (The Guardrails)
To guarantee production reliability, prevent AI-generated architectural hallucinations, and preserve data integrity, human-in-the-loop review was integrated across four prompt iterations:
- Architectural & Bundle Optimization: When dynamic chunk loading caused a client-side crash (ChunkLoadError: ChoroplethInner failed), the AI agent was directed to bundle the choropleth map directly into the core dashboard, pairing it with an automatic treemap fallback to eliminate blank render states.
- State Mutation Integrity: Intercepted a React state collision (Cannot update Router while rendering DiscoveryAppInner) by instructing the agent to decouple router.replace URL query synchronization from the component’s immediate filter state dispatches into a dedicated useEffect hook.
- Data Transparency & Edge-Case Remediation:
- Added a Metric Transparency Toggle in the UI, enabling users to audit raw verified catalog telemetry versus modeled values (Data_Imputed = True).
- Corrected empty regional visualizers for MENA by identifying conflicting scatter plot box-selections, updating geographic country-to-region taxonomy mappings, and adding automated map bounding-box zoom.
- Security & Payload Safeguards: Protected API tokens (NOTION_API_KEY, Notion Hub IDs) within .env.local to prevent credential exposure. Optimized first-contentful-paint (FCP) by caching parsed CSV data to local disk and deferring 7,800-row print table DOM generation until user export.
Measurable Business Impact (The ROI)
Traditional Coding vs. AI-Orchestrated Build Benchmark
Google Sheets CSV client, disk cache, stale-while-revalidate | 18.0 hrs | 0.75 hrs | 17.25 hrs | | Filter Rail & Dynamic State Engine
Cascading geo-filters, dual sliders, decoupled URL sync | 24.0 hrs | 1.00 hrs | 23.00 hrs | | Interactive Visualization Modules
Choropleth map, treemap fallback, 4-quadrant scatter, dual-axis yield chart | 32.0 hrs | 1.25 hrs | 30.75 hrs | | Table Virtualization & Recommenders
Paged leaderboard, similar titles engine, Binge-readiness badges | 16.0 hrs | 0.50 hrs | 15.50 hrs | | Notion CMS Hub Integration
Notion API client, dynamic routing, thumbnail parsing, fallback seeds | 14.0 hrs | 0.75 hrs | 13.25 hrs | | Bug Fixing, QA & Bundle Optimization
Chunk timeout resolution, React state fixes, MENA filter debugging | 10.0 hrs | 0.50 hrs | 9.50 hrs | | Total Project Effort | 114.0 hrs | 4.75 hrs | 109.25 hrs |
Financial Return & Operational Impact
- Direct Labor Cost Savings: At an industry standard rate of $95.00/hour for a Full-Stack / BI Engineer:
- Turnaround Acceleration: Slashed end-to-end software delivery turnaround from an estimated 3–4 weeks to less than one single working day (a 95.8% reduction in cycle time).
- Reusable Portfolio Infrastructure: Established a plug-and-play architecture that enables new Notion-backed case studies and live Google Sheet dashboards to be connected in minutes at zero incremental engineering overhead.