- Install pnpm
pnpm installpnpm devand then view athttp://localhost:3000/pnpm run test
- Bill summary is hard-coded, but would come from an API
- Copy is hard-coded, but could use an i18n micro-service
- User isn't able to go back and change payment details
- Rounded line-height values when moving from pixels to relative
- Validating fields on blur, but could be on change, or submit instead
- No designs for other button states
- Design tokens are in
globals.css, but should be imported from the design system - There are some obvious gaps in test coverage, but this is a quick example
- Create
<Input>and<Button>components - Build the page layout form
- Add state management to handle the flow
- Add field validation
- Fix up the styling to match designs
- Add unit test coverage with react-testing-library
Your assignment will be evaluated by both an engineer and a designer on the following criteria:
- Adherence to provided requirements
- Code structure, readability, and maintainability
- UI design fidelity & attention to detail
- Error handling and validation
- Test coverage and quality
- Accessibility (ie. semantic HTML elements, ARIA attributes, keyboard navigability)
- Thought process and rationale behind design decisions