When we got together as a team, we figured out that we wanted to tackle the Social (Inter)connectivity challenge. Our vision was to create a platform where people anywhere around the world can foster a connection with each other. We believed that if strangers could see each other’s messages and responses, they could better empathize with each other.
This came in a time of global crisis due to COVID where international and community tensions were higher than ever before. Crime against minorities, especially towards Asian Americans, increased drastically. While bigotry and ignorance are hard to defeat, we hope that people who use this platform take a step in the right direction in understanding their fellow humans.
What it does
This website allows users to create prompts with a destination. Other users along the route from where the original user is to the destination can answer the prompt and send it further along its journey. Finally, when the message reaches its destination, everyone who helped along the way can see each other's responses.
How we built it
We approached building this web app with the MERN (MongoDB, Express.js, React.js, Node.js) stack. Our database contained Users and Bottles, which are the “shipments” of messages that would get propagated across the country. Our backend contains API endpoints to manipulate these documents, like adding a message to a bottle! The frontend was designed via Figma, and connected with backend functionality with React. The functionality for location processing (e.g. whether you are close enough to a bottle to add a message and pass it on) would be built on top of a GIS API like arcGIS or Google Maps API. Finally, we would deploy our application via Heroku.
Challenges we ran into
React is a beast! We found that building a frontend with React required a lot of moving parts that aren’t obvious unless you’ve worked extensively with it before and learned all its quirks. We also ran into issues deploying to Heroku, which threw us every error under the sun that we couldn’t resolve.
Accomplishments that we're proud of
Despite all of us being a beginner in some part of the project, we ended up with some routes that functioned across the full stack! This was the first time any of us had worked in a team where some members contributed to the backend and some contributed to the frontend, so being able to unify those was an accomplishment in our book.
What we learned
This is the first hackathon for the majority of our team, with one member on his second. Through this journey, we learned more about how Figma translates into code. We found this experience valuable as it gave us more insight into how developers and designers can help make each other's jobs easier. In addition, we learned how prototyping in Figma can be a valuable tool to show oversights in how different frames should connect. In addition, we optimized our research strategies in order to tackle coding problems.
The developers learned that when developing a web app, getting deployed first is always a good idea to save headaches later. Also, splitting up definitely helps keep the project’s progress from halting so everyone can be focused on their domain of the application.
What's next for Message in a Bottle
In the future, we hope to expand this service to beyond the United States, allowing people around the globe to work together and make new friends along the way.