A dashboard for tracking and analyzing Pokemon Trading Card Game data.
- Node.js (v18 or higher)
- Yarn package manager
- Install dependencies:
yarn- Run the development server:
yarn devThe application will be available at http://localhost:5173.
These are some of the features I would have liked to implement if I had more time. They are not ordered in any particular way.
-
Page
- Is not responsive.
- There was no page for Trainer or Energy cards.
- Accessability for the charts is severly lacking, they should at least have had aria labels with descriptions of the chart, data and any insights (min, max, average, etc).
-
Charts
- The pie chart colours are missing gradients and the colours are not the same as in the bar chart. It is important to make sure the colours are consistent for ease of use.
- The bespoke barcode chart should have had a tooltips to help users understand the chart.
- The bespoke barcode chart should also have a legend to explain the colors of the "bars".
- I wanted to add annotations to the charts (min, max, average, outliers, etc).
-
Code
- Testing of the data was not done and is something I usually do.
- I should have extracted the data transformation into a utility module.
- I started by exploring the data in an Observable notebook and created a few charts to get an understanding of the data.
- I then started to create the dashboard in React using d3.js and Apache Echarts to create the charts.
- I used Vite to setup the project as the dashboard is small and does not require a meta framework.
- I used TanStack Table as a headless table for the data table component as it abstracts away all the complexity of the table functionality, ie sorting, filtering, pagination, etc, while still allowing me to customize the table to my needs.
- I used Tailwind CSS for styling as it is very lightweight approach to styling.
- I used Shadcn UI for the components as I like how easy they are to style, modify and use.