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. 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 and install this repository
- Run the npm script
welcome - Run the application locally
- 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
Take a look through the tooling for this project.
- Examine the application code
- Update the file
answers/2-tools.mdwith responses to the questions you'll find there
- Ability to clearly and simply explain technical concepts
- Ability to describe a front-end project's tools
- Familiarity with common tools and their purpose
- Understanding of configuration files and their purpose
We need to understand the last change to the codebase.
- Investigate the commit with the hash
3d0ba63437473995b55ed919062cb8df33b2bcab - 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 have two designs for an image grid and modal image gallery prototype. Load /design-mock-1.html and load /design-mock-2.html in a browser to see the prototype. Users will be able to click the "View" buttons at the bottom of each image in the grid to view a larger image in a modal-gallery.
- Install the dependencies and start the dev server
- Implement the
design-mock-1in HTML and CSS for theindex.html - 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
You'll now build the modal gallery functionality to turn it into a working JavaScript component.
- Add functionality to the existing modal-gallery component to allow it to open and show the larger version of the image, to move between images and to close the modal
- Extend the CSS to implement the
design-mock-2layout for the modal gallery - Commit your code changes to the project
- Understanding of HTML elements and working with attributes
- Understanding of building stand alone components
- Ability to read and write JavaScript
Thank you! Please submit your completed project per prior instructions.