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
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
- Page is navigated to the Team Matches Route with the URL
- 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
- Example:
- loader is displayed while fetching the data
- After fetching the data, the team banner, latest match, and list of recent matches is displayed
- Make HTTP GET request to the teamMatchesApiUrl with the team id to get the recent matches data of the team
API Requests & Responses
teamsApiUrl
teamMatchesApiUrl
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