Simple Analytics

• 

  Simple Analytics

Inspiration

Live dashboards with simple data-drilling techniques immediately came to mind when I used monday.com for the first time. They provide such a wealth of granular data on users' boards with a few quick ways to shape the data to paint a more informative picture. The best thing about such a dynamic product is the endless number of creative ways one can shape such data to paint different pictures, or insights.

What it does

Simple Analytics filters a boards data specifically focusing on the 'Color' column. It provides a bar chart, pie analysis and subset of items in a table with as little as 2-to-3 clicks.

How I built it

I built the app using ReactJS, ChartJS, React-Bootstrap and Material UI. I mainly used Bootstrap and Material for formatting and styling, while ChartJS was used to display group data in a bar chart and item data in a pie chart.

Challenges I ran into

I initially started the project very strong and ambitious. I developed a complicated proof of concept while learning GraphQL for the first time. Each time I could work on it I found myself refactoring code more than developing new functionality. This started affecting my time management and reminded me of the importance of planning and choosing a design principle that fits the project.

Accomplishments that I'm proud of

I'm proud that I was able to build a tool of this nature from start to finish, as well as completing my first Hackathon. I am also proud for learning GraphQL and improving my skills in ReactJS.

What I learned

This is my first Hackathon in the professional world and I'm proud of learning about GraphQL, integrating with a platform like Monday.com, massively improving my understanding of React's component lifecycle, and learning a few important lessons on time management.

What's next for Simple Analytics

Currently, the app only focuses on one popular column type, which I would like to eventually extend to as many other column types as possible. I would also like to add more ways to shape, view and export data with minimal input from the user.

Built With

• chartjs
• graphql
• material-design
• react
• react-bootstrap