Background

Every community across the world will undoubtedly face times of hardship, whether it be natural disasters, the collapse of infrastructure, as well as public disturbances. With the COVID-19 pandemic harming many people's day-to-day lives, another burden has been added on the communities of the world as they continue to confront local issues while struggling to maintain a healthy lifestyle. In particular, the recent snowstorms and subsequent power outages in Texas made us think about how communities of people may be isolated from each other, potentially unaware of not only local disturbances and issues, but solutions to these disturbances, such as vaccination centers and food services. With Community, we strove to build an app that would help urban communities connect and thrive.

What it does

Community enables users to add reports for either issues or solutions to issues present in their local community. Users are able to create a new report and add a title that briefly summarizes the item of interest, a brief description of the item. The user is also prompted to drag the location of the incident onto the map using a pin. Then, the user is prompted to upload an image. These items are then displayed on the map and the feed.

Create Report

Users can create a new report

Once the user has uploaded an image, they select a category for their issue/solution: public disturbances, natural disasters, food services, or vaccination centers.

Pin drag See details about posts

After adding an item onto the map, the user has the option to view the complete map of events, helping them recognize any urban disturbances or areas of interest near them. Users are also able to view a complete feed of events on the left-hand side and can upvote events that they believe deserve more attention. This feed of issues can be filtered by a type of event and is sorted by number of upvotes.

Feed Filter

Users can filter the feed

How we built it

Main Page

Tech Stack Our tech stack and flow

D3

Express

Google Cloud

Google Cloud Firestore

Google Cloud Storage

Mapbox

Material UI

Node.js

React

UI/UX

For our design process, we created several design models of the different pages and options available on our web app. We designed models for the main page (that displays the map and the feed of posts), the page where users can add a post, and a page where users can drag the location of their new post onto the map.

We chose a warm color scheme of greens, tans, and purples to create a fresh but cozy feeling. We designed the logo to feature cartoon, easily recognizable houses clustered together to instantly remind the user of home and community.

Several changes were made between our initial design and our final product. We pivoted from focusing on just issues in the local community to issues as well as solutions to these urban issues in terms of what people are able to add to the map/feed. During the process of adding a post, we allowed for the user to describe the post and drag a pin representing the post onto the map all within the same page. Nevertheless, our designs provided us with a solid foundation to begin developing the majority of our project. As both of our team's designers were completely new to using Figma, we were satisfied with the products that we designed.

Main Page

Our design for our main page

Second Page

Our design to report a new issue

ThirdPage

Our design to add a new issue to the map

Frontend

The frontend was built around React, with Material UI as our main component library. We used dynamic rendering of components to display the issues/solutions in the feed, with an option to filter by type. We learned more about state management and organization of components as we assembled the project.

MapBox was a crucial part of our frontend, as it allowed us to display both our map and the markers upon it. The map was rendered dynamically as the user panned and moved around the area, and the markers were made clickable, so the view focus would shift to that specific marker. Clicking on a feed item would perform the same transition. MapBox was used to render popups when the markers or the feed was clicked on to display more information about the issue or solution at the location. Transitions between the markers were created via the D3 library, combined with MapBox's built in viewport shifting. We were also able to render and display markers on the map in 3-D, allowing us a more immersive experience in the map.

Backend

The backend server was written in Node.js using Express. Images are saved in Google Cloud Storage and all the post information is stored in Google Cloud Firestore.

The routes are:

A post request to/api/create-event stored the information for a new post in Google Cloud Firestore.

A get request to /api/posts gets information for all posts

A post request to /api/upload uploads an image

Challenges we ran into

One challenge we encountered related to the level of complexity of our project. At first, Community was directed toward only reporting local issues in one's community and displaying them on the map. However, after further brainstorming about the theme of urban innovation, we realized that in order to improve our application, users should be able to not only report disturbances, but solutions to these disturbances. Rather than just report natural disasters or public disturbances, we wanted users to be able to mark locations on the map that represent what is at the heart of a community - people helping each other. Therefore, we added functionality for users to add entries for COVID vaccination centers, food services, produce for sale, etc...in order to spread publicity about these positive occurrences to their neighbors.

We also found it challenging to collaborate with a team in a remote environment. There was some degree of miscommunication between our members, which led to one case of two team members working on the same feature, and thus, being inefficient with our time. We also misjudged the time that several of our tasks would take and had to constantly adjust our game plan. Despite these challenges, over the course of the hackathon, we learned to coordinate properly and plan our tasks in a more efficient manner.

Accomplishments that we're proud of

We were able to design prototypes for our project in the first two hours of the hackathon, something that we are proud of, as both of our designers were new to using Figma. We are also proud of the integration of Mapbox into the rest of the project, as we believe that one of this project's greatest strengths is its visual appeal, particularly regarding the 3D map and system for displaying markers, and we are proud of successfully implementing this feature.

What we learned

For several of our team members, this was our first hackathon, so we learned about managing version control as well as full-stack development in a large-scale team project. Many of the technologies that we used were new to us, such as Figma, Mapbox, and Google Cloud, and we enjoyed learning about these technologies and applying them to this project!

What's next for Community

We would love to add numerous features in order to enhance this project! In particular, we would like to add a notification/geolocation system using Twilio that notified users if an event on the map was within a certain radius of their location. We would also be interested in adding a user authentication system in order to enable confirmation notifications when adding events to the map as well as a potential "gamification" system when users upvote reports and report incidents. Another feature we could implement is to filter the map by different types of events (incidents vs solutions) and add differing icons for different types of events, as we believe this would allow the user to more easily differentiate between types of events.

+ 17 more
Share this project:

Updates