Hello braveheart 👋🏼. We are truely delighted to introduce you to a React.js developer recruitment task. It was designed to provide multiple layers of a feedback for our HR teams in the recruitment process with a minimum involvement from your end.
You will be asked to develop a complete React.js component based on a wireframe and given data. Obviously, the most important part is to deliver a functionality that works end-to-end. On top of that, we will examine code quality, complexity of loop processing, documentation reading skills, decision-making skills in the end ability to use latest trends and technologies.
The task is expected to take between 1 and 2 hours based on your experience. We really hope to see you shortly on board, good luck! 🤘🏼
The application is in fact an interactive table which lists applications delivered in a json file (so yes, this is the application listing application 😅). Generally speaking, users should be given the ability to select category of applications listed in the table and easily distinguish Mature from Beta applications.
Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.
Source: ExperienceUX
The wireframe above presents all important bits from a functional point of view. The application consists of 3 important components:
-
Tabs – Tabs are generated automatically based on
$.type
property available within collection provided indataset.json
file. Once one of tabs is clicked, the table should present applications only from a selected category. Active choice should be highlighted, by default the first tab should be selected -
Sections – Each tab should list 2 sections behaving just as collapsible accordions:
- Mature Applications – this section lists applications with
$.version
property matching>=1.0.0
pattern. - Beta Applications – this section lists applications with
$.version
properties matching<1.0.0
pattern.
- Mature Applications – this section lists applications with
-
Table – Each section contains a table which exposes the following columns:
- Application Name linked to
$.app
, - Author linked to
$.author.name
and - Version linked to
$.version
.
All rows should be clickable. On click event name of the application should appear in the URL after
#
sign. - Application Name linked to
- You should not trust static JSON. Please use it as it would be an API response,
- Components should be adjusted to the SEO needs – please note the application does not change the URL in any interaction except row click,
- Aplication is for desktop use only,
- We will appreciate component which follows accessibility recommendations.
The application will be tested in the following ways:
- Performance results – with a dataset of millions items, complexity of data processing is therefore important,
- Incomplete dataset – ensure your application handles errors properly. Missing Application name in 999.999th row should not affect the stability of the application itself,
- SEO/Accessibility,
- Code quality,
- Code standards,
- Code comments.
This repository is build on top of create-react-app
. Simply run npm start
to start 😁. In case you need more detailed explanation, please feel free to visit their documentation.