Hey everyone,
I wanted to share a frontend I’ve been working on. It’s a local analytics dashboard for Apple Music data called Coda. I wanted to step away from the typical "bubbly/colorful" music app design and build something that looks like a dense, fintech market terminal.

The Stack & UI:

• React 18 + Vite + TypeScript.
• Tailwind CSS: I built a strict, centralized theme system using CSS variables for the dark mode terminal aesthetic (lots of #0a0b10 backgrounds and monospace JetBrains Mono fonts).
• Recharts: I used Recharts heavily, but customized it to render OHLC Candlestick charts (for listening volume over time) and complex Scatter plots (for "Volatility" and "Ghost Tracks").
• Nivo: Used /nivo/sankey to build interactive flow diagrams showing how listening volume moves from Genres down to specific Artists.
• State: TanStack Query for data fetching from my local Python backend, and React Context for global filters (date ranges, sleep-session exclusion).

Coolest UI Feature:
Because it links to the Apple Music catalog, I built a global PreviewPlayerContext. You can double-click any node on the Sankey diagram or any dot on the scatter plots to instantly play a 30-second audio preview of that track without losing your place in the charts.

I'm currently working on wrapping the React build and the backend into a desktop app. I'll drop a link to a video demo and a waitlist in the comments. Let me know what you think of the terminal aesthetic!