Giter Club home page Giter Club logo

ipl-dashboard's Introduction

IPL DASHBOARD

Netlify Status

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.

ipl-dashboard's People

Contributors

prakhart111 avatar

Stargazers

Krishnansu Mohapatra avatar Raunak Agarwal avatar

Watchers

 avatar  avatar

ipl-dashboard's Issues

Add new graphs

  • Utilising the existing dataset, try adding some new valuable graphs.
  • Use ChartsJS

Update the Dataset.

  • Currently uses IPL match dataset up to 2017.
  • Update the dataset up to 2022 or 2023
  • You can get a matching dataset from Kaggle, and use it's JSON.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.