Hi 👋 ! Thanks for considering Bigeye! We're excited you've decided to interview with us.
For this portion of your interview, you will be live-coding a simple Design System in React and TypeScript which we have already scaffolded for you. Your React app will display some data from the API server included in this repo.
We're going to make a design system that helps us make a form. This form will be used for a newsletter signup.
The design and mocks are in a link that will be sent to you separately.
This project is a create-react-app scaffold. To set up the project, install all project dependencies with npm install. You should then be able to work on the code with the command npm run start.
As this is create-react-app, you can use CSS and CSS Modules. If you wish to use Sass, you can install it with npm install sass. More info about Sass can be found in the CRA docs.
Your task is to create a small design system of components, with the end goal of building this form. All of the visual assets you need are in the Figma Mocks.
Specifically, you should create basic design system components for the following:
- Header
- Body Text
- Input Group (with variant for description)
- Button
By the end, you should be able to construct a page with the signup form.
- Create a system for organizing brand and product colors
- Adding additional input variants from the designs (readonly/required, description, character count)
- A demo page with the variants you've made