React challenge - Covid report

---

Overview

Create an app using React and React tools/features that will be a Covid report.

➡️ You can find the mockups here. You will find all the colors/assets in the Figma file, but you need to log in/sign up first.

Read this file carefully. All the information you need to start working on is there. But if you have any questions feel free to reach out to us;

• You should not use Bootstrap or jQuery for this challenge. Third-party packages are allowed, when necessary;
• We suggest using fontawesome for icons needs and fetch or axios for requests;
• We'd like to see how you handle your CSS with a preprocessor, Styled components, or CSS Modules.
• The font-family used in the mockups is Nunito;
• We prefer to see effective use of state management to save the API data, thoughtfulness in component building and focus on performance, responsiveness and over styling if you are running out of time. We'll evaluate the quality and organization of your code - even if it is 'incomplete'.
• Mobile design is provided, get creative with responsive desktop designs. We want to evaluate how you handle the Mobile First approach.
• Spend, at max, 8 hours on this project;

Requirements

• Integrate with COVID-19 data API. You'll need to create an account at RapidAPI to get a free API key.

• Integrate with Open Layers Map API. Download the package with Yarn or npm;

• When you open the app the main page will display a zoomed map of Brazil and a dropped pin. When you click on this pin it should open a page with details about the latest Covid data in the country.

• The URL should change (consider using react-router) when a dropped pin is clicked/detail page is open. If a user copy/pastes the URL into a new window, the same covid detail page should display;

• Detail page should display the country name, number of confirmed, recovered and death cases, and the date of the last report update (format: MM/DD/YYYY, HH:MM (timezone));

• There should be a search bar allowing users to search for a country.

• When a country is searched the map page should zoom to that country, and a pin should appear. The dropped pin from the previous country should disappear;

• Display an error if:

  • the search does not return any results;
  • the API return an error;

Bonus (optional)

If you finish early here are some options for bonus points:

• Add tests for your code (we recommend Jest or Testing Library, but you can use any framework you like).
• As the user types on the search bar, suggest the matching country name or create a select/dropdown with the countries list.
• We'd like to see some accessibility best practices;
• Any cool feature you want to add. Surprise us! :)

Submission

• Create a private repository in your Github account and add your solution there.
• When you're done open a pull request with your project. Remember to add instructions on how to run the project, tests, etc.;
• Tag the following people to review the PR: @ptonella, @thiagothimoteo, @fernando-f and @augustogoldoni. If you cannot add these people as reviewers just drop a comment on the PR.
• If you think it's useful, publish the project on GitHub Pages, Netlify or Heroku. Don't forget to send the link along with the PR