IPL Dashboard using ReactJS ⚛

Live demo - https://srikanth-kandi.github.io/react-ipl-dashboard/

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

Refer to the image below:

Design Files

Click to view

Set Up Instructions

Click to view

Local Development

Download dependencies by running pnpm install
Start up the app using pnpm start

Docker Setup (Recommended)

Build and run with Docker Compose:
```
docker-compose up --build
```

Or run with Docker directly:

docker run -d --name ipl-dashboard -p 3000:80 srikanthkandi/react-ipl-dashboard:latest

Access the app at http://localhost:3000

Production Deployment

Build and push to Docker Hub:

# Windows
.\build-and-push.bat v1.0.1 srikanthkandi

# Linux/Mac
./build-and-push.sh v1.0.1 srikanthkandi

Deploy on Ubuntu server:

# Run container
docker run -d --name ipl-dashboard -p 3001:80 srikanthkandi/react-ipl-dashboard:latest

# Or with docker-compose
docker-compose up -d

Configure Nginx reverse proxy (add to your existing Nginx config):

location /ipl/ {
    proxy_pass http://127.0.0.1:3001/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
}

Docker Files

The project includes the following Docker files:

Dockerfile - Multi-stage production build with Nginx
docker-compose.yml - Simple orchestration for local and production
nginx.conf - Nginx configuration for serving the React app
build-and-push.bat / build-and-push.sh - Scripts to build and push to Docker Hub
run-container.bat / run-container.sh - Scripts to run the container easily
nginx-config-example.conf - Example Nginx reverse proxy configuration

Docker Commands

Local Development

# Build and run with Docker Compose
docker-compose up --build

# Run in background (detached mode)
docker-compose up -d --build

# Stop containers
docker-compose down

# View logs
docker-compose logs -f

# Rebuild and restart
docker-compose up --build --force-recreate

Docker Commands (Direct)

# Build image locally
docker build -t srikanthkandi/react-ipl-dashboard:latest .

# Run container
docker run -d --name ipl-dashboard -p 3000:80 srikanthkandi/react-ipl-dashboard:latest

# Run on custom port
docker run -d --name ipl-dashboard -p 8080:80 srikanthkandi/react-ipl-dashboard:latest

# Stop container
docker stop ipl-dashboard

# Remove container
docker rm ipl-dashboard

# View logs
docker logs ipl-dashboard

# Follow logs in real-time
docker logs -f ipl-dashboard

# Execute commands inside container
docker exec -it ipl-dashboard sh

# Check container status
docker ps

# Check all containers (including stopped)
docker ps -a

Docker Hub Operations

# Build and push to Docker Hub (Windows)
.\build-and-push.bat v1.0.1 srikanthkandi

# Build and push to Docker Hub (Linux/Mac)
./build-and-push.sh v1.0.1 srikanthkandi

# Login to Docker Hub
docker login

# Pull latest image
docker pull srikanthkandi/react-ipl-dashboard:latest

# Push specific tag
docker push srikanthkandi/react-ipl-dashboard:v1.0.1

Container Management

# Update container to latest version
docker pull srikanthkandi/react-ipl-dashboard:latest
docker stop ipl-dashboard
docker rm ipl-dashboard
docker run -d --name ipl-dashboard -p 3000:80 srikanthkandi/react-ipl-dashboard:latest

# Restart container
docker restart ipl-dashboard

# Check container health
docker inspect ipl-dashboard

# View container resource usage
docker stats ipl-dashboard

# Clean up unused images
docker image prune -f

# Clean up everything (containers, networks, images)
docker system prune -a

Troubleshooting

# Check if port is in use
netstat -tulpn | grep :3000

# Test container connectivity
curl http://localhost:3000

# Check nginx configuration inside container
docker exec ipl-dashboard nginx -t

# View nginx access logs
docker exec ipl-dashboard tail -f /var/log/nginx/access.log

# View nginx error logs
docker exec ipl-dashboard tail -f /var/log/nginx/error.log

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

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.

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
public		public
src		src
.dockerignore		.dockerignore
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
Dockerfile		Dockerfile
README.md		README.md
build-and-push.bat		build-and-push.bat
build-and-push.sh		build-and-push.sh
docker-compose.yml		docker-compose.yml
nginx-config-example.conf		nginx-config-example.conf
nginx.conf		nginx.conf
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
run-container.bat		run-container.bat
run-container.sh		run-container.sh

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

IPL Dashboard using ReactJS ⚛

Refer to the image below:

Design Files

Set Up Instructions

Local Development

Docker Setup (Recommended)

Production Deployment

Docker Files

Docker Commands

Local Development

Docker Commands (Direct)

Docker Hub Operations

Container Management

Troubleshooting

Completion Instructions

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

Method: `GET`

Description:

Response

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

Example: `https://apis.ccbp.in/ipl/KKR`

Method: `GET`

Description:

Response

Quick Tips

Important Note

Resources

Things to Keep in Mind

About

Uh oh!

Uh oh!

Languages

srikanth-kandi/react-ipl-dashboard

Folders and files

Latest commit

History

Repository files navigation

IPL Dashboard using ReactJS ⚛

Refer to the image below:

Design Files

Set Up Instructions

Local Development

Docker Setup (Recommended)

Production Deployment

Docker Files

Docker Commands

Local Development

Docker Commands (Direct)

Docker Hub Operations

Container Management

Troubleshooting

Completion Instructions

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

Method: GET

Description:

Response

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

Example: https://apis.ccbp.in/ipl/KKR

Method: GET

Description:

Response

Quick Tips

Important Note

Resources

Things to Keep in Mind

About

Resources

Uh oh!

Stars

Watchers

Forks

Uh oh!

Languages

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

Method: `GET`

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

Example: `https://apis.ccbp.in/ipl/KKR`

Method: `GET`