React Dashboard
Fintech Analytics Dashboard
A React dashboard for payments-style data — charts, filters, and a table, with API-shaped JSON and keyboard-friendly rows.
- Client: Personal project
- Date: March 2025
- Role: Frontend
- Category: React Dashboard
- Timeline: 6 weeks
I built this as a Next.js practice project for dense product UI: a persistent filter bar, a main chart, and a table underneath. Metrics come from JSON shaped like a REST payload so the pattern would transfer to a real endpoint.
The challenge
Tutorial dashboards skip filters and error states. I wanted a layout that still works when the request is slow, empty, or fails, and a table a keyboard user can scan.
The approach
React state owns the filters. Recharts draws the main chart. TypeScript keeps the metric shape honest. I used AI to refactor repetitive table cells, then reviewed the diff before committing.
The outcome
On GitHub and Vercel. Adding a metric is a data change, not a layout rewrite — the same habit I would use on an internal tools team.