Shark Spotter

A safety-first web app by women, for women. Shark Spotter helps users find period-friendly bathrooms, report harassment, and stay informed wherever from a "shark week" or just a late-night walk.

Comment

Shark Spotter

Inspiration

After a recent local rape report from the UCIPD, we were reminded how unsafe the world can feel—especially for women. We wanted to create a digital space built by women, for women, to reclaim confidence and control in public spaces.

What It Does

Shark Spotter is a web application that crowdsources safety and period-support data for users on the go:

  • Users can mark and find bathrooms or locations with free period supplies on a map
  • Locations include user-submitted reviews, notes, or reported incidents
  • A separate page allows users to report incidents they've witnessed or experienced

How We Built It

  • UI/UX Design: Figma was used to wireframe and prototype the interface before development began
  • Framework: Ionic with Angular
  • Maps: OpenLayers (for map rendering and interactivity)
  • Database: MongoDB (to store usernames, passwords, and community reports) *see "Built with" for others

Challenges We Ran Into

  • Styling components within Ionic was more complex than expected
  • Integrating interactive maps with OpenLayers
  • Overlaying UI elements onto the map without disrupting usability
  • Saving the coordinates of every users location pins
  • TypeErrors when pulling from the database and providing checks to place in cards

Accomplishments We're Proud Of

  • Successfully implementing map-based interactions
  • Building a working database to provide personal profile saving
  • Building a website on fully custom graphics
  • Animating transitions between pages and card pop-ups

What We Learned

  • The fundamentals of using geospatial maps in a web app
  • How to combine database knowledge with map pin placement and profile making
  • Building and following the Ionic and Angular framework
  • The usefulness of prototyping in Figma to aid in team cohesion

What's Next for Shark Spotter

  • AI responds to reports with personalized safety tips and support resources (displayed as helpful cards)
  • Nearby users may receive alerts if a new report occurs close to them
  • Organizing reports by severity to prioritize urgent alerts
  • Notifying users when a safety report is submitted near them
  • Offering routing/directions to the nearest period-safe location
  • Enhancing AI recommendations with more robust resource linking
  • Expanding the map filters (e.g., restrooms with seat covers, stocked toilet paper)
Share this project:

Updates