Inspiration
Inspired by desktop pets, we want to make an e-pet that has more inspiring aspects to it. Greenhouse gas has been a prominent issue recently and we wanted to make an extension to help bring people's attention to it. Also Mastercard had a handy API for this!
What it does
Our extension keeps track of your carbon footprint from online purchases. You can input how much you spent and where it was spent, and it will calculate a carbon total for you. In addition, as your total goes up, your pet (cactus for right now) grows more sad and sick. There are ways to help it feel better, like play with it or by learning more about your Carbon Footprint.
How we built it
We first tried connecting to Mastercard's API. This made us realize we needed to make a webserver, so we created a Node.js server. The server would talk to Mastercard's API, and our Chrome extension would talk to the server. We also used HTML and CSS to create the Chrome extension, and use Chromes' local storage to remember your total.
Challenges we ran into
Using the API was difficult at first; no one knew what was happening in the example code and we had no prior knowledge. However, with enough tinkering and pure luck, we were able to use knowledge of fetch requests with information from other parts of Mastercard's website to get our project running. Learning to use the API was a good experience. On the extension, the extension would sometimes not remember a sadness or total value, which we solved by adding a delay so there was enough time for our request to save. Also making so many animations was tiring.
Accomplishments that we're proud of
It was really scary to learn to using a new API, or even an API in general. None of us had experience in that department, and we felt really lost looking at the example code. We feel proud that we stuck with our API, and didn't give up trying to figure out how to use it even when we got errors we've never heard of. Also, the cactus pet came out cute!
What we learned
Things we might have had experience with before, like a fetch request, can be used in other contexts like fetching from Mastercard's API. Also, don't be intimidated from trying to figure something new out, prior knowledge can also come a lot in handy here.
What's next for The Botanical Carbon
Right now, the extension makes the user keep track of their purchases and where they're made. We want to automatically add their purchases to their Carbon total so it is not an optional action. More animals/ plants would be cool too, and more ways to interact with or make your pet happy :)
Log in or sign up for Devpost to join the conversation.