Applicants for the UI/UX Engineer role at Wave must complete the following challenge, and submit a solution prior to the on-site technical interview.
The purpose of this exercise is to create something that we can work on together during the on-site. We do this so that you get a chance to collaborate with Wavers during the interview in a situation where you know something better than us (it's your code, after all!).
We also want to give you a feel of what you could expect to work on in this role. You will be required to work extensively with React in this role, so we would like to evaluate your skills using React with this exercise.
There isn't a hard deadline for this exercise; take as long as you need to complete it. However, in terms of total time spent actively working on the challenge, we ask that you not spend more than a few hours, as we value your time and are happy to leave things open to discussion in the on-site interview.
Feel free to email [email protected] if you have any questions.
Imagine that the design team at Wave has recognized two places that use a similar UI component to provide insights to our users. We want to formalize this by implementing a reusable component in our design library. (Think of this component as a Lego block that can be used in multiple places.)
You have been provided with this Figma file outlining the design details of this component. (You will be able to view the file without an account, but will need to be logged into a free Figma account to view elements' detailed properties in Figma's Inspect panel). If you are not familiar with using Figma, start on this page where we have included some basic tips on using the tool. Please use your judgement when referencing the CSS generated by Figma in the Inspect panel, as it's often overcomplicated or includes unnecessary properties.
- Implement the Insights component as a React component, using Typescript or Javascript. (The project is set up to support either, but there are bonus points for using Typescript.)
-
Implement styling for the Insights component using SCSS or vanilla CSS. (The project is set up to support either.)
a) The Figma designs use Lato as the font (Regular and Bold). This font is available through Google fonts.
b) Do not use Styled Components as our current ecosystem does not support this and we want to evaluate you based on what you’ll actually be working with in this role. -
Use Typescript or PropTypes to define appropriate datatypes for your component.
-
Implement the component to work on at least one of the following sizes as defined in the Figma file:
a) Wide screen sizes
b) Medium screen sizes
c) Narrow screen sizes -
Update the App.tsx file to render/use your insights component.
-
Optional: Write test(s) for your component. We know you might be pressed for time, so we won’t consider the absence of tests as a negative. (The project is set up to use Enzyme or React Testing Library)
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Please answer the following questions by committing your answers to this README.md
- How did you test/verify that your implementation was correct?
- Would you make any further changes to your solution before shipping/releasing?
- What compromises, if any, did you have to make as a result of the time constraints of this challenge?
- What assumptions, if any, did you have to make to complete this exercise?
- Clone the repository. (please don't push your code submission as a public branch of this repo)
- Complete your project as described above within your local repository.
- Ensure everything you want to commit is committed.
- Create a git bundle:
git bundle create your_name.bundle --all - Email the bundle file to [email protected] and CC the recruiter you have been in contact with.
- Did you follow the instructions for submission?
- Does your submission implement the insights component?
- Did you complete the steps outlined in the Documentation section above?
- Does your solution use appropriate data types?
- Can your component be easily used on multiple pages?