## Inspiration

Lyft's round up and donate system really inspired us here.

We wanted to find a way to benefit both users and help society. We all want to give back somehow, but don't know how sometimes or maybe we want to donate, but don't really know how much to give back or if we could afford it.

We wanted an easy way incorporated into our lives and spending habits.

This would allow us to reach a wider amount of users and utilize the power of the consumer society.

## What it does

With a chrome extension like "Heart of Gold", the user gets every purchase's round up to nearest dollar (for example: purchase of $9.50 has a round up of $10, so $0.50 gets tracked as the "round up") accumulated. The user gets to choose when they want to donate and which organization gets the money.

## How I built it

We built a web app/chrome extension using Javascript/JQuery, HTML/CSS.
Firebase javascript sdk library helped us store the calculations of the accumulation of round up's.
We make an AJAX call to the Paypal API, so it took care of payment for us.

## Challenges I ran into

For all of the team, it was our first time creating a chrome app extension. For most of the team, it was our first time heavily working with javascript let alone using technologies like Firebase and the Paypal API.

Choose what technology/platform would make the most sense was tough, but the chrome extension would allow for more relevance since a lot of people make more online purchases nowadays and an extension can run in the background/seem omnivalent.

So we picked up the javascript language to start creating the extension. Lisa Lu integrated the PayPal API to handle donations and used HTML/CSS/JavaScript to create the extension pop-up. She also styled the user interface.

Firebase was also completely new to us, but we chose to use it because it didn't require us to have a two step process: a server (like Flask) + a database (like mySQL or MongoDB). It also helped that we had a mentor guide us through. We learned a lot about the Javascript language (mostly that we haven't even really scratched the surface of it), and the importance of avoiding race conditions. We also learned a lot about how to strategically structure our code system (having a background.js to run firebase database updates

## Accomplishments that I'm proud of

Veni, vidi, vici.

We came, we saw, we conquered.

## What I learned

We all learned that there are multiple ways to create a product to solve a problem.

## What's next for Heart of Gold

Heart of Gold has a lot of possibilities: partnering with companies that want to advertise to users and social good organizations, making recommendations to users on charities as well as places to shop, game-ify the experience, expanding capabilities of what a user could do with the round up money they accumulate. Before those big dreams, cleaning up the infrastructure would be very important too.
## Inspiration

**Read something, do something.** We constantly encounter articles about social and political problems affecting communities all over the world – mass incarceration, the climate emergency, attacks on women's reproductive rights, and countless others. Many people are concerned or outraged by reading about these problems, but don't know how to directly take action to reduce harm and fight for systemic change. **We want to connect users to events, organizations, and communities so they may take action on the issues they care about, based on the articles they are viewing**

## What it does

The Act Now Chrome extension analyzes articles the user is reading. If the article is relevant to a social or political issue or cause, it will display a banner linking the user to an opportunity to directly take action or connect with an organization working to address the issue. For example, someone reading an article about the climate crisis might be prompted with a link to information about the Sunrise Movement's efforts to fight for political action to address the emergency. Someone reading about laws restricting women's reproductive rights might be linked to opportunities to volunteer for Planned Parenthood.

## How we built it

We built the Chrome extension by using a background.js and content.js file to dynamically render a ReactJS app onto any webpage the API identified to contain topics of interest. We built the REST API back end in Python using Django and Django REST Framework. Our API is hosted on Heroku, the chrome app is published in "developer mode" on the chrome app store and consumes this API. We used bitbucket to collaborate with one another and held meetings every 2 - 3 hours to reconvene and engage in discourse about progress or challenges we encountered to keep our team productive.

## Challenges we ran into

Our initial attempts to use sophisticated NLP methods to measure the relevance of an article to a given organization or opportunity for action were not very successful. A simpler method based on keywords turned out to be much more accurate.

Passing messages to the back-end REST API from the Chrome extension was somewhat tedious as well, especially because the API had to be consumed before the react app was initialized. This resulted in the use of chrome's messaging system and numerous javascript promises.

## Accomplishments that we're proud of

In just one weekend, **we've prototyped a versatile platform that could help motivate and connect thousands of people to take action toward positive social change**. We hope that by connecting people to relevant communities and organizations, based off their viewing of various social topics, that the anxiety, outrage or even mere preoccupation cultivated by such readings may manifest into productive action and encourage people to be better allies and advocates for communities experiencing harm and oppression.

## What we learned

Although some of us had basic experience with Django and building simple Chrome extensions, this project provided new challenges and technologies to learn for all of us. Integrating the Django backend with Heroku and the ReactJS frontend was challenging, along with writing a versatile web scraper to extract article content from any site.

## What's next for Act Now

We plan to create a web interface where organizations and communities can post events, meetups, and actions to our database so that they may be suggested to Act Now users. This update will not only make our applicaiton more dynamic but will further stimulate connection by introducing a completely new group of people to the application: the event hosters. This update would also include spatial and temporal information thus making it easier for users to connect with local organizations and communities.
## Inspiration

>
> We've listened to our friends worry about their online purchases time and time again. We figured we should build them something to reassure them while we're away at hackathons.
>
>
>

---

## What it does

>
> The Chrome extension has two modes: encouragement (functional!) and restraint (in development). When the encouragement mode is enabled, Inner Voice provides high-level reassurance about a product once you add it to your Amazon cart. In restraint mode, Inner Voice convinces you you're better off without buying that set of expensive pencils.
>
>
>

---

## How we built it

>
> We used React to set up the extension. We created a component that sends information about the product and the desired tone to the OpenAI API.
>
>
>

---

## Challenges we ran into

1. Using React as a content script. Content scripts have the functionality to access elements of the DOM. In our case, to query for "add to cart" onClick events and display snackbar popup. To achieve the same thing, we had to eject React components and configure build options.
2. Persistent state management. React has built-in state management (useState), [but the state gets deleted on every instance on opening the popup/browserAction](https://stackoverflow.com/questions/23477319/dont-reload-the-popup-in-a-chrome-extension). A solution would be relying on chrome's build-in persistent storage through background script communication.
3. Extracting the correct text (and only the correct text) from the OpenAI API responses was tough. Parsing the data from the response inside queries often returned errors. Eventually, we found a way to save it in a variable.

---

## What we learned

* Fundamentals of React development
* Fundamentals for TailwindCSS
* Fundamentals of Chrome Extension development
* Limitations to a React solution to Extension development
* Integration of the OpenAI API

---

## What's next for our team

>
> [Eyas](https://www.linkedin.com/in/eyas-valdez-699475172/) is graduating from Carleton University with a Bachelor of Computer Science this year. He's passionately working on personal projects while working at an Ottawa-based public relations firm. Always open to new opportunities!
>
>
> [Jaleelah](https://www.linkedin.com/in/jaleelah-ammar-01763a182/) is in her third year of study at the University of Ottawa pursuing a B.Sc. in Computer Science [Co-op]. She is currently working as a Malware Research Assistant at Nokia and will be looking to enter more cybersecurity competitions and teams in the future.
>
>
>