IPL DASHBOARD is a NextJS project bootstrapped with create-next-app. For versioning, check all the Pull requests, they're in order of the development.

Running locally

Firstly, install node modules

npm i
# or
yarn

Secondly, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Page Speed Insights

Page speed is calculated by Google Page Speed Insights
The first contentful paint takes 2.1s and has an average rating of 97/100.

However, caching is done internally by NextJS, so the first hit record a rating of 67/100, subsequent hits are cached and has a rating of 95/100.

This feature of NextJS is powerful since it is a SSG, it feels almost seamless while transitioning from one page to the other.

Project Structure

The project is majorly structures in Three parts:

1. Components (Here all the reusable components live ex: Navbar, Header, PlayerTable, RunsTable etcetera)
2. Pages (Here all the routes are listed, every route uses components internally)
3. Styles (Basic styling is used for styling the application to make it look minimal and simple).

Entire project is divided into small components which are reusable and easy to understand providing with the capability of scalability without sacrificing on the UI part.

Backend

Backend is hosted on Heroku, I converted the dataset from csv, excel files to JSON and hosted them on Heroku.
Link for backend
Every REST API serves its purpose

• /teams for getting individual team details
• /players for getting all the players
• /averageStrikerate for getting all strikerates
• /matches for getting all matches details
• /most_runs_average_strikerate for getting most runs and average strike rate for every player
• /teams_home_and_away_statistics for teams home and away statistics

Screenshots

Homepage

Teams Page

Team statistics

Player Details

Individual Players

Individual Strikerate

Average Strikerate & Most Runs for all players

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deployed on Vercel

The project is deployed on Vercel.