Document Frontend challenge - Andres Fernando Moreno

[andresfmj]

Solution by Andres Fernando Moreno Email: [email protected]

First of all, I have analyzed the whole codebase and I noticed some of the components were unlinked from the App component, so it was necessary to create them with a dummy structure and their very basic styl files under the styles folder.

Next step was necessary to rearrange a little bit this structure created before by adding their css classes, according to the purposed design in the readme file.

Next, getData function was empty, so I declared a function called as the same name that returns a promise with the native function fetch from javascript.

The file data.json was integrated through a package that was necessary to install it globally, this package is known as json-server. So, this file was connected to json-server through the command json-server data.json, in order to get a functional url by http.

This function getData created before, it was created as a hook function named useData then, that get the result by the json-server url request. So, the result returned was connected through Context API in order to consume this data on any of the components created before, no need to pass them out with props.

I had to modify unit testing in order to mock up data from the data.json directly, because of the data was not found in the components at a first render.

Therefore, like this way I was able to solve this challenge, by making it look like purposed design. So I hope you like it and feedback would be appreciated 💚