/IPL-DASHBOARD-APP

IPL DASHBOARD APP

Primary LanguageJavaScript

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

Refer to the image below:


ipl-dashboard-output

Design Files

Click to 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 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",
    },
    ...
  ],
}
Components Structure
home component structure

team matches component structure

Implementation Files

Use these files to complete the implementation:

  • 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

Quick Tips

Click to view

  • To display the animated loader, we need to import the Loader component using the below statement

    import Loader from 'react-loader-spinner'

  • In order to display the given animated loader, pass the type and color props to the Loader component with values as Oval and #ffffff , respectively

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

Important Note

Click to view

The following instructions are required for the tests to pass

  • The banner image in the Team Matches Route should have the alt attribute value as team banner
  • The alt attribute values for the images received from the response are given in the Example response
  • The API responses received from the given api URLs 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={50} width={50} />
</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

Image URLs
Colors

Background Colors:

Hex: #1e293b
Hex: #a4261d
Hex: #5755a7
Hex: #d91c1f
Hex: #f7db00
Hex: #ffffff33
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.