https://github.com/mukuljainx/ipl-dashboard
https://github.com/mukuljainx/ipl-dashboard
dashboard data-visualization react recharts
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/mukuljainx/ipl-dashboard
- Owner: mukuljainx
- Created: 2017-09-03T10:53:45.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-07T11:26:31.000Z (almost 9 years ago)
- Last Synced: 2025-06-25T23:03:16.092Z (12 months ago)
- Topics: dashboard, data-visualization, react, recharts
- Language: JavaScript
- Homepage: https://mukuljain.me/demo/ipl-dashboard/
- Size: 1.89 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IPL Dashboard
[Demo](https://mukuljain.me/demo/ipl-dashboard/)
### Data Pre-processing
As the given [data](https://www.kaggle.com/manasgarg/ipl) can not be used directly it is important to pre-process.
### Stack Used
**React.js**: React is fast, easy to use, component based, very popular.
**Recharts**: Reacharts library is based on d3js and built on react component, vastly customizable.
**Foundation**: Foundation is standard framework I use, because of extremely useful classes and familiarity
**react-router**: a Standard router for react.
### Bonus Points
1. **Optimize the loading time:**
1. Optimized loading time, by creating a basic HTML & CSS structure(similar to dashboard) with a loader, so user can see something, while browser is fetching JS.
2. By making API call when the user opens a particular tab or page.
2. **Mobile responsive**
1. Made the app responsive with foundation framework without and self-written media query
2. Two tabs contain the table, made them scrollable on small screens.
3. In Desktop graph filter and options are visible at once, but on mobile & tablets, user can use a button to switch between them so he doesn't have to scroll down much.
3. **Progressive Web App**
1. Created progressive web app, by installing service worker and saving all important files like the index, CSS, js by user installs the app.
2. Fulfilled
4. **Offline Usable**
1. Service worker catches every request app makes, whether on PC browser or via mobile app, so it can be used even when the internet is not available.
### Google Lighthouse report
### Issue
1. Better view than table for top players
2. Allow user to select from top players page, then jump to to comparison
3. Selection always visible so user can quickly remove one and add another.
4. **PWA** Cache the json response with some expiry data to app can work offline always.