Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• When the page is opened,
  • An HTTP GET request should be made to covidVaccinationDataApiUrl
  • loader should be displayed while the HTTP request is fetching the data
  • After the data is fetched successfully, the response received should be displayed using different charts from recharts
  • The last 7 days vaccination data should be displayed using the BarChart component from recharts
  • The data for vaccination by gender and vaccination by age should be displayed as two different pie charts using the PieChart component from recharts
  • If the HTTP GET request made is unsuccessful, then the FailureView should be displayed

API Requests & Responses

covidVaccinationDataApiUrl

API: https://apis.ccbp.in/covid-vaccination-data

Method: GET

Description:

Returns a response containing the list of Products

Success Response

{
  "last_7_days_vaccination": [
    {
      "vaccine_date": "30th Jul",
      "dose_1": 3757930,
      "dose_2": 1817805
    },
    ...
  ],
  "vaccination_by_age": [
    {
      "age": "18-44",
      "count": 482792375
    },
    ...
  ],
  "vaccination_by_gender": [
    {
      "count": 4809680,
      "gender": "Male"
    },
    ...
  ]
}

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/api-failure-view.png alt should be failure view
• https://assets.ccbp.in/frontend/react-js/cowin-logo.png alt should be website logo

Colors

Hex: #161625

Hex: #2cc6c6

Hex: #cbd5e1

Hex: #ffffff

Hex: #1c1c2b

Hex: #2d87bb

Hex: #a3df9f

Hex: #64c2a6

Hex: #94a3b8

Hex: #f54394

Hex: #5a8dee

Hex: #2cc6c6

Hex: #6c757d

Hex: #5a8dee

Font-families

• Roboto