In this pull request I have added changes to my react app according to the requirements:

• I used two APIs with numeric data for this project.

• I have used the original given design to give design to my app components.

• I have added three pages on my weather app:

  • Home page

    • When the page loads, the web app shows the list of categories that are filtered out by country names.
    • Along with the category name, I displayed states per category that come from the API.
    • When the user clicks (or taps) on a countries item, the application navigates to the states page.

  • Details page

    • On the states page, the web app retrieves data from the API to show weather data of the country and the states of the country.
    • When the user clicks on the "Back" button (<), the user navigates to the home page.
    • When the users click on the states it goes to the states page.

  • States page

    • On the states page it shows the weather of the specified clicked state.

• Testing requirements

  • I have created unit tests for pure functions in my Redux code.
  • I have created integration tests for my application using the React Testing Library.
  • I mocked the access to the API.
  • I mocked the connection to the Redux Store.

In this pull request I have added changes to my react app according to the requirements:

Project requirements API First you need to choose an API to base the development of the webapp on. The API should allow you to get numeric values based on a parameter. We recommend that you choose an API that is open or needs an API key. If you choose an API that require authentication, you should implement it on your own.

Some example APIs are:

Financial modeling prep API: stock data. Air pollution API: air quality data. You can find many APIs in this GitHub repo or in ProgrammableWeb. Some of the APIs requires a token for authentication and some others are just open.

Design

You should follow these design guidelines, including: Colors (select one main color for your website). Typography: font face, size and weight. Layout: composition and space between elements. Original design idea by Nelson Sakwa on Behance.

The Creative Commons license of the design requires that you give appropriate credit to the author. Therefore, you must do it in the README of your project.

Interactions

Home page

When the page loads, the webapp shows the list of categories that could be filtered out by some parameter, for example by the category name. Along with the category name, you will display some numeric values per category that come from the API. When the user clicks (or taps) on a category item, the application navigates to the details page. Details page

In the details page, the webapp retrieves data from the API to show detailed data in the category. When the user clicks on the "Back" button (<), the user navigates to the home page. Testing requirements

Create unit tests for pure functions in your Redux code. Create integration tests for your application using the React Testing Library. You may need to mock the access to the API, so that your tests don't send actual requests. You may need to mock the connection to the Redux Store. Technical requirements

The project is a single-page application (SPA) built with React and Redux. The data retrieved from the API should be stored in the Redux store. You should filter the data that you retrieve from the API using a Filter stateless component. Every page (the main page and the pages for each item) should have a unique route within the SPA. The project should be deployed and accessible online (add a link to the online version of your app to your README file). Project documentation Once you have finished the development of the project, you should record a video presenting the features of the project you built. It is a video with a maximum length of 5 minutes. The content of the video should include:

a description of the project. a demo of the project features. you should also highlight some interesting piece of code or something you built that you are very proud of.