In this practice let's build a IPL Dashboard App by applying the concepts we have learned till now.

Refer to images below:

Design Files

Click to view the Design Files

• Extra Small (Size < 576px) and Small (Size >= 576px) - Home
• Extra Small (Size < 576px) and Small (Size >= 576px) - Team Matches
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Team Matches

Project Set Up Instructions

Click to view the Set Up Instructions

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

Project Completion Instructions

Click to view the Functionality to be added

Add Functionality

The app must have the following functionalities

• When the app is opened Home Route should be displayed.

• When the Home Route is opened,

  • Make HTTP GET request to the following URL https://apis.ccbp.in/ipl
  • After fetching the data, the list of teams should be displayed
  • loader should be displayed while the HTTP request is fetching the data

• 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 following URL https://apis.ccbp.in/ipl/<team_id> with the team id to get the previous matches data of the team

  • loader should be displayed while the HTTP request is fetching the data

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

  • After fetching the data, the team banner, latest match, and list of recent matches should be displayed

Click to view the Example response

• The example response from a request to this API https://apis.ccbp.in/ipl will be

{
  "teams": [
    {
      "name": "Royal Challengers Bangalore",
      "id": "RCB",
      "team_image_url":
        "https://assets.ccbp.in/frontend/react-js/rcb-logo-img.png",
    },
    ...
  ],
}

• The example response from a request to this API https://apis.ccbp.in/ipl/<team_id> will be

{
  "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",
    "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",
      "first_innings": "Royal Challengers Bangalore",
      "second_innings": "Kolkata Knight Riders",
      "match_status": "Lost",
    },
    ...
  ],
}

Click to view the Implementation Files

• Your task is to complete the implementation of
  • src/App.js
  • src/components/Home/index.js
  • src/components/Home/index.css
  • src/components/TeamCard/index.js
  • src/components/TeamCard/index.css
  • src/components/TeamMatches/index.js
  • src/components/TeamMatches/index.css
  • src/components/LatestMatch/index.js
  • src/components/LatestMatch/index.css
  • src/components/MatchCard/index.js
  • src/components/MatchCard/index.css

Click to view the Components Structure

Components Structure

Quick Tips

Click to view Quick Tips

• To show the animated loader, we need to import the loader component as import Loader from 'react-loader-spinner'

• In order to form the given animated loader, use Oval for type attribute & also use #ffffff for color attribute of Loader component

  <Loader type="Oval" color="#ffffff" height={50} width={50} />
  

Important Note

Click to view Important Note Points

The following HTML attributes are required for the HTML for the tests to pass

• The IPL logo in the Home Route should have the HTML alt attribute value as ipl-logo
• The API response received from the given apiUrl should be converted to camel case
• Wrap the Loader component with an HTML container element and add the testid attribute value as loader to it as shown below

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

• Render HomeRoute component when path in URL matches /
• Render TeamMatchesRoute component when path in URL matches /team-matches/:id
• No need to use the BrowserRouter in App.js as we have already included in index.js file
• Each TeamMatchesRoute should have different gradient colors as background based on the selected team

Resources

Data fetch URLs

Data Fetch URLs

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

Image URLs

Images

• https://assets.ccbp.in/frontend/react-js/ipl-dashboard-sm-bg.png
• https://assets.ccbp.in/frontend/react-js/ipl-dashboard-lg-bg.png
• https://assets.ccbp.in/frontend/react-js/ipl-logo-img.png

Colors

Colors

Background Colors:

Hex: #ffffff33

Hex: #1e293b

Hex: #a4261d

Hex: #5755a7

Hex: #d91c1f

Hex: #f7db00

Hex: #da237b

Hex: #13418b

Hex: #f26d22

Hex: #4f5db0

Hex: #0f172a

Border Colors

Hex: #ffffff

Hex: #475569

Text Colors

Hex: #ffffff

Hex: #18ed66

Hex: #e31a1a

Font-families

• Bree Serif

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.