Inspiration
Coral reefs support about 25% of marine life but are rapidly disappearing due to pollution, climate change, and human activity. We wanted to build a tool that makes reefs visible and understandable to everyday people, turning awareness into action.
What it does
ReefGuard is an interactive world map of coral reefs. Users can click on reefs to see descriptions, pollution threats, and conservation information. They can save reefs to a personal collection, creating a digital reef “dictionary” while learning how to help protect them.
How we built it
We built ReefGuard as a web platform with an interactive map interface. The site maps reef locations globally, attaches environmental information to each reef, and allows users to save reefs into a personal collection to encourage exploration and learning.
Challenges we ran into
One challenge was organizing global reef data and presenting it clearly on a map without overwhelming users. We also had to design an interface that made environmental data understandable and engaging.
Accomplishments that we're proud of
We created a platform that turns environmental education into an interactive experience. The collectible reef system makes learning engaging while still communicating real conservation issues.
What we learned
We learned how important UI design is when presenting environmental data. Simplifying complex information into an interactive map made the project far more impactful.
What's next for Reef Guard
Future versions could include real-time ocean health data, community reporting of reef damage, partnerships with conservation groups, and gamified challenges that encourage users to take real-world conservation actions.
Built With
- css
- eslint
- firebase
- leaflet.js
- lucide-react
- mistral
- next.js
- radix.ui
- react
- react-leaflet
- rechart
- shadcn/ui
- tailwind-css
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.