Inspiration

As a 2nd-year Electronic Engineering student, I wanted to compensate for missed opportunities during high school and prove myself by excelling in hackathons. Despite having dreams of pursuing Computer Science, I focused on creating meaningful projects that I’m proud of and that contribute to society. ChartMate is a tool I developed to aid in my other project, a smart RFID parking system, by simplifying data analysis and visualization.

What it does

ChartMate is a versatile tool that allows users to visualize .xlsx files in Canva by choosing from four different chart types. It generates a .png file of the chart and offers basic statistical summaries. This functionality not only aids in understanding data but also integrates seamlessly with Canva for further design work.

How we built it

Building ChartMate was a learning experience, especially given my limited knowledge of React and web development. The comprehensive Canva Dev documentation was invaluable, providing the guidance needed to integrate Canva’s design elements effectively. The project was developed with React, Chart.js, and ExcelJS to handle file uploads, chart rendering, and data extraction.

Challenges we ran into

  • Finding Like-Minded Teammates: It was challenging to find teammates who shared my interest in such technical projects.
  • JavaScript Dependencies: Managing vulnerabilities in JavaScript dependencies required careful attention.
  • Documentation Gaps: The lack of relevant examples in the documentation for my specific implementation was a hurdle.

Accomplishments that we're proud of

  • Successfully integrating various technologies into a cohesive tool.
  • Creating a user-friendly application that bridges data analysis and visualization with Canva’s design capabilities.

What we learned

  • React and Web Development: Gained practical experience in React and learned how to leverage Canva’s API effectively.
  • Documentation Navigation: Learned the importance of thorough documentation and how to navigate gaps in available resources.

What's next for ChartMate

  • Enhanced User Analytics: Plan to incorporate better user analytics, including requests to AI APIs like Falcon, to gain deeper insights into user interactions.
  • Interactive Visuals: Aim to develop more dynamic and interactive visual elements to further enhance user engagement and data presentation.

Built With

  • canva
  • canva/app-ui-kit
  • canva/asset
  • canva/design
  • chart.js
  • css
  • exceljs
  • fetch
  • javascript/typescript
  • react
Share this project:

Updates