waseem496 / ipldashboard-reactjs Goto Github PK

• 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

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

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

teamsApiUrl

Returns a response containing the list of all IPL teams

{
  "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

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

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

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

• 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} />
  

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

• 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 alt should be ipl logo

Background Colors:

Border Colors

Text Colors

• Bree Serif