Platzi Master Frontend Test

Resume in React

Creation of a resume using React.js that shows personal information brought in from an API.

First of all, I must say that I am very proud to be able to meet this challenge because I had to prepare myself by watching some of the courses offered by Platzi about Frontend Development with React and JavaScript and now I feel that I have made a lot of progress. I would like to thank Platzi for this opportunity.

Deployment

1. Go check the project
2. Go check the API

Results

Main tools applied to the project

* HTML
* CSS
* JavaScript
* React.js
* Webpack
* Jest

To meet this React test, the following objectives were met:

Challenges

1. Create the project components

   

   • Analyze the structure shown in the image above
   • A new git branch is created to work the components
   • Create the necessary component files
   • Comply with the requirements established in the component tests
   • A new component is created to handle the profile photo
   • The HTML structure was inserted in each of the components
   • Each component field was populated with test information
   • Configuration was added to be able to deploy the project in github pages

2. Add styles

   • A new git branch is created to work the styles of the components
   • The container for each element is styled.
   • A component called "Title" is created that will be called by each component to display a header with the name of each one.
   • Some mixins are created that help us to reuse the CSS code and use them easily in the styles of each component.
   • The components are styled following the Mobile First methodology
   • Media queries are implemented so that the project can be responsive and adaptive for any screen

3. Create getData.js function

   

   • The getData function receives an argument that is the url of the API and returns a response from the request in JSON format.
   • This function can be accessed simply by importing into any document in which you want to occupy the function and can be used by passing any url of any api.

4. Integrate API

   • The getData function is imported to the App.jsx container
   • The getData function is called by App.jsx. Once you get the data fetched from the API, it is saved in the "data" state using Hooks and all the main components are rendered.
   • A component called Loading is implemented that renderes in App.jsx while the information is being searched. This is controlled with a state defined with Hooks called "loading" and a conditional that is in charge of changing the state of "loading" from true to false, and then it renders the other main components.
   • The information is passed by props to each component from App.jsx

   

   • The components will be in charge of receiving this information and using it to fill in the fields.
   • In those data that are inside an array, the map function was used to traverse it and provide the corresponding information.

   

5. Custom API

   • The data in the data.json file was changed to real data
   • The github and heroku integration was used to deploy the API

6. Document

Installation

npm install

Execution

npm run start

Server

npm run server

Compile

npm run build

Unit tests

npm run test

ESlint

npm run lint

Submit challenge solution

You must create a "Fork" of this project, scramble the problems and create a Pull Request to your repository.

Contribute

If someone wants to add or improve something, you can collaborate directly in this repository: frontend

License

frontend is released under the license MIT.