“I want to contribute to #BlackLivesMatter, but I don’t know where to start.” That statement served as the starting point for our team’s hack this weekend. In the past few months, the world has seen several high profile social or political movements and causes arise from social media and remembered through hashtags: #MeToo, #BlackLivesMatter, #HKProtests. Despite its shortcoming, social media is indeed a powerful tool that can be used for the common good. Twitter is a good place where you’re exposed to what’s happening in the world. However, when we come across such hashtags from the comfort of our homes, we feel a certain degree of helplessness watching the events unfold.

“Actions speak louder than words.” In addition to engaging in the conversation online, people could act on issues that matter to them. Depending on the cause, these could be donations, volunteering opportunities, real-time events, or even reading resources. However, this information often isn’t known to everyone or is accessible in a way that is quick and effortless.

Every single contribution matters, and we’re all facing these issues together as one society. Learning more about a cause that matters to you and providing you with information to do so is the essential value proposition of our idea.

What it does

Meet HelpTag! It is a Chrome extension that adds subtle enhancements to your Twitter experience which allows you to quickly browse through actionable, crowdsourced links related to a hashtag that you see on your feed. If a particular hashtag on your feed is being used for a particular movement or cause, our extension would allow you to explore ways you can contribute to what’s going on out there. Categories such as ‘Donate’ and ‘Volunteer’ allow you to browse through links within the contribution method of your liking.

Want to donate to a protest relief organization? Want to volunteer your home as a wildfire shelter? Want to know more about the protests in Nigeria regarding SARS? HelpTag can point you in the right direction, instantly.

How we built it

We focused on building a simple, effective, and robust tool that is paired with a seamless user experience and a clean interface. Having brainstormed the idea through a whiteboard discussion, we were able to define the scope and value propositions of our project early on. We created mockups early on using Figma to explore directions in the visual and interaction design of our solution.

We created the interface by injecting HTML, CSS, JavaScript into twitter's DOM element through a Chrome Extension. Several libraries were used to achieve the required interaction patterns. These included bootstrap, jQuery, fontAwesome.

We used Google’s Firebase to create a cloud-based NoSQL Database storing all of our crowdsourced information on resources. The data is stored as JSON and synchronized in real-time to every connected user at all times. We relied heavily on Google Developer Tools for troubleshooting and deployment of the extension on the browser.

Finally, we spent two whole days online on Twitter.

Challenges, accomplishments, and reflections

We ran into several challenges while developing the tool. Understanding the front-end deployment of Twitter was challenging, but necessary to make the necessary UI adjustments to the interface. Deciding what theme to tackle was a challenge as well. We decided to prototype the solution for one theme for the scope of this hackathon. Another challenge was considering the business goals a solution like this could accomplish.

The team is proud of what they come up within the span of two days. The tool solves a real problem faced by our acquaintances. The team accomplished a good level of attention to detail with the solution.

In hindsight, we would have wanted to start working on the solution earlier. We had to pivot from another idea because we found this idea more exciting, but we lost a significant chunk of time pursuing another idea.

What's next for HelpTag

Based on our initial brainstorm, there were a few ideas that seemed beyond the scope of the hackathon but added essential value propositions to the product. If we spend more time on building the extension, we have a mini product feature map ready:

  • Personalized recommendations. (ex: location-based: events near you)
  • Light and Dark modes to match the display options on Twitter.
  • Link aggregation using correlation scores for various hashtags.
Share this project: