I hope we'll get a Good Score

^~^

About BinBeacon

Website Introduction

BinBeacon is a map-based application designed to help users find and locate trash bins in area around Neili (currently). Whether you're at XingRen park, YuanZe university, or dormitory, BinBeacon helps you find the nearest trash bin in a matter of seconds. The application also provides additional features like customizing the map style, filtering trash bins by type, and adding new bins to the map, you can even check and update the status of each bin!

Map Icons and Legends

On the map, you'll see various markers representing different things. Here's what each icon represents:

  • Recyclable Bin Icon Recyclable Bin
  • Non-Recyclable Bin Icon Non-Recyclable Bin
  • Both Recyclable and Non-Recyclable Bin Icon Both
  • Live Location Icon Live Location

Key Features

  • Interactive Map: View a map with markers showing the locations of nearby trash bins. Try clicking on the markers!
  • Live Location Marker: See your current location on the map in real-time, helping you find the nearest trash bin with ease.
  • Filter Options: Customize the map view by filtering trash bins based on categories like recyclable, non-recyclable, or both.
  • Add New Bins: Users can add new trash bins to the map, which will be stored in our backend database and displayed for others to see.
  • Map Reset: If you scroll away from your location, you can easily reset the map view to center on your current location.

Technologies Used

The website was built using the following technologies:

  • Frontend: HTML, CSS, JavaScript, Leaflet.js (for interactive maps)
  • Backend: Node.js, Render (server), Vercel (hosting)
  • Database: Supabase

About the Developers

BinBeacon was developed by the 陈锦's (1123542 & 1123543), a 2-mans group of second-year (now third-year 😖) IBPI students. This project is part of our coursework and demonstrates our understanding of interactive maps, web design, and dynamic data management.

Credits

Special thanks to the Leaflet.js library for enabling us to create interactive maps, and to all the open-source resources that helped us bring BinBeacon to life.

Contact Information

If you have any questions or feedback, feel free to contact us at levinsonyzu@gmail.com or visit our GitHub repository at BinBeacon-testing.

Add Markers in BinBeacon

Bin Beacon