In this project, let's build a CoWIN Dashboard by applying the concepts we have learned till now.

Refer to the images below:

Failure View

Design Files

Click to view

• Extra Large Devices (Size >= 1200px) - Success View
• Extra Large Devices (Size >= 1200px) - Failure View

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"
    },
    ...
  ]
}

Components Structure

Implementation Files

Use these files to complete the implementation:

• src/components/CowinDashboard/index.js
• src/components/CowinDashboard/index.css
• src/components/VaccinationCoverage/index.js
• src/components/VaccinationCoverage/index.css
• src/components/VaccinationByGender/index.js
• src/components/VaccinationByGender/index.css
• src/components/VaccinationByAge/index.js
• src/components/VaccinationByAge/index.css

Important Note

Click to view

The following instructions are required for the tests to pass

• Wrap the Loader component with an HTML container element and add the testid attribute value as loader to it

  <div testid="loader">
    <Loader type="ThreeDots" color="#ffffff" height={80} width={80} />
  </div>

• Provide width and height to the respective chart component to make the charts visible on the page
  For example:

  <BarChart width={1000} height={300} />

  • Provide width and height as number

  • Achieve this CoWIN Dashboard on desktop devices. You can try different charts provided by the recharts package with customized data

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

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code.
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.