Welcome. This is a technical test with a real working project. It uses a number of front-end tools and technologies and it tests working knowledge of these tools. While there are a few components in the project, you will be working with the Button component. This test is intended to be submitted in the form of a ZIP or a linked repository or similar.
Carefully read the following, think about what is being tested for, and complete the steps for each section. Some sections can be completed and findings documented, while others will be in the form of code changes to this project. If you find that you can't complete a particular section, feel free to share your thinking, anything you tried that did not work, and any resources you used. Take as long as you need, but we would hope not to spend more than an hour or two of your time on this exercise.
Please zip your finished project repository into a single file excluding the node_modules directory (.cache, .git and dist are fine to include), and submit it to your primary contact person.
Get started by checking out the project and running the welcome script.
- Clone/install this repository
- Run the npm script
welcome - Update the file
answers/1-setup.mdwith responses to the questions you'll find there
- Ability to setup an existing front end project
- Ability to run npm scripts
- Capability with Git, node/npm
You need to onboard a new junior-level developer on the team. Explain to your teammate the tooling for this project.
- Examine the project code
- Update the file
answers/2-tooling.mdwith responses to the questions you'll find there
- Ability to clearly and simply explain technical concepts
- Ability to describe a FE project's tooling
- Familiarity with common tools and their purpose
- Understanding of configuration files and their purpose
We need to figure out what the last change to the code base was.
- Investigate the latest set of code changes
- Update the file
answers/3-code-review.mdwith responses to the questions you'll find there
- Capability with Git
- Ability to describe what has changed in a commit or pull request
- Ability to infer a developer's intent from the comments and code changes
We've had an enhancement request that we should be able to render links that look like (and in some ways behave like) buttons but still offer the ability to function like links (i.e., to take you to a different URL). Using the existing Button component, add in the required functionality to allow a button to render as a link. The prop and test stubs present in the project may provide additional context, and examining other components could also be helpful.
- Install the dependencies, run the tests, and start the dev server
- Add functionality to the existing button component to allow it to act like an HTML anchor element (a link)
- Write the tests in the provided test file to support the new functionality
- Commit your code changes to the project
We recommend using index.js to make any exploratory test changes to Button instances as this is the only script wired up to rebuild automatically.
- Understanding of HTML elements and working with attributes
- Understanding of Components
- Ability to read and write JavaScript
- Ability to test components
Our designer has given us a new button design. Load /design-mock.html in a browser to see the prototype.
- Implement the blue button as per the design mock
- Implement the favourite icon functionality for the button based on an
isFavouriteproperty and the svg icon supplied in the component - Configure the button to open a link to https://www.xero.com
- Vertically and horizontally center the app in index.html- Create the styles in the stylesheet, following existing conventions
- Commit your code changes to the project
- Ability to write CSS
- Ability to take proof of concept to a good level of quality
- Ability to work within existing conventions
- Capability with SASS
Thank you! Please submit your completed project per prior instructions.