Data Dashboard
Not a mockup with fake numbers — a real data pipeline. Coca-Cola stock ticker data imported, stored in a database, and rendered as interactive charts.
Most dashboard projects use hardcoded fake data. This one doesn't. Real Coca-Cola stock ticker data was imported as a CSV, stored in Supabase, and visualized with Recharts — creating a genuine data pipeline from source to screen. This is the point where design meets backend thinking.
A data grid with sorting, filtering, search, and pagination — all pulling from a live Supabase database. A separate Insights page with three Recharts visualizations built on real KO stock data. Each layer — database, API, chart — had to be built, tested, and connected before the next one could start.
Real Data. Real Pipeline.
Three layers had to work together: a CSV dataset imported into Supabase, a database integration that stored and served the data on demand, and a Recharts frontend that fetched and visualized the result. That sequencing — thinking in data layers, not just screens — is what this project taught. You can't design a good data dashboard without understanding how the data moves.
Three Charts. One Story.
The Insights page translates raw stock ticker rows into readable visual patterns — price trends over time, volume distribution, and performance comparisons. Each chart was built with Recharts, pulling live from the Supabase table — meaning the data and the visualization stay in sync automatically.
Full Data Pipeline Built
CSV → Database → Chart.
A complete pipeline from raw CSV to live database to interactive visualization — not a prototype with fake data, but a working system powered by real Coca-Cola stock ticker data.
Backend Thinking Unlocked
Schema shapes design.
For the first time, design decisions were shaped by data structure: what columns exist, what Supabase returns, what Recharts can render. That constraint is how real product design works.
Data Visualization in Code
Three charts. Built in Recharts.
Built three chart types in Recharts from scratch — going from a design idea to a working, data-connected visualization without touching a charting tool like Figma or Miro.
- Data and function are the experience.
A dashboard with fake hardcoded data teaches you nothing about how data shapes design decisions. Using real stock ticker data forced me to think about schema, missing fields, and edge cases — all things that change the UI.
- Build in layers, not all at once.
Database first. Visualization second. Trying to build both simultaneously would have been chaos. The pipeline approach — verifying each layer before connecting the next — is how real engineering teams work.
- Designers who understand data pipelines are rare.
Most designers stop at the mockup. Understanding how data moves from a CSV to a database to a chart component is a skill most design teams don't have. This project gave me that fluency.