Mind the Gap encourages users to be more charitable by setting a monthly point goal, and they can earn points by engaging in charitable action, such as contacting a congressional representative or donating to a charity. Users are able to redeem points earned for free events/services provided by partner sponsors,(disclaimer we are not actually affiliated with any of the companies listed) rewarding them for doing good.
This web app focuses on using real external data from APIs along with stored user progress information to create clean data visualizations for a seamless tracking over time. The data from APIs provide accurate, up-to-date contact information for congressional representatives, along with active non-profit organizations that accept donations. D3 visualizations bring our user data to life, creating visuals that allow users to easily stay informed on their monthly progress. Using Google's Material UI as a design template, we were able to implement our app as a progressive web app.
This was created using PostgreSQL and sequelize along with Node.JS and Express in the back end React-Redux for the front end. We also used Material-UI to help with styling Our application also displays progress for our users in multiple ways. We used D3 and other React libraries built on D3, like Recharts for this. Propublica API was used to gather the Congressional Data, and OrgHunter API to find all the charities users can donate to.
If you wish to see us demonstrating our app please follow this link: https://www.youtube.com/watch?v=ygL3auX0LhM&feature=youtu.be And our deployed website: https://mind-the-gap4.herokuapp.com/