IPL Trivia Dashboard

This is an data visualization app. This app visualises previous years IPL matches data. The dashboard consists of interesting trivia found when the dataset was studied. The data was taken from here and the trivias were taken from here.

Please do visit the Dashboard

This app uses the following technologies -

Main Technologies

  1. Vue Black Dashboard
  2. Vue.js
  3. Bootstrap 4

Plugins

  1. Chart.js
  2. Vue Good table
  3. Vue PWA
I build this frontend app using a premade Vue library that is Vue Black Dashboard and there are a number of benefits related to it -
  1. Complexity - An existing component library is built for many use cases. Which can be positive, because you can use a component in multiple situations. However, there’s a downside — this means it can be more complex to use for your own project.
  2. Time - When you’re starting out every component is already built for you.
  3. Adaptibility - As a developer, you need to create components with that look and feel. In most UI libraries there’s support for some theme-ability. This mainly means changing the colour palette used by all the components.
  4. Control - This ties in with adaptability. You can build your own component library for your exact use case.
I have also used Bootstrap for styling and that comes with its own advantages -
  1. Fewer Cross browser bugs
  2. A consistent framework that supports major of all browsers and CSS compatibility fixes
  3. Lightweight and customizable
  4. Responsive structures and styles
  5. Good documentation and community support
  6. Loads of free and professional templates, WordPress themes and plugins
  7. Great grid system
Some of the features includes -
  1. The app is made in Vue.js - It makes the app approachable, versatile, performant. The vue apps are small in size, easy to develop, simply integratable, and a lot more flexible.
  2. It is mobile responsive - With responsive web design, all content and pages are flexible across all screen resolutions and devices. Providing an optimal experience for the user across the board, responsive web design means your user can read and navigate the site with minimum resizing and scrolling. With the Bootstrap 4 powerful mobile first flexbox grid system creating the responsive and mobile friendly websites and applications has become much easier.
  3. It is Progressive Web App - PWA development services aim to take advantage of several new features supported by browsers such as service workers and web app manifests allowing users upgrade web apps to progressive web apps in native applications. According to Alex Russell, ‘Progressive Web Apps are just websites that took all the right vitamins.’I have added Vue PWA plugin. And it is very easy to configure and use.
  4. It is offline useable - As it is a PWA app. One of the feature of the app is that it can be used in slow network area and also offline.

--Feel free to open issues and contribute to the project