Anatomy of a Social Media Dashboard

1. Data layer

Real dashboards pull from platform APIs (Meta Graph API, X API, YouTube Data API). For a portfolio project, start with a mock API: a JSON file or a tiny Express route that returns the same shape. You just used one — the platform buttons above swap datasets exactly like an API call would.

2. KPI cards

Every dashboard leads with 3–5 KPI cards: current value + delta vs previous period. The formula that matters: engagement rate = (likes + comments + shares) / impressions × 100. Compute deltas server-side so all clients agree.

3. Charts

Time-series (followers over time), bar (posts per day), and donut (traffic sources) cover 90% of needs. Libraries: Chart.js for speed, D3 for control, or raw canvas/WebGL like this page. Always label axes and show the period being compared.

4. State & filters

The time-range slider is your core state exercise: one piece of state (range) drives every widget. In React that's a context or a store; the key learning is single source of truth — no widget fetches its own range.

5. Auth & rate limits

Real APIs need OAuth 2.0 tokens and enforce rate limits (e.g., hundreds of requests per 15-minute window). Cache responses (Redis or even localStorage) and refresh on an interval, never on every render.

Build order that works

1. Static layout with fake numbers
2. Mock API + fetch layer
3. One chart wired to real state
4. Filters (platform, date range)
5. Loading/error/empty states
6. Swap mock for a real API last