Coalition: The DAPP We Deserve.

Coalition is a software with a web and mobile app component meant to assist protestors and social activists in creating and joining events.

Comment 2

What is Coalition?

Coalition is a platform for social activists that facilitates easy hosting and attendance of protest events. It consists of a web component where events can be found and signed up for, and a mobile app component where protestors can access resources to communicate with one another.

Features

  • Post Event: Organizers of protests can post events to our platform, allow people to sign up, and assign dispatchers for their event.
  • Go App: Once entered the protest the app allows users to click on 5 different buttons which records alerts and sends them to the dispatcher.
  • Dispatcher Portal: Dispatchers are able to look at a detailed heat map that visualizes data collected from our app and compare/contrast that with data collected from large databases.
  • Post News: Anyone can go in and share something. Allows us to provide a comprehensive solution to organizing protests.

Privacy and Security

The entire point of our product is to protect the freedoms of those who use it. As such, any sort of identification of users by those with malicious intent could lead to further suppression. As such, we took special measures to ensure that user privacy is kept extremely secure.

Post our login page, there are no customizable traits that can help identify an individual user. Hosting or attending an event requires low commitment as protesters can disperse on a whim. Furthermore, due to the decentralized model, there are no servers in which data about users are stored.

Web RTC connection between our users allows for real time, seamless, end to end encryption. Users are able to enjoy the benefits of privacy and security at no cost to them.

Background

Why are we afraid to use our voices?

The key foundation of the United States, and any developed country, are the ideals of life, liberty, and the pursuit of happiness. Yet despite this, in many countries around the world, millions of people are oppressed: whether it’s outright or systemic discrimination. In the United States alone, 7305 protests in support of the Black Lives Matter movement were held in the span of two months in 2020. The United States has historically set a precedent for the progressiveness of the world. So why are we unable to empower those who are still silenced by their governments? Why are other people not afforded the same human rights we are because of the place in which they live?

The simple answer? Fear. People comply with their oppression because they do not know how to resist. The entire reason the protests in Hong Kong are getting so much attention is because, despite having 25% of the total population there take part in protests, they are able to operate in secrecy and in a fluid manner. Imagine if we were able to imbue every oppressed population with that sort of courage. The entire world would no longer have to live in fear. Oppressive governments would be replaced with shining public officeholders who represent the people. In the long term, it could even spark the end of global issues such as terrorism.

Let’s address the elephant in the room. Or the donkey. Social platforms have had a well documented history of censorship: Facebook CEO Mark Zuckerberg was famously grilled in front of congress on censorship of conservative voices. On the opposite side of the aisle, conservative social media app Parler was taken down for promoting disunity in society post the 2020 election. It is evident that big tech has a political preference, and wants to maintain the status quo.

Like the people who we want to serve, we aimed to revolutionize the art of the demonstration. Coalition was formed as a way to do so. This decentralized platform allows people to quickly support the causes they are passionate about while protecting anonymity. By combining technology that utilizes geolocation, protestors are able to be aware of the authorities while supporting one another. This tool ensures that people are able to protect the freedoms that they are owed.

How It Was Built

Planning

With only 31 hours to spare, we knew we had to get started immediately on Coalition. After a delicious breakfast of a fried egg and a peanut-butter-and-jelly sandwich, we began our ideation process. Once we finished ideating, we each decided on our roles and created succinct tasks for us to complete.

All times are in Pacific Time. The hackathon began at 5AM PST on Saturday and ended 12PM PST on Sunday.

GANTT Chart with our schedule

Design

Our team needed a quick yet effective design process. So we chose the Double Diamond Design Process. This process, popularized by the British Design Council in 2005, guided us towards creating the best possible product we could. It includes four components: Discover, Define, Develop, and Deliver.

This process easily allowed us to research with both reputable sources and need finding. We then synthesized these findings into key components that we would then incorporate into our product.

Discover

Research

The activist culture in the Bay Area taught us early on that it would be ridiculous to design any product without the proper research going into it. First, we noted down some notable events to get data from. Hong Kong, Black Lives Matter Protests, and the India Farmers Protest were perfect candidates. Although they all focused on different topics, events in these areas allowed us to identify key patterns within protest styles regardless of country and cause. First, media portrayals of these protests demonized demonstrators via labeling them as violent. Governments who want to maintain the status quo often do this to minimize support for these causes. According to the Human Rights Watch organization, Hong Kong protestors have had over 10,000 rounds of tear gas fired at them. Similar cases can be found in BLM protests as well as Indian Farmers protests, where police officials have used violence to tune down demonstrations.

After recognizing the scale at which protests can lead to human injury, we realized that we needed to design a system that prioritized the safety of users. However, the human spirit is indomitable. As such, people may disregard their safety to fight for what they are passionate about. The American Psychological Association indicates that when people feel that they are wronged, they tend to respond in the most “readily available” manner. Therefore, the less organization available to potential protestors, the more likely the demonstration will devolve into a riot. As such, we wanted to incorporate a way for protestors to a) understand the logistics of a protest easily and b) communicate with one another. People desire order and their wellbeing, and optimizing that creates a better product for all.

Finally, the obvious issue of security. Not every country is like America where protests can be organized on public forums. Governments may attempt to suffocate these protests via utilizing our platform to track down users and arrest them. Therefore, we decided the final key component we needed to add was large degrees of anonymity. This maximizes information spread while minimizing personal risk.

Field Research

One of the key privileges of living in the Bay Area is how many people here are social activists. This allowed us to collect a wide array of responses on a Google Form survey pertaining to struggles people face while partaking in social activism. We got 14 responses. These people range from high schoolers to adults with families, indicating a diverse sample size.

Image of Google Form Used Proof of number of responses

Potential Users

We then decided on who our potential users might be from both our primary and secondary markets. Primary users are more prominent political figures while secondary users are people simply interested in politics.

User example 1 User example 2 User example 3 User example 4

Define

Our research yielded the following conclusions:

  • People are unable to communicate properly as a result of the chaotic nature of protests
  • Key fears that people have while taking part in protests include bodily harm or getting arrested
  • Many people are unaware about the causes that they should be passionate about
  • Many do not know where to start when it comes to becoming politically active

Bar chart with consolidated results Bar chart with key takeaways

Develop

Attached is our user flow. Of course, users are able to return to their feed at any time.

User flow

Deliver

Our aesthetic choices were completely decided on using basic UI and UX principles. Using the Roboto font, we were able to make our text easily readable, thus making our mobile and web app more accessible to all users. We used more muted colors so as to not hurt the eyes of users who may need to use the app in dark locations. Furthermore, we used easily recognizable icons to illustrate each of our actions. Our color palette, finally, is designed to bring the beautiful postmodern art style of popular applications.

Heat map of west coast of USA Map feature of mobile app Feed of mobile app

Desktop app image

Engineering

Coalition consists of two applications tied into the same server. Organizers and Dispatches use our webapp; Protesters and Attendees use our mobile application. Our web application allows organizers to create news posts, events, and discover trending content. Dispatchers can navigate to a dashboard where they are presented with data from protests, and other relevant information to make the best informed decisions.
Our mobile application allows users to locate the protests they have signed up for, and serves as a tactical tool that they can use. A map is displayed when they are at the protest, where they can see and give alerts based on authorities, medical emergencies, danger, supplies, and safe areas. The mobile application collects valuable information during the protests from the user and can send that information to a dispatcher. This allows for protests to be far more organized, goal oriented, and gives dispatchers a clear idea of what is going on.

System architecture

Front End

Our Web Application was built of React and Javascript. We dedicated a significant portion of time towards research of both our users and tech stacks Our mobile application was built on React Native and Javascript. We made use of the Google Maps API to display protests in a detailed manner such as location of, authorities, medical emergencies, supplies, and safe zones. We also made use of Twilio to send notifications to people in the protest and web application. Deck GL is used to visualize the data collected from the mobile app and is processed and displayed on our web application.

Back End

After spending hours surveying potential users, we developed a set of criterias for serving our unique demographic. Our tech stack was chosen with scalability, decentralization, and accessibility in mind. For our database, we ended up going with a weird combination of Firestore and GunJS. GunJS perfectly fits our requirements: the database is open source, completely decentralized, and has built in user privacy protocols (SEA); it has a proven track record when it comes to scalability (Hackernoon was able to cut down their server costs to 0 while serving 4 million monthly users); and it is fault-tolerant, offline-first, and real-time thus making it extremely accessible. The database utilizes P2P storage through the power of the WebRTC protocol. To implement, we established a backend relay server through Node and Express. Ironically enough, our other database was Google’s Firestore. We chose Firestore as Gun’s ecosystem is still relatively young, thus it was hard to completely integrate with the rest of our stack (ex: Gun is not supported on React Native Expo, so we went with Firebase Authentication to sink up the web and mobile apps). Firestore was also a good option as its DocumentDB paradigm is very similar to Gun’s graph structure, giving it many of the same benefits as Gun as well as making it viable to migrate into Gun in the future (plus Firebase has nice SDKs, integrated nicely with some other components, and is super easy to set up for a hackathon).

For our mobile and app frontends, we utilized React/React-Native with Chakra-UI for a consistent design. We love React for its rich ecosystem, which makes it really simple to find boilerplate components for more complex business logic. Additionally, we are syncing up google maps with DeckGL, Uber’s open source library for elevating data representation. We have combined these two technologies to give both activists and first-responders a more comprehensive understanding of the easily escalatory environment through a heat-map representation of their immediate surroundings. With the additional combination of the Twilio API, we hope to encourage more passionate individuals to safely stand up for their beliefs.

Take a look at our system architecture to learn about the key resources that we used.

Research

All sources are cited in APA format.

Takeaways

What We Learned

This hackathon was extremely enlightening in several ways. Due to the 31 hours that we were allotted, time very quickly became a focal point. As such, we learned to better manage our resources and pace ourselves to avoid burnout. This was essential as we also wanted to submit a product we would be (and are) proud of. This was the first hackathon where we used resources such as proven design philosophies and real-world statistics to support our product. Finally, the usage of proven tools like the Double Diamond, GANTT chart, and surveys from real people corroborated our plan. Understanding the time commitment as well as fitting the scope of our project into the restraints provide new insight. Furthermore, it allowed us to take what we learned about research and management and actually apply it.

Gun.js and Deck GL are two technologies that were brand new to all of us, and despite the challenges in working with them we persisted on using them because of their unique advantage to our project. Gun.js allows us to make our application’s database decentralized, thus giving more power to the people. Deck GL is also very powerful, allowing us to analyze and visualize the data that we collect through mobile applications and display it on our web application.

Accomplishments

This project has been a big step forward for our entire team, as we were able to put together a full stack app that has been developed for several different user use cases, and is ready to be deployed in a real life application. One of our goals for this hackathon was to take into account all aspects of our project, from the use case, value, limitations, and we are proud to say that we were able to accomplish that.

In addition we were able to deliver a product we are truly proud of in such a limited amount of time. In less than two days, we were able to identify features that were absolutely essential towards our mission. The work that we did encompassed many essential parts of the research process, especially idea validation through the survey we conducted. Our system architecture as well as the services we offer in Coalition create the best user experience possible. We believe we truly identified a way for those passionate about their causes, regardless of their origin, to speak out.

What's Next

Aside from your basic hackathon fixes (lots and lots of code refactors), we are pretty excited about the future prospects for Coalition. First, as the ecosystem around decentralized technology progresses, we hope to make our product a true DAPP. For this hackathon, we chose not to go with ETH smart contracts given its current downsides in regards to high gas fees, scalability issues, and energy consumption levels–these issues all directly contradict our market validation research. That said, we are very excited about the potential of third-generation blockchains like Cardano and would love to migrate our project to the network once smart contracts are established.

Additionally, we hope to better build upon existing features to truly make our platform the full suite for activism. One thing that we did not have time to implement in this hackathon is media analysis. While speaking to the user base, we realized that one of the biggest concerns is that of misinformation. As such, we hope to utilize the objectivity of AI to help identify political, sentimental, and other revealing information within articles on our platform; we hope to work with organizations like the Bipartisan Press to implement their ML models for identifying political leaning.

Built With

Share this project:

Updates