How would you design and build a shared component library (design system) used by several product teams?
What the interviewer wants to hear
- Design tokens for colour, spacing and typography, with theming
- Accessible, composable component APIs
- Versioning with semver, changelogs and migration guides
- Documentation and a playground like Storybook
- Testing: unit, visual regression and accessibility
- Governance and contribution process with design
Model answer
I would start with design tokens for colour, spacing, radius and typography, stored as data and exported to CSS variables so themes like dark mode are just token swaps. Components should be accessible by default, so I build on proven primitives such as Radix or React Aria for focus, keyboard and ARIA behaviour. APIs should be small and composable, for example compound components and an asChild or slot pattern instead of dozens of props. I ship it as a tree-shakable package with TypeScript types, versioned with semver, changesets and clear migration notes for breaking changes. Storybook serves as documentation and a playground. Each component has interaction tests, visual regression tests and axe checks in CI. Finally, I set up governance with designers so teams can contribute without the library fragmenting.
Can you answer it under time pressure?
Take a timed hard round and get scored on every answer.
More hard Frontend Developer questions
- A page must show a table with 50,000 rows and stay smooth while scrolling and filtering. How would you build it?
- What are the main security risks for a frontend application and how do you protect against them?
- Your company wants to split a large frontend into micro-frontends. What are the trade-offs and how would you approach it?
- What are React Server Components, and how do they change the way you build a React app?
- How would you design a web app that keeps working offline, for example for field workers with poor connectivity?
- You join a team with a large JavaScript React codebase. How would you migrate it to TypeScript without stopping feature work?
- How would you build the frontend for a real-time feature like a shared task board where many users edit at the same time?
- Users report that your single-page app becomes slow and crashes after being open for a few hours. How do you investigate and fix it?
- How do you know your frontend is healthy in production? Describe the monitoring you would set up.