Bird Collision Map

A building that many birds collide with
The distribution of bird collisions over the US
Collisions & migration observation
Observed species in an observing point
View of data tables in Supabase Schema Visualizer

Inspiration

Every year as many as a billion birds die while migrating. They pass through urban areas and collide with glass windows of buildings. Especially during the night, when birds are disoriented by artificial lights, this problem is even more severe. This project aims to raise awareness about bird collisions and provide a user-friendly platform to visualize bird collisions.

Introduction

This project is a web application that visualizes bird collision data on an interactive map. Users can explore bird collision spots and observed migrating birds, view detailed information about each collision event, and learn about the impact of urban environments on bird populations. It serves as an educational tool to promote bird conservation efforts and encourage the bird-friendly designs and campaigns.

Project Structure

For the frontend part, we use Next.js, Typescript and Material UI. We used map data from OpenStreetMap and visualized it with Leaflet.js.

For the backend part, we use Neon Supabase, a serverless Postgres database with built-in authentication and storage. The backend exposes a RESTful API to interact with the database.

The data is from iNaturalist and eBird. Thanks to people who collected and shared the data!

Build and Deploy

To build the frontend part, enter the frontend directory, create a .env.local file and add the necessary environment variables:

NEXT_PUBLIC_API_URL=<your_api_url>
NEXT_PUBLIC_SUPABASE_URL=<your_supabase_url>
NEXT_PUBLIC_SUPABASE_KEY=<your_supabase_key>
NEXT_PUBLIC_BASE_PATH=<your_base_path> # /. or /<your_project_name> if deployed on github pages

and run:

pnpm install
pnpm build

Then a static build will be created in the frontend/out directory. You can deploy it with any static hosting service, such as GitHub Pages or Nginx.