As a result of the recent events in 2020, including but not limited to the COVID-19 pandemic, Yemen humanitarian crisis, and the Black Lives Matter movement, we wanted to provide people with an option to educate themselves and support others across the nation and across the world. We help users find petitions to sign, organizations to support, and causes from all over the world to learn about and make it easy for them to take action.
What it does
ActiBridge is a website that will allow its users to bridge the gap between activism and ignorance and take action with movements they care about. Users can take a quiz that will personalize their results and show them various causes they can support, petitions they can side, and organizations to which they can donate. In addition, they can select their representative, and ActiBridge will automatically create and format an email for them to send.
How I built it
Challenges I ran into
The “Outreach” page allows the user to enter their ZIP code and matches them with their representative. One challenge that we ran into was creating an email template directly in their computer’s local mail application. Since the website uses an HTML form, the email had to be formatted using textareas. At first, we used a text element instead and were unable to add line breaks, and when using normal spaces the email would format with “+” between each word. We fixed this by changing the body element to a textarea and adding ASCII codes for spaces and line breaks.
While laying out the CSS of the entire website, we ran into several problems with consistent formatting, integrating photos into our color scheme, and ensuring the functionality of buttons and links. Although it was the first time many of our team members worked intensively with CSS, we were able to fix the various bugs by testing different solutions from sites such as StackOverflow and W3Schools. For integrating photos into our color scheme in particular, we were unable to fully solve the issue, as overlaying an unedited photo with a separate colored container never fully lined up the photo and the colored screen; unedited photos were also often too small for our website to host cohesively. We ended up editing the photos of protests outside of the CSS formatting. However, given more time we would continue to develop a more efficient solution that would allow developers to upload unedited photos and play with color overlays directly in the source code.
Glitch, the editor we hosted our project on, would often overload with requests, which made it difficult for our team to edit and test features on ActiBridge in real time. We addressed this by using local text editors to test our code and by playing with the Glitch editor settings to prevent automatic updates to our website.
Accomplishments that I'm proud of
We're proud of how the Outreach page came together. After about an hour of tinkering between GET and POST forms, text vs text/plain, and the textarea versus text, ew was able to figure out how the form works. The email was formatted correctly once the mail application opens, and we got to learn the difference between GET and POST.
We are also proud of the interactive elements in the navigation bar and the Black Lives Matters library page. The animations in the navigation bar and the hovering opacity features of the library page were new CSS features that most of us had never worked with before, and it was so cool to see that we could apply them successfully to website features of our choice.
What I learned
What's next for ActiBridge
We hope that in the future, we can continue to develop ActiBridge in ways that will make activism resources more accessible, interactive, and localized for aspiring social change makers. We hope that it can connect people from both local and global regions of the world. Also we would like to store user preferences in firebase to personalize their experience.
Log in or sign up for Devpost to join the conversation.