A web-app to visualize IPL data using datasets from Kaggle.
- 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
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.
-
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.
- web-app created in vue.js: Developed in Vue.js using component architecture.
- 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.
- The web-app is fully mobile responsive. It has an easy-to-use User Interface (UI) for a greater contrast and better visual appeal.
- Tried to make it a Progressive web-app. It is fast, reliable and PWA optimized.
- 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.