As the youngest generation of voters, we are confronted with the daunting task of understanding the current politico-economic landscape and drawing some sort of conclusion based on the information we're given. In that struggle, we realized just how inaccessible the fiscal policy of political candidates is and set out on a task of putting together a data visualization tool to help youth, new entrants to Canada, and current citizens better understand where their tax money goes and to help make informed political decisions.

What it does

taxmaps is comprised of 4 main features following a home screen and an anonymous input form:

  1. Personal Breakdowns: customized breakdown values based on the form input and detailed, responsive provincial and federal breakdown charts
  2. Property Tax Map: interactive heat map displaying how high relative property taxes are in 35 different cities across Ontario made using the google maps API
  3. Political Candidates: operational and budget breakdowns of 2019 election candidate platforms (proof of concept to be used in the future during election season) with responsive charts, summarized data, and biographies
  4. Upload Receipts: Functionality that allows users to upload images of their receipts and we plot an itemized breakdown of tax deductible purchases powers by google vision API

How we built it

  • taxmaps is a webapp built using react (HTML, CSS, JavaScript) and Node
  • UI/UX component libraries used included bootstrap, and chart.js for the reactive front-end components
  • google-maps and google vision supported the front-end functionality of 2 core features: heat map and receipt scans
  • Back-end data was stored in JSON files and after parsing through data-dense government reports published by municipalities, the Provinces, and Government of Canada

Challenges we ran into

  • Integrating the front-end and back-end together while working remotely, we overcame this challenge by sharing screens and maintaining organized code on GitHub for version control
  • Routing screens in React since every screen lead to every other screen, we had difficulties debugging this portion of the web app, we overcame this challenge by
  • Finding and sorting through relevant data since most data was contained in lengthy government reports from each level of government,

Accomplishments that we're proud of

  • Proud of the polished UI/UX of the project since we built the front-end from scratch
  • We felt very accomplished after going through and organizing the plethora of data we started with into something more comprehensive in the end
  • Our code was relatively well-organized and broken up into functional modules and react components
  • Anonymity of our data, we did not associate user data with accounts or names and passed them through during the session
  • Being about to combine our business and computer science knowledge to create a product that does not exist

What we learned

  • How to store input from forms and to check for valid form entries
  • How to better organize data into JSON files and parse through them
  • A lot of non-technical knowledge as well about our tax system and where money is allocated (Windsor has one of the highest property tax rates in Canada!)

What's next for taxmaps

  • Partnering with different levels of Governments for more detailed tax information and data
  • More research into the funded segments to provide web app users with further clarity into different projects the tax money has funded
  • Expanding to create a mobile application to make the application more universally accessible
  • Migrating the react app to our domain
+ 11 more
Share this project: