-
-
User opening the app from Meydebauer Beach Park
-
User opening the app from Seward Park, with the app advising them not to swim.
Inspiration
We were inspired by countless news stories about the environmental issue of bacteria and algae at our local beaches (https://www.seattletimes.com/seattle-news/6-king-county-beaches-closed-because-of-high-bacteria-levels/). However, while beaches can close, many people swim in places which cannot be closed (from their house, from a boat, from public land), and thus are at risk of getting sick from bad water. BeachAlert solves this.
What it does
BeachAlert uses data from the King County regional health authority to allow users to make educated decisions from anywhere, keeping users safe from bacteria and algae. This data is generally not publicly available and accessible. Over 90 million people are affected by waterborne illnesses from environmental contaminants every year in the U.S. from recreational swimming (https://time.com/5631608/swimming-illness-risks/), and BeachAlert aims to reduce this number. BeachAlert tells the user that its either OK to swim, or to avoid swimming at their current location, or at a point where the user selects or searches. This keeps everyone safe.
How we built it
We built this at the event and at home late at night over a discord call, using IntelliJ live-share to keep our codebases synchronized. We spent most of the first day planning UX and UI, and proceeded to implement it after that. We implemented a react-based ionic stack, which allowed us to split our app up into different components and to utilize typescript's safety functions. We used both the OpenStreetMap and Mapbox mapping APIs, and built our own API for beach quality which analyzes large and complicated CSV files distributed from the King County health authorities. We used React Native and custom design elements for our actual application. If you are interested, our GitHub has detailed comments as to how we built it.
Challenges we ran into
We had problems getting location working on iOS because of iOS's strict privacy settings. We spent a couple of hours before we realized that we needed to add an undocumented key to our app's Info.plist file. While this was frustrating, we eventually got it to work. Additionally we had trouble working with under-documented Mapbox APIs, which we had to figure out ourselves due to missing documentation.
Accomplishments that we're proud of
We are proud of our app's design and its functionality. We like how clean and minimalist the app came out, and our functionality is on-point to match it. We believe that people will use this app as well, as there aren't any other apps that allow users to stay safe in the water or employ our dataset.
What we learned
We started this hackathon without that much knowledge on mobile development, and we came out with a polished and functional mobile app. We also learned how to use a variety of APIs like Mapbox and OpenStreetMap, in addition to developing our own for KingCo beach data. All of us feel more comfortable with our app development skills, and with ReactJS in general.
What's next for BeachAlert
We plan on integrating data from across the nation, and eventually, from across the world! We can integrate data about air quality, temperature, and other environmental factors to make the safety score even more accurate than it already is.
Log in or sign up for Devpost to join the conversation.