Mangrove Guardian AI

AI-powered ecosystem monitoring for global mangrove

Comment

🌳 Mangrove Guardian AI – Hackathon Submission

Project Title: Mangrove Guardian AI
Tagline: AI-powered ecosystem monitoring for global mangrove restoration
Status: Production-Ready | Version: 1.0.0

📖 Inspiration

Mangrove ecosystems serve as one of the most powerful defenses to counter both climate change and coastal erosion. Unfortunately, monitoring mangrove damage and degradation is problematic in that reports are often scattered across local authorities, NGOs, and communities.

Key Challenges in Mangrove Restoration:

  • ⚫ Real-time field reporting is limited – Data collection depends on manual surveys and periodic inspections
  • ⚫ Little coordination amongst communities and organizations – Fragmented efforts prevent scaling impact
  • ⚫ Evaluating environmental damage takes a long time – Weeks or months to assess health and plan interventions

We realized that lack of accessible data and coordination was preventing large-scale restoration efforts. What if we could turn smartphones into environmental sensors?

💡 What it does

Mangrove Guardian AI is a web app where community members can upload photos and details of mangrove damage. The system uses AI to analyze reports, assign a health score, and display results on dashboards. Organizations can track restoration projects, export reports, and coordinate efforts more effectively.

Core Features:

  • Photo-based damage reporting – Geolocation-tagged submissions from field
  • AI health scoring – Computer vision assigns ecosystem health metrics in real-time
  • Interactive dashboards – Community and organization views with live map clustering
  • Project tracking – Organizations coordinate restoration efforts and measure impact
  • Data export – Generate Excel reports for stakeholders and funders
  • Role-based access – Separate workflows for community members and organizations
  • Rate limiting – Fair usage controls prevent abuse while supporting power users

🏗️ How we built it

I built the project as a containerized, service-oriented web app with clear separation between UI, API, async processing, and infrastructure.

Frontend Stack

  • React 19 + TypeScript + Vite for fast, type-safe development
  • Tailwind CSS v4 for responsive, accessible styling
  • React Router for client-side navigation
  • React Leaflet for interactive geospatial mapping
  • Axios with JWT token handling for authenticated API calls

Backend Stack

  • Django 4.2 LTS + Django REST Framework for robust API
  • Custom user roles with JWT authentication and token refresh
  • Modular app architecture – separate apps for users, reports, analysis, and restoration
  • Pagination-friendly responses for scalable list views across large datasets
  • SimpleJWT for secure token-based auth

AI & Async Processing

  • Celery 5.3.4 workers process analysis tasks outside the request/response cycle
  • Celery Beat for scheduled jobs (e.g., daily summaries, cleanup tasks)
  • Redis 7 as broker and cache to keep operations fast and resilient
  • Analysis engine outputs health scoring and risk indicators for priority triage

Data & Storage

  • PostgreSQL 15 in production-style setup for data persistence
  • Cloudinary for image storage, optimization, and CDN delivery
  • OpenPyXL export support for organization-level reporting workflows
  • Redis caching for frequently accessed data (top reports, user stats)

DevOps & Deployment

Docker Compose orchestration with 6 services:

  • Backend API (Django + Gunicorn on port 8000)
  • Frontend (React dev server on port 5173)
  • PostgreSQL (port 5432)
  • Redis (port 6379)
  • Celery worker (async task processing)
  • Celery Beat (scheduled tasks)

Production deployment includes:

  • Nginx reverse proxy (ports 80/443)
  • Environment-based configuration
  • Automated migrations
  • Health checks and monitoring

⚙️ Technical Challenges & Solutions

Challenge 1: Integrating AI Analysis Smoothly with Async Tasks

Solution: Built a Celery task pipeline that decouples image upload from AI processing. Reports are immediately stored with status: pending, then a Celery worker processes the image asynchronously and updates the record with health scores and risk levels. Frontend polls for completion or receives webhook notifications.

Challenge 2: Managing Rate Limits for Image Uploads and API Requests

Solution: Implemented 3-tier rate limiting in Redis:

  • Tier 1 (Community): 5 reports/hour
  • Tier 2 (Organizations): 50 reports/hour
  • Tier 3 (Admins): Unlimited Returns 429 status with retry-after header; UI displays 15-second wait notification.

Challenge 3: Keeping the System Lightweight for Free Hosting Tiers

Solution:

  • Lazy-loaded map components in React
  • Cached API responses in Redis
  • Compressed image assets with Cloudinary transformation URLs
  • Efficient PostgreSQL queries with proper indexing
  • Celery task batching to reduce overhead

Challenge 4: Designing Dashboards for Both Individuals and Organizations

Solution: Role-based views:

  • Community members see their own reports + community stats (anonymized)
  • Organizations see all reports in their region + filtering by status/risk + export capabilities
  • Admins see system-wide metrics and user management

🏆 Accomplishments We're Proud Of

  • ✅ End-to-end production system – Fully dockerized, deployed, and tested from day one
  • ✅ AI-powered insights – Real-time ecosystem health scoring from photos using computer vision
  • ✅ Scalable architecture – Async task processing with Celery handles hundreds of concurrent analyses
  • ✅ Role-based collaboration – Community + organization workflows seamlessly integrated
  • ✅ Interactive geomapping – Live dashboard showing global mangrove report clusters with clustering algorithms
  • ✅ Security-first approach – JWT auth, rate limiting, CORS protection, SQL injection prevention
  • ✅ Complete API – 20+ RESTful endpoints with comprehensive request/response validation
  • ✅ Responsive UI – Mobile-first design works on smartphones, tablets, and desktops
  • ✅ Data export workflows – Organizations can generate Excel reports for stakeholders
  • ✅ Resilient error handling – Graceful degradation and user-friendly error messages

📚 What We Learned

  • Celery + Django integration requires careful serialization and error handling for robust background jobs; task idempotency is critical
  • Geospatial queries in PostgreSQL are powerful but need proper indexing and query optimization for large datasets
  • Computer vision models need diverse training data to handle real-world deployment variance (lighting, angles, water conditions)
  • Docker orchestration simplifies deployment but adds complexity to local debugging—comprehensive logging and container inspection tools are essential
  • Environmental projects benefit from community engagement; technical excellence alone isn't enough—UX and accessibility matter
  • Pagination state management in React requires careful coordination between filters and page navigation to avoid stale data
  • Rate limiting must balance fairness with usability; clear feedback (retry-after headers + UI notifications) improves user experience

🚀 What's Next for Mangrove Guardian AI

Short Term (3-6 months)

  • Mobile app – Native iOS/Android for offline reporting in remote coastal regions
  • Advanced analytics – Time-series trends and predictive modeling for restoration success rates
  • Drone integration – Automated aerial surveys + orthomosaic processing for large-scale mapping

Medium Term (6-12 months)

  • IoT sensors – Ground-truth validation with temperature, salinity, and soil moisture sensors
  • Gamification – Leaderboards and impact badges to drive community participation
  • Multi-language support – Localization for Southeast Asian, African, and Caribbean regions

Long Term (12+ months)

  • API partnerships – Integration with conservation NGOs' existing platforms and monitoring systems
  • Satellite integration – Combine citizen reports with satellite imagery for broader coverage
  • Carbon credit marketplace – Link restoration efforts to verifiable carbon offset credits
  • Research collaboration – Partner with universities for peer-reviewed impact studies

Built With

  • axios
  • celery-5.3.4
  • celery-beat
  • cloudinary
  • cors
  • css3
  • django-4.2-lts
  • django-orm
  • django-rest-framework
  • docker
  • docker-compose
  • eslint
  • geolocation-apis
  • git
  • gunicorn
  • html5
  • jwt
  • lucide-react
  • nginx
  • openpyxl
  • postgis
  • postgresql-15
  • pytest
  • python-3.11
  • react-19
  • react-leaflet
  • react-router-v6
  • redis-7
  • simplejwt
  • sql
  • sqlite
  • ssl/tls
  • tailwind-css-v4
  • typescript
  • vite
  • vs-code
Share this project:

Updates