IPL DASHBOARD

Renders data beautifully and easy-to understand manner from a Kaggle Dataset of IPL matches between 2007 to 2017

Developed by Prakhar Tandon

Highlights

• ✅ Made Using ReactJS
• ✅ 100% responsive
• ✅ PWA
• Offline Useable (Partial)
  Loads a page "offline.html" while offline ( stored in cache using ServiceWorker )
• ✅ Optimised Load Time
  Optimal algorithms + index.html is also cached

Link to Dataset : https://www.kaggle.com/saurav9786/indian-premier-league-match-analysis

Tech Stack

• React JS
• Tailwind CSS Entire CSS and responsiveness made using Tailwind
• Material UI Used for making some components of UI such as Header and SideBar.
• Charts.JS ChartsJS is used to render the chart components such as Bar graphs and Doughnut Charts.

Features

• 100% Mobile Responsive
• Progressive Web App
• Loads a page "offline.html" while offline ( stored in cache using ServiceWorker )
• Single Page Application (SPA)
• Optimised Loading Time (index.html is also cached)

Deploy Link

https://prakhar-ipl-dashboard.netlify.app/

Dependencies

• tailwindcss, postcss, autoprefixer For using Tailwind CSS
• @material-tailwind/react Used for ui components namely card components, sidebar, navbar with Tailwind and MaterialUI
• chart.js The dependency for ChartJS
• react , react-dom , react-router-dom used for using React, JSX and build SPA

Local Setup

• yarn start
  To start the development server

• yarn build
  To build the project

Thanks for visiting, Do start the Repo.