LIVE DEMO :- IPL DASHBOARD

let's build a IPL Dashboard App

Refer to images below:

** -- https://assets.ccbp.in/frontend/content/react-js/ipl-dashboard-output-v2.gif -- **

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) - RCB 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 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 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

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