Frontend Engineer Test

Thanks for applying to Kinedu’s Software Engineering team. Please follow the
instructions to complete your test.

Summary
The Milestones section in the Kinedu Web app shows a list of milestones a baby can,
or cannot, complete for a particular skill. Parents update the list whenever their baby
can complete some, or all of them. All skills belong to a certain developmental area
(Physical, Cognitive, Linguistic, Social & Emotional).

For this assignment you will oversee creating a React application which allows
parents to answer these milestones. You should:
● Display the list of milestones, separated by area.
● Users should be able to answer which milestones are completed or not.

Description
In order to complete the objective, you’ll need to consult our API and fetch the
two skills with their corresponding milestones, using the following endpoints:

https://www.figma.com/file/3mUq40cmp20IHn2zFdsnbC/Web-Milestones-
Exercise?node-id=0%3A1
Once you connect to our API, check the images below to design the views to show the
skill information and the list of milestones.

Each milestone can have one of the following three states:

1. Not answered (initial)
2. Completed
3. Uncompleted

The user should answer some milestones and then click on the next button. Your
application should save the answers and then display the next area with a new
milestones list.

Below is an example of how the app should look for each developmental area:
Babbles like imitating conversation.

Babbles like imitating conversation.

Usually achie red ay. z • mon‹ns
Uncompleted

Babbles I ke imitating conversafion.

U sua ach e ved Oy. 2 ° monI hs

Babbles like imitating conversation. Not answered

Babbles like imitating conversation.

Ba bbles like imitai ng conversation. Uncompleted

Usual ly ach ieved by: 2-4 months

Baboles like imitating conversation.

Babbles like imitating conversation. Not answered

This is the color palette:
Physical area: #1FADDF | Social & Emotional area: #D43571 | Buttons: #75B753

For this exercise you are required to use state management to control the user’s
answers. Initially, each milestone should display a status of “not answered”. Once a
milestone button has been clicked it should toggle between the states: “Completed”
and “Uncompleted”.

Users should be able to toggle between the two areas (Physical and Social &
Emotional) using the tabs at the top of the page in order to view their previous
answers.

Above the name of the skill is an indicator of what area you are currently answering
milestones. When you finish one, the color must change according to the area. Also, for
each skill you should display a name and description. Each milestone has a title with a
corresponding age range. All of this information can be found in the API response.

To successfully complete this test, you need to take the following into account:
● Use only functional components.
● Use custom hooks.
● Use a component based architecture. Divide each part of the UI into a
component.
● Pay attention to details and try to build the app as similar as possible.
Remember that one of our core values is “think of every pixel”.
● Send a link to a github or bitbucket repo or send a zip file with the project to
your recruiter via email. If the size exceeds 15MB, send the link via WeTransfer.
● Please attach any relevant information on how to build and run the project.

For extra points:

● Use TypeScript. (you have to use valid types, you can’t use any or @ts-ignore).
● Develop the app with scalability in mind. For instance, consider that we might
need users to answer more areas and skills in the near future.
● Use Async / Await.
● Use ES6+ Syntax.
● Add any animations and/or transitions.
● Add a spinner when waiting for a response.
● Add a congratulations modal after clicking on the “Finish assessment” button.
● Write a brief explanation about the architecture you followed and the
challenges you encountered.
● If possible, try to adhere to the following coding standard:
(https://github.com/airbnb/javascript).