The purpose of the assignment is to give us an understanding of how you approach a problem and understand your thought process.
Furthermore we would also like to see what you chose to focus on, to get an insight into how you work.
Argue for any decisions made and write your thoughts and potential next steps if given more time, in the readme.
We expect you to use AI to solve this task.
When sending back the task, please invite the person who sent you the assignment to your repo and tell us how much time was spent on the task.
- Click "Use this template" to create your own copy of this repository, and make it private
- Make sure you have Node 20.19 or newer (
node -vto check) - Run
npm installandnpm run dev. The app runs on sample data, so there's nothing else to set up. Check-ins reset when you reload the page - Describe your design decisions and setup instructions in the README.md of your repository
This repository contains a small app for a nursery. It's put together from seven modules in /src/modules. Each module was built by a different team over the last few years, and each team styled things in its own way, using our design system. The design system only has primitive tokens (for example P400), so teams pick primitives directly, and in places they've given up and hardcoded values instead.
The app is also white-labelled: it ships under several brands, defined in /src/themes, and it has to look right in all of them.
We'd like you to take this app and its design system somewhere better. You'll probably want to start by getting a picture of where things stand today. From there, we're curious how you'd evolve the token system so teams are better set up to make the right choices without having to think too hard about it.
Teams have also been asking for a shared Button, so building one that every module can use is part of this too. You'll find the design and spec in Figma, and we'd like to see it brought to life faithfully.
A system only matters once it's in use, so bring as much of your work into the app as you can in the time you have. You don't need to get through everything; we'd rather see a smaller amount done well, with a clear sense of what you'd tackle next.
How you split your time between these is up to you.
It has to be done using TypeScript. We recommend that you don't spend more than 4 hours on it.
In your README, tell us:
- what you did, and why you prioritised it that way
- what you would do next with more time
- how you used AI
If you have any questions feel free to reach out to the person who sent you the assignment.