Inspiration
With the rising awareness of social issues in the world today, many people often want to support modern issues but don’t know how. One way people can help is by donating, but it can be confusing to determine what charity to donate to, and people may often feel like they have nothing to give. We want to encourage this demographic to donate what they can and make it as easy as possible for people to do so. Users can easily feel like they are giving back and slowly see how their contributions manifest into great efforts.
What it does
Once the user initiates the checkout flow for an e-commerce site, Pennies for Progress rounds up the total to a whole number. The user then selects an amount of change that will then be donated to a charity relevant to a modern issue, which is shown in the extension window. If the user chooses to make a donation, the user can then complete both the donation and the e-commerce transaction in one place.
How we built it
Our team utilized a myriad of tools to build our project - namely Node.Js, HTML, CSS, and Typescript. We employed Git as our version control method, ESLint/prettier for error detection/formatting, and used the powerful Node Package Manager (NPM) to structure our code base. We implemented the extension using existing API’s, but created our own designs and webpages that were dynamically supported by Javascript files. Before the bulk of this work, we drafted our vision for the project through Figma and used the designs we came up with as the basis for our new extension.
Challenges we ran into
The intricacies of building your own browser extension was far more convoluted than we expected. The basis of the extension API was simple, but customizing it to our wants and needs proved to be more challenging than we thought - in particular working with injecting content scripts and pulling data out of the webpage that the extension executed on was difficult because different websites have different layouts and css identifiers. This gave us less time to explore additional potential features that we thought we could attempt to make, such as a monthly summary of your donations or a UI interface to choose a charity of your choosing instead of having default choices.
Accomplishments that we're proud of
We are proud of replicating our Figma prototype very closely in the final demo. A lot of effort was put into the design and branding of our extension. Many charities also require a minimum amount of one dollar as a donation, so we were able to adjust to that requirement and provide round-up options for the user accordingly.
What we learned
Due to the short timeline, we learned to focus on the key feature that would be shown in our minimum viable product instead of being too ambitious with bonus features.
What's next for Pennies For Progress
We want to build upon existing features to be able to read more about charities & what they stand for so users can donate to a variety of causes. We also want to explore more fun and interactive ways for users to see how much money they’ve raised over time, as well as comparisons to other donors of the same cause and sharing options for friends making similar donations. Finally, we also want to consider lumping together all the donations at the end of the month instead of trying to donate every time as many charities have minimum donation amounts.
Log in or sign up for Devpost to join the conversation.