IPL Data Visualization:

A web-app to visualize IPL data using datasets from Kaggle.

View the web-app:

• View it here
• To view this project locally, clone this repository, navigate to the project directory and run the following commands

npm install
touch .env
echo "VUE_APP_GMAPS_API_KEY=GOOGLE_MAPS_API_KEY" >> .env
npm run serve

Replace GOOGLE_MAPS_API_KEY with the API Key

Project Structure:

The visualizations have been divided into four sections - Teams, Players, Venues and Seasons and observations have been provided with the visualizations in a side card.

Major frameworks / libraries used in the project:

• Vue Framework: Used some features like virtual DOM for better performance, routing using vue-router package, data binding and a lot more.

• ChartJS: A simple and powerful API to create different types of charts with animations.

• vue2-google-maps: Vue Component library for integrating google maps in the app. Provides data-binding (which is hard to do with native maps API) with map features.

Bonus Points:

1. web-app created in vue.js: Developed in Vue.js using component architecture.
2. Loading time optimized by using the precalculated results from the given CSV files and directly using results from the json files generated. Also used CSS wherever possible for best performance.
3. The web-app is fully mobile responsive. It has an easy-to-use User Interface (UI) for a greater contrast and better visual appeal.
4. Tried to make it a Progressive web-app. It is fast, reliable and PWA optimized.
5. It is usable offline. This was done by caching the JS and CSS files after loading for the first time. The only drawback here is that the Google Maps (to view Venue details) will not work offline.