### Design Files
Click to view
- [Extra Small (Size < 576px) and Small (Size >= 576px) - Home](https://assets.ccbp.in/frontend/content/react-js/ipl-dashboard-home-sm-output.png) - [Extra Small (Size < 576px) and Small (Size >= 576px) - Team Matches](https://assets.ccbp.in/frontend/content/react-js/ipl-dashboard-team-matches-sm-output-v2.png) - [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home](https://assets.ccbp.in/frontend/content/react-js/ipl-dashboard-home-lg-output.png) - [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Team Matches](https://assets.ccbp.in/frontend/content/react-js/ipl-dashboard-team-matches-lg-output-v2.png)Click to view
- Download dependencies by running `npm install` - Start up the app using `npm start`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 ```json { "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 ```json { "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", }, ... ], } ```
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`
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 ``` ```
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 ```
Image URLs
- [https://assets.ccbp.in/frontend/react-js/ipl-dashboard-sm-bg.png](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-dashboard-lg-bg.png) - [https://assets.ccbp.in/frontend/react-js/ipl-logo-img.png](https://assets.ccbp.in/frontend/react-js/ipl-logo-img.png) alt should be **ipl logo**Colors
**Background Colors**:
**Border Colors**
**Text Colors**