Frontend Developer project
Build an accessible analytics dashboard
A dashboard that a keyboard-only user and a screen reader user can both operate — the single most common gap in junior frontend portfolios.
The brief
Build a single-page analytics dashboard for a fictional e-commerce store. It shows four summary tiles, one time-series chart, and a sortable table of the ten most recent orders. Data comes from a local JSON file you commit with the project — no backend. Every control must be reachable and operable by keyboard alone, and the chart must have a text alternative that conveys the same information as the visual.
Suggested stack
What you hand in
- A public GitHub repository with the running app and a README
- The README explains how to run it and lists the accessibility decisions you made
- A short section in the README naming one thing you would improve with more time
Grading happens against the rubric below, so read it before you start — not after.
How this is graded
Published in advance and weighted out of 100. Nothing here is a surprise.
Every interactive control is reachable by Tab in a sensible order, has a visible focus style, and can be activated with Enter or Space. Sorting the table works without a mouse.
Native elements are used before ARIA. The table is a real table with headers. The chart has a text alternative or a data table conveying the same information. Nothing relies on colour alone.
Components have one clear job and are reused rather than copy-pasted. State lives at the level that needs it, not all at the top.
A reader who has never seen the repo can run it in under two minutes and understands what decisions were made and why.
No console errors, no broken layout below 400px, no leftover placeholder text or commented-out code.
Why this project is worth your weekend
- Accessibility is the fastest way to look senior in a junior portfolio, because most candidates skip it entirely.
- Dashboards are the most common first ticket at a product company — tiles, a chart, a table.
- It is easy for an interviewer to check in sixty seconds: they press Tab.
Where people lose points
- Using a div with an onClick instead of a button, which breaks keyboard access silently.
- A chart with no text alternative, leaving the main content invisible to a screen reader.
- A README that only says 'npm install && npm run dev'.
Other Frontend Developer projects
Two or three of these turn an empty resume into a portfolio.
Built it? Get it scored against this rubric.
Submit your work and get a score on every criterion above, written feedback, and three resume bullets you can use straight away.