Skip to content

Latest commit

 

History

History
54 lines (33 loc) · 2.72 KB

README.md

File metadata and controls

54 lines (33 loc) · 2.72 KB
Raw

Extend UI Take Home Exercise

This is an exercise that will give you a glimpse of responsibilities of a UI engineer at Extend.

In this challenge, we'd like to re-create the frontend for the protection plan offers modal. Someone will provide the access to the Figma file as core reference, and your task is to build a pixel-perfect, fully-interactive user-interface (UI).

Acceptance Criteria

  • The modal should be built with progressive enhancement principles in mind (mobile-first).
  • Pay close attention to the style attributes as hinted by Figma. Our designers will screening for styling accuracy of your submission in relation to the shared previews.
  • Make sure that the solution is readable. A frontend engineer will be screening for readability.

Instructions

  1. Visit the Figma file here to access the design mocks
  2. Clone this repository on your local drive to locally develop.
  3. To bootstrap the repository, run:
$ yarn
$ yarn start
  1. Open localhost:6006 on your browser to track your progress. There should be a single UI component labeled as "Offers Modal" to preview the state of your changes.

(Preview of running the CLI to start local development)

Screen.Recording.2021-07-15.at.10.46.24.AM.mov

(Preview of what to expect from localhost) image

  1. Update the class names, IDs, and/or identifiers on the JSX file as needed inside OffersModal.jsx, and customize your styles inside offers-modal.css. Good luck!

Hints

We want to make sure that the UI matches the mocks as accurately as possible. Storybook's toolbar located at the top of the canvas: image

Contains several utilities for inspecting your element's measurements and calculated gap values. Ones worth exploring are:

The viewport inspector to toggle the preview of your elements between small mobile (portrait/landscape modes), large mobile (portrait/landscape modes), and full desktop mode.

Screen.Recording.2021-07-19.at.11.00.37.AM.mov

The element inspector to inspect the paddings/margin/sizes of the HTML Element that's in-focus/on-hover.

image

Questions / Feedback

If you run into any bugs and/or issues with setting up your local environment, or have a question regarding the acceptance criteria, reach out to the hiring manager.

Good luck!