Inspiration
A few weeks ago, one of my elderly neighbors called out to me while I was on a run. She was desperately in need of groceries, and asked if I could help her out. Thankfully, I was free and able to help her out that day, but that experience shocked me. Due to this pandemic, many people—especially those within at-risk populations—are unable to leave their homes and lack the connectivity to reach out to others for help. If I wasn't out for a run on that exact date and at that time, who knows what my neighbor might've had to do. While popular social media apps allow for global connectivity, they don't offer a convenient way of reaching those near us. Although my neighbor had plenty of Facebook friends, none of them were close enough to her to be able to help.
That experience inspired me to brainstorm. There had to be a simple solution, something that would be able to connect people in need with people who would be able to help them. That's when my friends and I came up with MyCommunity, a digital Community Board that allows users to publically request for help when they need to.
What it does
Through MyCommunity, individuals in need will be able to post to a Community Board, where other neighbors not at risk would be able to reach out and help. The Community Board is organized by zip code, so that users are able to view the posts of those within close proximity to them. Users are able to create posts, accept posts (indicating that they are able to help out), and message others.
We used React Native to build our mobile app and Firebase for our database.
Functionalities: (organized by each screen)
Community Board— The Community Board pulls all open (not yet accepted or completed) posts from a zip code and displays it to the user. On the Community Board, a user is able to accept a post (indicate that they are able to help out with the request) or message the original poster to request for more information. Once posts are accepted, the post is removed from the Community Board, and a new conversation is created between the user and the original poster to discuss more details (when the request will be completed, how the goods will be safely dropped off, etc).
Messaging— Users have the ability direct message each other. This functionality is key to ensure proper health protocol when requests are being fulfilled. Users can ask each other questions for more information about each post request, or they can coordinate pick up and drop off. Overall, MyCommunity's messaging functionality allows for a much more personal experience, so that users are able to directly interact with their neighbors during a time where it is easy to feel divided.
Posting— On the Posting Screen, users can create posts for their zip code's Community Board. Each post has a title, description, timestamp, and status (open, accepted, or completed). Posting creates a new post within our Firebase database which is then visible to anyone else on a user's Community Board.
Accepted Posts— The Accepted Posts screen displays all the posts that a user has accepted (that the user has agreed to help carry out). The Accepted Posts screen allows for users to message the original poster regarding their request and allows a user to cancel a previous post acceptance (indicating that they are unable to help out with the request).
Profile— The Profile screen displays a user's profile picture, name, and zip code, alongside all of the posts that a user has posted. On the profile screen, a user can see the status of all their posts (either open, accepted, or completed). Users can confirm whether their posts have been completed or not (whether their request was fulfilled after being accepted). Finally, users are also able to delete their posts from the profile screen.
How we built it
Backend— We utilized Google's Firebase to hold our database for this hack. We created multiple collections to store the information we needed, and read/wrote the database when needed.
Mobile App— We utilized React Native to build the mobile app. Using Firebase Firestore to hold our data, we were able to create a file structure that allowed us to store the information we needed for users to interact with each other. We utilized Firebase's authentication to allow users to Sign Up and Log In with an email and password.
For the UI, we utilized a Stack Navigator with five main screens (functionality detailed above): Community Board, Messages, Posting, Accepted Posts, and Profile.
Web App— For the website, we utilized a similar method, but with React.js instead of React Native. We used redux to manage our state and streamline the data control. The styling of the website was created with Material UI for React. Firebase was integrated with the React Redux Firebase which provides a variety of tools for managing state and props.
Challenges We ran into
On both the Web and Mobile App side, communicating with Firebase proved to be challenging. At first, we struggled to come up with an organized file structure that held the information we needed in an easily accessible manner. Organizing was difficult, because as we progressed we realized that we needed more attributes within our docs than we had originally planned for. Yet, with each adjustment, we got more perceptive as well and created a fluid file structure that is seamless to update when needed.
Accomplishments that we're proud of
The biggest piece of the hack that we are most proud of is messaging. Messaging took quite a while to hash out, especially in terms of the backend, but it was truly rewarding to get our first conversation going through MyCommunity. Even past functionality, we spent a lot of time styling our messaging to make it visually appealing for our users, and it was definitely one of the most rewarding parts of the whole project.
What we learned
This was our first time utilizing React Native with Firebase to create a mobile app with an organized back end. The whole process of building a CRUD app with Firebase was so educational and rewarding to be able to see our updates in real time.
What's next for MyCommunity
Although the stay-at-home order is beginning to be repealed in many US states, the coronavirus pandemic is far from over. The elderly and those at-risk are still unable to leave their homes, and the world may be in intermittent quarantine until 2022.
MyCommunity is a fully functioning app that would be able to help out many community members in its current state, but we hope to add a few more features before release. First, we want to add tags (i.e. labels) to each post, like food, pets, or toiletries for example. Through tags, users would be able to easily understand individual requests. Second, we want to allow users to filter by tag. This way, users can filter posts through their tags to get better insight into how they can help.
We are certainly going to continue developing MyCommunity and are planning on releasing it to the AppStore as soon as possible.
Log in or sign up for Devpost to join the conversation.