Software Engineer · intermediate
Accessible Component Library with Automated a11y Testing
A typed React component library documented in Storybook, with automated accessibility checks and visual regression tests that block a pull request when a component breaks.
Project overview
Frontend portfolios are usually a pile of finished apps, which say nothing about how you build. A component library says the opposite — it shows API design, typing discipline, and accessibility as a tested requirement rather than an afterthought. Accessibility is also a legal requirement at most companies, so proving you can automate it is directly valuable.
Real-world use case
A product team standardizing on a design system needs shared components that stay accessible and visually consistent as a dozen engineers modify them every week.
Tools and technologies
- React
- TypeScript
- Storybook
- axe-core
- Playwright
- GitHub Actions
Skills you can demonstrate
Component Architecture, Accessibility (WCAG), Visual Regression Testing, TypeScript, CI/CD
Build roadmap
- Scaffold the library
Set up React with TypeScript and Vite in library mode, then add Storybook. Get one trivial component rendering in Storybook before adding anything else. - Build 5–6 real components
Button, Input, Modal, Tabs, Toast. Choose components with genuine interaction complexity — a div with styling teaches nothing and proves nothing. - Get the accessibility right
Add the Storybook a11y addon and fix every violation. Use the AI prompt below for the hard ones. Test each component with keyboard only and a screen reader. - Automate the a11y checks
Wire axe-core into Playwright so your stories are scanned automatically. A component with a violation should fail the test run, not just show a warning. - Add visual regression testing
Set up Chromatic or Playwright snapshots to catch unintended visual changes. Deliberately break a style and watch the diff get flagged. - Gate it in CI
Run both suites in GitHub Actions on every pull request. Open a PR that introduces a violation and screenshot CI blocking it — that screenshot is the whole project in one image.
Ways to extend the project
Publish the library to npm and consume it in a separate demo app, so you have proven the full authoring-to-distribution loop rather than just a local Storybook.
How to showcase your work
- GitHub: Repo with the components, a published Storybook (free on Chromatic or GitHub Pages), and CI runs visibly passing accessibility checks.
- LinkedIn: Post a recording of navigating your components with keyboard only, plus a CI run catching an accessibility regression before merge.
- Resume: Focus on "Accessible component architecture (WCAG 2.1)", "Automated a11y and visual regression testing", and "TypeScript".