← Back to live dashboard

How We Built the Creator Analytics & AI Insights Dashboard

A behind-the-scenes look at how the Python + Next.js stack, Supabase Postgres, and motion design come together to power the live analytics experience on Code With Ash.

High-level architecture

The Creator Analytics dashboard is intentionally polyglot. The UI is built with Next.js and React, while the analytics and AI layer runs in a separate Python FastAPI service. Data is stored in Supabase Postgres, so the dashboard reads from the same type of database used across other Code With Ash projects.

  • Frontend: Next.js App Router, Tailwind CSS, GSAP-powered motion.
  • Backend: FastAPI, SQLModel, psycopg, with a clean REST API.
  • Database: Supabase Postgres tablecontentmetricsrow seeded with creator content metrics.

Data model and Supabase integration

Each piece of content—like a YouTube video or mobile app tutorial—is represented as a row in Supabase. The schema tracks platform, cumulative views, likes, comments, and timestamps for when content was published and last updated.

The Python service connects to Supabase with a DATABASE_URL environment variable. SQLModel handles table creation and queries, so the FastAPI endpoints can stay focused on analytics rather than SQL boilerplate.

Analytics API design

The API is intentionally minimal but expressive. A small set of endpoints covers the most important dashboard use cases:

  • GET /analytics/summary — returns totals and engagement rate for a given lookback window.
  • GET /analytics/top-content — ranks content by engagement score.
  • POST /ai/insights — synthesizes narrative-style insights based on the same metrics.

This separation makes it easy to swap in a real LLM later without changing the frontend contract.

Motion and interaction design

The dark dashboard intentionally leans into a cinematic analytics aesthetic. GSAP orchestrates entrance animations for the header, metric tiles, and top content rows, while hover states add subtle depth with glows and micro-movements.

The light article page you are reading now is deliberately calmer: fewer animations, more whitespace, and typography tuned for reading long-form content. Together, the two pages form a narrative pair:experience the product first, then learn how it was built.

Why this project matters

Creator Analytics & AI Insights shows how modern engineering teams can mix technologies comfortably: React on the front, Python on the back, and a managed Postgres in the middle. It is intentionally small enough to teach from, but real enough to extend into things like scheduled sync jobs, API-based data ingestion, and LLM-powered content recommendations.

What's next

Future iterations will experiment with real-time ingestion from creator platforms, richer time-series visualizations, and a fully hosted Python backend so the analytics API is available outside local development. There is also room to turn the insights endpoint into a true prompt-engineered LLM surface.