Finish all challenges

[K-Viera]

Frontend

React Curriculum vitae

This project was created in order to participate in the Ethereum Developer Program created by equipo de Platzi team and to have the opportunity to access not only a scholarship from the platform but also to be part of the students who will have access to a special training on blockchain with Ethereum.

Results

Frontend

link to review

Backend

link to review

Project Structure

• Project
  • src
    • components : Folder that contains all react components
      • Header : This component show the avatar image and a parent of About component
      • About : This component show name, professional an contact information
      • Profile : Contains and small description of my person
      • Experience : Map the array of items of experience data
      • Academic : Map the array of items of academic data
      • Skills : Map the array of string of skills data
      • Interest : Show relevant interest from the data
      • Languages: Map the array of items of language data
    • containers
      • App.jsx : General file that contains all the react components and make the data request
    • utils
      • getData.js : I use this file to make the request to the API
    • styles
      • components
        -App.syl : Manage all the css styles in the app

Project Steps

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

   The first thing I did was create all the files inside the APP.js file then I modified the location of the "About"component and started to create he whole structure to fit the test, finally, I had to modify some test to be relative to my information, for example the languajes, the original test are set to found more that 2 items, but as I only have 2 languages I modified to seek for more that 1 item.

Add styles #2: Create the styles to give it the desired design, keep the proposed structure.

    I create all the syles in a general file named "App.styl" it's the default from the repositorie. I decided to create all the styles from scratch and try to make it simple and just fit the proposed structure without anything super elaborated.

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

    This was by far the easiest task of the project, I simple created a general funcion to manage a GET request by a dynamic url and return the reponse as a json object.

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

    I thought of only make one request to get the information when the app loads all the promps in the root "App.jsx" file using the function from the previous task.

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.)

    I had already personalized the API in the previous task so I decided to create an small nodejs app with express to get the data and publish it in render. I also publish the frontend app in this same platform.

---

Troubleshooting

1. When I tried to execute the projet with nodejs v18 I get the error ERR_OSSL_EVP_UNSUPPORTED so I had to downgrade to v16.3.0 with nmv.
2. For the fourth task I also had to modify the test because when I consumed the API I created all the items recursively with the map property every time I used and array and as I used function components the first time it loads the props all the info are null, so it was not loading the items.

Project References

• Render Cloud Service
• NMV