Desafío frontend - Nicolas Jiménez.

[01001110J]

Docs ( 🛣️ Mi experiencia con el desafío )

Create the project components #1: Analyze the project and identify its structure

When I looked closely at the structure of the project, I found it already had a previously elaborated structure, however a series of extra configurations and a couple of files are needed. I started this point by creating an index.js file in the root of the "components" folder so that from there a single import would be made and not "saturate" other files with the "dot hell". 😊👌

Add styles #2: Create the styles to give it the desired design, keep the proposed structure. Use @Dribble for inspiration.

❌🙃 One of the main problems I had at the time of carrying out the project was thinking about a design, although I'm not so bad at it, it is a fact that I can spend hours just thinking about "-"hat colors I should to use?" (and so it was) I spent more of a morning creating a color palette and a design that I liked enough and that in turn did not break the scheme given at the beginning, since one of the challenges was to maintain the base structure.

Fortunately, Google came to save the country and among many designs I chose to use an effect called "Glassmorphosm", all that remained was to think of some good colors (because at the beginning, the ones I had in mind were not bad ... but, maybe is not works
here a prove.
) so I opted to use an Apple palette.
Here was my inspiration.

Create getData.js function #3: Create getData.js function to consume an API

❌🙃 Creating the function was one of the simplest parts of the test, however it is one thing to create it and another to make it work, since here I had the problem that Webpack was not willing to accept "sugar syntax" like async / await, And although it is true that I could have solved it using the already known "promises", I wanted to make use of these characteristics, for which I was forced to investigate how to adapt Webpack to these characteristics, it was not very difficult, but I did take longer than expected.

Integrate API #4: Start the test server and integrate the proposed information into your application.

<npm run server>

Integrating the api was simple, but what perhaps was not so simple was to think of an optimal way to distribute the information throughout the application without having to make more than one call to the api or "mess up" the code by creating more states of the necessary ones, for which it seemed convenient to use the api context that React provides, in this way I centralized the information at one point and then distributed.

Custom API #5:Customize the data.json file in the root of the project with your information. If you deploy your own API in a cloud service it is a plus.

Customizing the api was quick, but I did not like the idea of ​​having the file static, so I was forced to create a small server in Express and mount it in Heroku, I wanted to take that extra step. (I mounted the repo to GitLab, Why? Well, I don't like having my GitHub account untidy. Here is the code)

Document #6:Create the necessary documentation for the application in the document of your Pull Request. Explain in detail the steps taken, describe what were your main blocks and your solutions.

To document the project I chose to use "JsDoc" since it allows me to create the necessary comments for the code in a very simple way. Additionally, in the Readme.md I left this same section of steps, since it seemed more elegant to me.

Upgrade [Bonus] #7: Please review the project and update to the latest versions of the project dependencies.

To be honest this was the first thing I did before starting to go through the entire structure of the project, I went through the package.json to see what commands and settings they had available and then updated all the dependencies.