Wildspotter

• 

  Poster for Wildspotter

• 

  Wildspotter web app UI

• 

  Sighting Form

Inspiration

The idea behind Wildspotter stemmed from the pressing need to monitor and conserve biodiversity in specific regions. By combining interactive technology and conservation efforts, we wanted to create a platform that empowers users to observe and protect plant and wildlife species. Our goal is to support biodiversity conservation in line with UN SDG 17 by facilitating strategic partnerships and community involvement.

What it is

Wildspotter is a web app that allows users to:

• Identify and log wildlife sightings on an interactive map.
• Access detailed information about various species, including conservation status, habitat, and behavior.
• View real-time updates about biodiversity conservation areas, ecotourism spots, and protected zones.

This tool provides valuable data for conservation efforts and promotes ecotourism by encouraging people to explore and document biodiversity in their local environments.

How we built it

We built Wildspotter using:

• Frontend: Next.js for a responsive, dynamic user interface with interactive map integration, and TailwindCSS for styling
• Backend: Next.js handling, serving data on wildlife sightings, and managing user profiles.
• Mapping & Data Visualization: We integrated Leaflet for interactive mapping and data visualization, allowing users to view wildlife sightings easily.

Challenges we ran into

• Map Rendering Error: A major challenge we encountered was an error with map rendering, which disrupted the display of interactive maps.
• Time Constraints: With less tha 24 hours to develop a fully functional prototype, managing time effectively became crucial. Real-time Data Streaming Issues: One of the significant challenges encountered was implementing a real-time data streaming feature using server-sent events (SSE). Initially, the server controller would frequently close unexpectedly, resulting in a TypeError. This issue hindered our ability to send updates effectively to the client.

Accomplishments that we're proud of

• Successfully integrated an interactive map that displays real-time biodiversity data and user-submitted sightings..
• Created a user-friendly and engaging interface that promotes wildlife documentation and conservation awareness.
• Built a platform that supports community-driven data collection, potentially valuable for conservation organizations and researchers.

What we learned

• Map and Data Visualization: We deepened our understanding of mapping tools like Leaflet, learning how to tackle issues related to rendering.

What's next for Wildspotter

• Social Sharing Features: Allow users to share sightings on social media to raise awareness and increase engagement.
• Offline Mode: Develop offline functionality so users can log sightings without internet access, ideal for remote areas.
• Expanded Conservation Partnerships: Collaborate with conservation organizations to provide more data on protected areas and endangered species, potentially allowing them to use Wildspotter as a data collection tool.

With Wildspotter, we hope to empower users and conservationists to contribute to biodiversity conservation efforts, raise awareness, and promote ecotourism, bringing the community together to protect our planet's precious wildlife.

Built With

• leaflet.js
• next.js
• tailwindcss
• typescript