Frontend – Visualizing Compensation and Benefits

Here is a coding exercise to help us assess your technical skills. Please plan to spend no more than 4 hours on this. We understand we may not be the only company asking for an exercise from you and want to be respectful of your time. The test is designed for all levels, and you could spend much longer perfecting your solution if you wanted to. We recommend you focus on the core requirements first, then work on any additional features if you have the time.

By 4 hours in, please feel free to stop working and explain what refactors / code organization / enhancements you would have made with more time in the SOLUTION.md file (You have to create this SOLUTION.md file).

Submission

Please commit all your changes to this git repository. When you’re done:

1. Create a zip / tarball of this repository (excluding node_modules) and submit it to https://www.dropbox.com/request/06JH3TUA6dBnNuzEe3FS
2. Email Anna to let her know you’re done.

Overview

We’ve built a simple Autocomplete/Typeahead component in vanilla ES2015 that lets you type in a query and shows a list of matching results in a dropdown, just like how Google’s search box works.

To see this component in action, let’s set up the repo:

1. Run npm install
2. Run npm start (runs webpack-dev-server)
3. Open http://localhost:8080 on your browser.

Type “new” in the input, and you’ll get a list of matching US states that start with “new”.

Task

Currently, the component can only query against a static data array and only works with mouse clicks. Your task is to:

1. Enhance the component so that it also accepts an HTTP endpoint as data source.

   For example, if you wire up the component to https://api.github.com/search/users?q={query}&per_page=${numOfResults}, and if you type foo in the input, the component dropdown should show Github users with logins that start with foo. When you select a user from the results, item in the onSelect(item) callback should be the selected Github user’s id.

   (The enhanced component only needs to work with either a data array or a HTTP source, not both.)

2. Implement keyboard shortcuts to navigate the results dropdown using up/down arrow keys and to select a result using the Enter key.

Uncomment the relevant sections in index.js and index.html to implement a demo that looks like this:

Requirements

• The component should be reusable. It should be possible to have multiple instances of the component on the same page.
• The “States” example that uses a data array should continue to work.
• The component should accept any HTTP endpoint, not just the https://api.github.com/users example above.
• Your component should work correctly in Chrome, don’t worry about cross-browser compatibility.
• You can use small DOM helpers like jQuery or utilities from Lodash, but not larger libraries/frameworks like React, Angular or Vue.js
• You don’t need to preserve any of the existing code; feel free to modify them as you wish.
• New APIs should be documented in SOLUTION.md.

Take-home exercise for frontend interviews

Frontend coding challenge.

Project

We would like you to build a web app that displays the trending GIFs on Giphy. Users visiting the website should be able to search for GIFs and see a list of results. The user should be able to expand a GIF and see its details (username, rating, anything you think could be relevant).

Users should have a good user experience on desktop, tablet and mobile devices.

This project is pretty open ended in order to leave you some freedom to improve upon the base by focusing on what you like the most.

We strongly encourage you to pick a couple of optional improvements. The following are just some ideas, so if none of these interest you, feel free to do something that isn’t on this list:

• When the user scrolls the page to the bottom, load new GIFs automatically.
• Create a mosaic layout and display a placeholder when GIFs are still loading.
• Show off your animation skills!
• Sort the results by uploaded time and let the user choose if they prefer ascending or descending ordering.
• Let the user favorite GIFs and list their favorites. The users should be able to retrieve their favorite GIFs even after refreshing the page.
• Provide the ultimate user experience: scrolling, searching, fetching… could be optimized for UX.
• Let the user upload a GIF.
• Add some unit tests.

Project Structure

We’ve included all of the boilerplate to get started with this project using create-react-app, feel free to use this structure if you’d like. If you’d prefer to use something other than React or you’d prefer a different project structure, go ahead and make any changes you’d like.

Evaluation

The app should run on any computer by running npm install and npm start. We’ll evaluate the exercise by looking at the end result and the code.

Notes

Please, don’t open a PR against this repo. Just follow the direction from the recruiter on how to submit the exercise.

Coding at our Team

We strive for writing simple, maintainable and clean code.

We prefer simplicity over complexity.

We comment our code and commit often.

We love our users and we really care about providing a good user experience and pleasant UI.

We encourage out of the box thinking and we love to be impressed!

This exercise is to implement the best possible solution to one of the exercises below in the time alloted. We’re evaluating your ability to take a set of requirements and spike a holistic solution that demonstrates craftsmanship, thoughtfulness and attention to user experience. This is NOT a test of how well you know React or ES7+, nor should you try to impress us with overly clever and obtuse solutions. If you want to impress us, build something that is beautiful, intuitive and easy to debug/test/extend 😃 .

Ideally your solution would have some way to run locally and visualize the results in a browser so we can fully analyze the experience and not just the source code.

Choose One Of the following

Exercise A: Creating an offer

As a hiring manager I want to

• Create a a new offer of employement
  • Specify the monetary compensation details of an offer (salary, equity, bonus, etc)
  • Specify non-monetary compensation and benefits (culture, learning opportunities, etc)
• See a list of the offers I’ve created
• Share a link to an offer via a unique URL

As an employee receiving an offer I want to

• View an offer that was sent to me
  • stretch goal: Ask a question about the offer (ideally a subsection of the offer)
• Understand the non-salary compensation I am being offered (stock valuation, value of healthcare benefits)
• See detail about the role, team, and organization

Exercise B: Visualizing Compensation and Benefits

As a HR-team member I want to

• “Upload” a CSV/JSON file with my the compensation data of my current organization
  • NOTE: You don’t need to create an API around file storage/IO. Use any/all of the sample files in /shared/salary_datasets or create your own simple faked data set.
• View the data in a simple tabular view
  • stretch goal: be able to sort or search by any unique identifiers (name, email, etc) so I can find specific rows
• View simple visualization(s) of the distribution of salary compensation so I can get an overview/aggregate of overall compensation
  • stretch goal: be able to visualize data across more than one dimension

Submitting your exercise

Create a new private repository for your exercise and add the our hiring team members as private collaborators (We do this to preserve your anonymity so it’s not obvious you are looking for a new tole.)

JohnDoe@gmail.com (Head of Engineering)

Complete as much of the exercise as you can in 3 hours or less. Unless otherwise specified in the instructions.md document, you can use any language, framework, or toolchain you wish, although ideally this would be Python, Javascript (ReactJS), and SQL (purely because those are the languages we use to build Welcome and will be the most familiar with)

Be sure to include the following in your submission

• a README.md with the following information
• A few screenshots of the finished product. Show off that work! camera_flash
• The exercise you choose and why
• A short explanation of what you built
• How to test/demo/run (if applicable)
• NOTE: a ‘working’ exercise is awesome, however it is NOT a hard requirement. We mean it!
• Any feedback/notes (i.e. if something was hard, confusing, frustrating, etc)
• Anything else you’d lke us to know about your submission
• a ROADMAP.md with what you would add/change if you had more time. Dream big.
• a super-simple test suite if applicable (even one test is a bonus)
• Some form of lightweight technical documentation (code comments are fine)
• When complete email a link to the repository and any special instructions to JohnDoe@gmail.com

Sit back and relax. We’ll review your submission and get back to you within 48 hours smiley

ExampleCompany take home test

This is a frontend exercise that will give you a chance to see some of the things we build at ExampleCompany.

At ExampleCompany we want to make instructing AI systems as intuitive as teaching a colleague. Right now, machine learning instruction happens primarily through providing hundreds of hand labelled examples, so we want to make that process as easy, intuitive and fun as possible.

For this task, we look at the problem of named-entity recognition (NER). We would like you to build an annotation interface for NER – to display a textual document and be able to label spans of text with one of a handful of classes.

Requirements

• the user needs to be able to read the document
• select a span of text
• assign one of the predefined labels ['person', 'organization', 'location', 'misc'] to the text.
• the user can see the state of the highlighted text
• the user can remove an annoation
• the annotations should be available as a JSON array of objects with the following structure of start and end indexes, the inside text, and the label

[{"start": 12, "end": 30, "text": "Southampton United", label: 'organization'},]

How you do this is up to you! People can spend a long time annotating documents like this, so some thought to making intuitive, robust and maybe even fun is wanted.

Guidelines

We’d like you to spend no more than 3-4 hours working on this. Please let us know how much time you spent so we can calibrate our expectations.

Hints / Tips

• This initial code is using React. If you’d prefer to use other libraries or frameworks, you’re welcome to.
• You can use any libraries, frameworks, tools you want.
• Pick any UI toolkit or component library (Bootstrap, TailwindCSS, Ant Design etc.) you’d like to use, but try to make everything look consistent.
• How you want to store state is up to you.
• It doesn’t have to look pixel perfect and it doesn’t need amazing animations, but we do care a lot about UX and usability at ExampleCompany.
• Paying attention to details like padding, alignment, and cursors is appreciated!
• Handle the UX edge-cases! For example, what happens when the spans overflow a single line?

Frontend Take-home Exercise

Hi there! Here is a coding exercise to help us assess your technical skills. Please plan to spend no more than 4 hours on this. We understand we may not be the only company asking for an exercise from you and want to be respectful of your time. The test is designed for all levels, and you could spend much longer perfecting your solution if you wanted to. We recommend you focus on the core requirements first, then work on any additional features if you have the time.

By 4 hours in, please feel free to stop working and explain what refactors / code organization / enhancements you would have made with more time in the SOLUTION.md file (You have to create this SOLUTION.md file).

Submission

Please commit all your changes to this git repository. When you’re done:

1. Create a zip / tarball of this repository (excluding node_modules) and submit it to https://www.dropbox.com/request/06JH3TUA6dBnNuzEe3FS
2. Email Anna to let her know you’re done.

Overview

We’ve built a simple Autocomplete/Typeahead component in vanilla ES2015 that lets you type in a query and shows a list of matching results in a dropdown, just like how Google’s search box works.

To see this component in action, let’s set up the repo:

1. Run npm install
2. Run npm start (runs webpack-dev-server)
3. Open http://localhost:8080 on your browser.

Type “new” in the input, and you’ll get a list of matching US states that start with “new”.

Task

Currently, the component can only query against a static data array and only works with mouse clicks. Your task is to:

1. Enhance the component so that it also accepts an HTTP endpoint as data source.

   For example, if you wire up the component to https://api.github.com/search/users?q={query}&per_page=${numOfResults}, and if you type foo in the input, the component dropdown should show Github users with logins that start with foo. When you select a user from the results, item in the onSelect(item) callback should be the selected Github user’s id.

   (The enhanced component only needs to work with either a data array or a HTTP source, not both.)

2. Implement keyboard shortcuts to navigate the results dropdown using up/down arrow keys and to select a result using the Enter key.

Uncomment the relevant sections in index.js and index.html to implement a demo that looks like this:

Requirements

• The component should be reusable. It should be possible to have multiple instances of the component on the same page.
• The “States” example that uses a data array should continue to work.
• The component should accept any HTTP endpoint, not just the https://api.github.com/users example above.
• Your component should work correctly in Chrome, don’t worry about cross-browser compatibility.
• You can use small DOM helpers like jQuery or utilities from Lodash, but not larger libraries/frameworks like React, Angular or Vue.js
• You don’t need to preserve any of the existing code; feel free to modify them as you wish.
• New APIs should be documented in SOLUTION.md.

Create an AngularJS application/Vue / React App using Sass/Less.

· The Page view of the application will contain 2 dropdowns (The dropdowns should be custom dropdowns created using Angular directive) – 1st dropdown will list 2 makes – Ford, Acura. The 2nd dropdown will contain the corresponding models based on the selection of the make – Models dropdown will be hidden by default and will only be available in the DOM if the make is selected.

· Models for Ford: Edge, Escape.

· Models for Acura: ILX, MDX.

· The page view will also contain a content placeholder – Depending on the model selected, text will be populated in the first placeholder based on that specific model. The content should also display the corresponding image of the vehicle.

· Write unit tests validating the functionality above.

· Data should come from mongodb.

· Create a nodejs project for this exercise.

Previous

Database Design Exercise - Storing Compensation Data

Next

Design-UX-CSS and Question on MongoDB