LeakAlert

LeakAlert: Community water leak reporting app "Every drop count"

Comment

💧 LeakAlert – Spot Leaks, Save Water

🌟 Inspiration

Growing up in Latur (a drought-prone region in Maharashtra, India), I have seen how **water scarcity impacts daily life. Every drop matters here. The thought that unnoticed leaks can waste hundreds of liters of water inspired me to build LeakAlert – a simple yet effective tool that empowers citizens to report water leaks quickly.

"We can’t create water, but we can definitely save it."

📚 What I Learned

  • How to use HTML, CSS, and Vanilla JavaScript to build an interactive UI.
  • Integrating Leaflet.js with OpenStreetMap for mapping reported leaks.
  • Using LocalStorage to save and manage reports without a backend.
  • Designing a simple and user-friendly UI/UX for real-world usage.
  • Importance of collaboration, debugging, and testing within hackathon deadlines.

🛠 How We Built It

  1. Frontend (UI/UX):

    • Built using HTML + CSS with a clean card-based layout.
    • Form for submitting a leak report (location, description, image upload).
    • Added success messages and reset/clear options for better user flow.

  2. Mapping Feature:

    • Integrated Leaflet.js with OpenStreetMap.
    • Plotted user-submitted reports as map markers.
    • Each marker shows details (image, description, timestamp).

  3. Data Handling:

    • Used JavaScript LocalStorage to persist reports locally.
    • Option to Clear All Reports or Reset Form with one click.

  4. UI Enhancements:

    • Simple, responsive design for mobile + desktop.
    • Added report listing with leak images and details.

⚡ Challenges We Faced

  • Initially, the map did not render properly due to script loading issues.
  • Image uploads were tricky to display along with text in reports.
  • Managing LocalStorage for storing structured data (JSON) required multiple iterations.
  • UI/UX balancing – making it look clean while keeping it hackathon-simple.
  • Time pressure: building, debugging, and polishing the app within strict deadlines.

📊 Fun Math Behind It

We calculated how much water can be wasted due to a small leak.

If a leak drips at 1 drop per second, and each drop ≈ **0.05 ml, then:

[ \text{Water wasted in 1 day} = 0.05 \times 60 \times 60 \times 24 = 4320 \, \text{ml} \approx 4.3 \, \text{liters} ]

[ \text{Water wasted in 1 year} = 4.3 \times 365 \approx 1570 \, \text{liters} ]

👉 A single unnoticed leak can waste over 1500 liters per year!

This motivated us to show users how urgent leak reporting is.

🚀 Impact

LeakAlert can:

  • Help citizens quickly report leaks in their locality.
  • Create awareness about hidden water wastage.
  • Be scaled into a real-time mobile/web app with cloud backend, multilingual support, and AI-powered leak detection in future.

🌱 Closing Note

Hackathons push us to think fast, learn fast, and build fast. LeakAlert is a small step towards **water conservation – because “Every Drop Counts.” 💧

Built With

Share this project:

Updates