Background
Dashboards appear in every analytics, HR, and ops product. Recruiters want to see you can turn JSON into scannable UI with filters, empty states, and responsive layout — not just a single static chart.
Your mission
Create a responsive analytics mini-dashboard in React or Next.js that visualizes career or job-search data. Use static JSON or generated mock data; focus on UI craft and interaction design.
Suggested data story
Track internship applications: stages (applied → interview → offer), companies, deadlines, or match scores. Alternatively: skill progress, networking touchpoints, or portfolio project metrics.
Requirements
- Two chart types minimum — bar, line, donut, area, etc. (Recharts, Chart.js, Visx, or similar).
- Filter controls — date range, status, company, or category; filters update charts and summary cards.
- Summary KPI row — at least three headline metrics (e.g. total apps, response rate, avg days in stage).
- Empty and loading states — skeletons or placeholders; never a blank white panel.
- Mobile breakpoints — usable at 375px width; document one layout decision in UX notes.
- Deployed demo (Vercel/Netlify) or
npm run dev with seed data committed to repo.
Recommended approach
- Define
data.json schema first; keep 20–50 realistic rows.
- Build desktop layout, then collapse filters into a sheet/drawer on mobile.
- Add a "Reset filters" action and show active filter chips.
- Write 150–250 word UX notes: hierarchy, color choices, accessibility.
Evaluation criteria
- Visual hierarchy — KPIs → charts → detail table/list.
- Interaction — filters feel instant; no full page reload required.
- Resilience — empty dataset still looks intentional.
- Code organization — components, hooks, or modules are easy to navigate.
Tips
- Prefer consistent chart colors tied to status (applied=blue, offer=green).
- Tooltips on charts are expected; label axes where space allows.
- Dark mode is a nice bonus, not required.
Submission checklist
