What Inspired Us: We were inspired by the social movements going around us, particular George Floyd protests, sports teams walkouts, and footage of police brutality in the the news. We really wanted to create something new to help educate others on issues like a racial injustice. We accomplished this by taking the input of those who felt the need to express the effects of police brutality.

What we learned: At the beginning, we had no knowledge of CSS and only very basic HTML experience, but we were able to teach ourselves how to code a static website from scratch and add cool features and designs (buttons and input box transitions). In addition, we were able to learn how to apply AWS knowledge in a real project and learned so much about the general infrastructure, deployment, and implementation. However, the greatest takeaway from this project was that we were able to create a project from scratch that was end-to-end. Since this was our first major team coding project, we learned the importance of splitting up tasks, running several tests on our own end, and learning how to stay motivated over a long period of consistent coding. We also figured out how to communicate effectively (as fully remote students) over social media platforms!

How Did We Build It? Frontend: For front end, we had four different interlinked html pages (homepage, report form, infographic, thank you page). Each page has its own css file that controls the layout. The infographic was created by getting graphs of the web, and each of the topics on the infographic were key issues in the problem of racial injustice. To format, we used used containers to separate panels and columns for individual boxes

Back End: For back end, the most important part was linking the form with the Dynamo Database. We had to consider the overall goal of the form, had to learn how to code python lambda functions for DynamoDB, and how to best resolve issues with data storage and retrieval, and deploy the architecture.

Challenges: Front End: We had to consider design very seriously. To make our webpage stand out, we created a background of protests, highlighting our general theme. We worked hard to make sure that words didn't blend completely into the background and constantly changed opacity percentages. One of the things that was vital but also time consuming was importing a bunch of different fonts and creating transitions for buttons and inputs.

Back End: API Gateway and Lambda functions weren't initially updating correctly because of an issue in Cross-Origin-Resource Sharing (CORS). This was our first time working with these services, so we had to learn how to properly structure lambda code to resolve these issues. Even with a good amount of knowledge, experience with implementation of services was extremely difficult for a first-timer.

Share this project:

Updates