aatifansari / ipl-dashboard

Full-stack web application build using SpringBoot and React.

IPL DashBoard

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage

About The Project

Full-stack web application build using SpringBoot and React.

Features:

• View individual team performance by year.
• View all team matches for the past years.
• Pie-Chart - Display the team performance for the particular season.
• Http Basic authentication implemented using Spring Security.
• Secured REST- Point using JWT token for authorization.

Built With

• SpringBoot 2.7
• SpringSecurity 5.7
• SpringBatch
• SpringData JPA
• MySQL
• React

---

Getting Started

Server Installation

Prerequisites

• Java 8
• Set JAVA_HOME in environment variable
• Maven (optional)
  Run below command to check java and maven is installed correctly.

java --version

mvn --version

Note: Use ./mvnw in place of mvn if maven is not installed. If on Unix system give permission using below code.

chmod +x ./mvnw

1. Clone the repo

git clone 'https://github.com/aatifansari/ipl-dashboard.git'

2. Install Maven project

Navigate to root directory and install the maven project.

cd ipl-dashboard
mvn clean install

3. Run the application

mvn spring-boot:run

OR

Navigate to target directory where jar is created and run the below code.

java -jar ipl-dashboard-0.0.1-SNAPSHOT.jar

Step 4: Accessing the Application

Once the application is running, you can access it in your web browser at http://localhost:9000.

---

UI Installation

Prerequisites

• Nodejs
  Run below command to check node is installed successfully.

node --version

Step 1: Clone the Repository

git clone 'https://github.com/aatifansari/ipl-dashboard.git'

Step 2: Install NPM packages

Navigate to frontend directory and install the required NPM packages using the below command

cd ipl-dashboard/src/frontend
npm install

Step 3: Run the application

To start the application, run the following command. This will run the application on the default port http://localhost:3000.

npm start

Step 4: Accessing the Application

Once the application is running, you can access it in your web browser at http://localhost:3000.

Additional Notes

• Custom Port: If you need to run the application on a different port, you can specify it by modifying the start script in the package.json file or by setting the PORT environment variable before running npm start.

---

Docker Installation Guide

This guide provides step-by-step instructions to set up and run the Project Name application using Docker image.

Prerequisites

• Docker Desktop (Docker Daemon)
  Before you begin, ensure you have installed and running on your system. You can download Docker from Docker's official website. Run below code to check docker version.

docker --version

Step 1: Clone the Repository

Clone the ipl-dashboard repository

git clone 'https://github.com/aatifansari/ipl-dashboard.git

Step 2: Build the Docker Image

Navigate to the project directory and build the docker image using the provided DockerFile

cd ipl-dashboard/src/frontend

docker build -t ipl-dashboard-ui:0.0.1-RELEASE .

Step 3: Run the Docker Container

Once the image is built, you can run the docker container using the following command:

docker run -p 8080:80 --name ipl-dashboard ipl-dashboard-ui

Note: -p is used to forward network calls on container port:80 to your system port:8080

Step 4: Access the Application

Open a web browser and navigate to http://localhost:8080 to access the application.

---

Usage

• Login Screen

• Home Page

• Team Page

• Match Page

(back to top)