In this project, let's fix the IPL Dashboard by applying the concepts we have learned till now.

Refer to the image below:

Set Up Instructions

Click to view

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

Completion Instructions

Functionality to be fixed

Fix the given code to have the following functionality

• When the app is opened, Home Route should be displayed
• When the Home Route is opened,
  • Make HTTP GET request to the teamsApiUrl
  • loader should be displayed while fetching the data
  • After fetching the data, the list of teams should be displayed
• When a team card in Home Route is clicked,
  • Page should be navigated to the Team Matches Route with the URL /team-matches/:id
• When the Team Matches Route is opened,
  • Make HTTP GET request to the teamMatchesApiUrl with the team id to get the recent matches data of the team
    • Example: https://apis.ccbp.in/ipl/KKR
  • loader should be displayed while fetching the data
  • After fetching the data, the team banner, latest match, and list of recent matches should be displayed

API Requests & Responses

teamsApiUrl

API: https://apis.ccbp.in/ipl

Method: GET

Description:

Returns a response containing the list of all IPL teams

Response

{
  "teams": [
    {
      "name": "Royal Challengers Bangalore",
      "id": "RCB",
      "team_image_url": "https://assets.ccbp.in/frontend/react-js/rcb-logo-img.png",
      // use value of the key 'name' for alt as `${name}`
    },
    ...
  ],
}

teamMatchesApiUrl

API: https://apis.ccbp.in/ipl/:id

Example: https://apis.ccbp.in/ipl/KKR

Method: GET

Description:

Returns a response containing details of all recent matches of a team

Response

{
  "team_banner_url": "https://assets.ccbp.in/frontend/react-js/kkr-team-img.png",
  "latest_match_details": {
    "umpires": "CB Gaffaney, VK Sharma",
    "result": "Kolkata Knight Riders Won by 7 wickets",
    "man_of_the_match": "Shubman Gill",
    "id": "1216545",
    "date": "2020-09-26",
    "venue": "At Sheikh Zayed Stadium, Abu Dhabi",
    "competing_team": "Sunrisers Hyderabad",
    "competing_team_logo": "https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Sunrisers_Hyderabad.svg/1200px-Sunrisers_Hyderabad.svg.png",
    // use value of the key 'competing_team' for alt as `latest match ${competing_team}`
    "first_innings": "Sunrisers Hyderabad",
    "second_innings": "Kolkata Knight Riders",
    "match_status": "Won",
  },
  "recent_matches": [
    {
      "umpires": "RK Illingworth, K Srinivasan",
      "result": "Royal Challengers Bangalore Won by 82 runs",
      "man_of_the_match": "AB de Villiers",
      "id": "1216540",
      "date": "2020-10-12",
      "venue": "At Sharjah Cricket Stadium, Sharjah",
      "competing_team": "Royal Challengers Bangalore",
      "competing_team_logo": "https://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Royal_Challengers_Bangalore_2020.svg/1200px-Royal_Challengers_Bangalore_2020.svg.png",
      // use value of the key 'competing_team' for alt as `competing team ${competing_team}`
      "first_innings": "Royal Challengers Bangalore",
      "second_innings": "Kolkata Knight Riders",
      "match_status": "Lost",
    },
    ...
  ],
}

Quick Tips

Click to view

• There are 13 bugs to be fixed to achieve the functionality and the UI that is expected

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 data-testid attribute value as loader to it as shown below

  <div data-testid="loader">
    <Loader type="Oval" color="#ffffff" height={50} width={50} />
  </div>

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.