Shaan057 / IplDashBoard

IPL Dashboard App

Get the stats of the IPL Teams

Refer to the image below:

Click to view

Design Files

Click to view

• 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

Features

Functionality

• When the app is opened, Home Route is displayed
• When the Home Route is opened,
  • Make HTTP GET request to the teamsApiUrl
  • loader is displayed while fetching the data
  • After fetching the data, the list of teams is displayed
• When a team card in Home Route is clicked,
  • Page is 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 is displayed while fetching the data
  • After fetching the data, the team banner, latest match, and list of recent matches is displayed

API Requests & Responses

teamsApiUrl

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

teamMatchesApiUrl

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

Components Structure

Home Components 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

Preview

Link