🌍 ClimaVoice

AI-Powered Environmental Reporting Platform for Climate Justice

PROXOCORIS International Competition 2026 Category: Web Development | Subtema: AI for Climate Justice and Social Resilience Team: Ngawi Empire

🌐 Live Demo: https://demo.xlabscloud.com/climavoice/ 📦 Repository: https://github.com/yon3zu/climavoice

---

📋 Overview

ClimaVoice is a community-driven web platform that empowers Indonesian citizens to report, monitor, and address environmental issues using the power of Artificial Intelligence. Every report submitted is automatically analyzed by Google Gemini AI to assess severity, provide impact assessments, and recommend follow-up actions — bridging the gap between community voices and real-world environmental solutions.

---

✨ Key Features

🗺️ Environmental Reporting

• Submit reports with title, description, category, photo evidence, and GPS location pinned on an interactive Leaflet.js map
• 9 categories: Water Pollution, Air Pollution, Deforestation, Flood, Wildfire, Industrial Waste, Illegal Dumping, Soil Erosion, and Others
• Real-time view count and community upvote support system
• Comment and discussion on each report

🤖 AI Integration (Google Gemini via OpenRouter)

• Auto-Analysis on Submit — Every new report is instantly analyzed by AI upon submission
• AI assesses: environmental impact, severity level (Critical / High / Medium / Low), recommended actions, and risk factors
• AI Climate Assistant — Conversational AI chatbot trained on ClimaVoice context, Indonesian environmental law (UU PPLH), and climate knowledge. Knows how to guide users to report through the platform
• Chat history stored per session, supports markdown-formatted responses

🌫️ Real-Time Air Quality

• Live Air Quality Index (AQI) widget on each report detail page
• Powered by AQICN API — shows AQI value, health level, dominant pollutant, and nearest monitoring station
• Automatically fetched based on report's GPS coordinates

🏆 Leaderboard

• 3 ranking tabs: Most Reports, Most Community Support (Upvotes), Most Resolved Issues
• Visual podium for Top 3 with 🥇🥈🥉 medals
• Automatic badge system: 🔰 Pemula → 🌱 Pelapor Aktif → 🌿 Aktivis Hijau → ⚡ Pejuang Iklim → 🌍 Legenda Iklim
• "Your Rank" highlight for logged-in users

📄 Export PDF

• Generate a clean, print-optimized PDF for any report
• Includes: photo evidence, AI analysis, GPS coordinates, Google Maps link, and ClimaVoice branding
• Useful for forwarding reports to government agencies (DLHK, BKSDA, KLHK)

🛡️ Admin Panel

• Full report management: view all reports, change status (Pending → Verified → In Progress → Resolved)
• Delete reports with cascade (removes upvotes, comments, and photo files)
• Stats overview: total, pending, critical reports
• Real-time inline status update via AJAX — no page reload

👤 User Management

• Secure registration & login with bcrypt password hashing
• Profile settings: name, email, bio
• Password change with strength indicator
• Personal dashboard with report stats and action buttons (view, edit, delete)

📱 Progressive Web App (PWA)

• Installable on mobile homescreen (Android & iOS)
• Service worker for asset caching and offline fallback page
• App shortcuts: Report, AI Chat, Leaderboard

---

🛠️ Tech Stack

Layer	Technology
Frontend	HTML5, Tailwind CSS (CDN), Vanilla JavaScript
Backend	PHP 8.x (no framework, custom router)
Database	MySQL 8 with PDO
AI	Google Gemini 2.0 Flash via OpenRouter API
Maps	Leaflet.js + OpenStreetMap
Air Quality	AQICN API (World Air Quality Index)
PDF Export	Browser Print API with print-optimized CSS
PWA	Web App Manifest + Service Worker
Routing	Apache mod_rewrite (.htaccess) — clean URLs

---

📁 Project Structure

climavoice/
├── index.php               # Main router
├── manifest.json           # PWA manifest
├── database.sql            # Full DB schema + seed data
├── .htaccess               # Clean URL routing
│
├── config/
│   ├── config.php          # App constants, API keys
│   └── database.php        # PDO singleton connection
│
├── includes/
│   ├── functions.php       # Helpers: upload, AI call, auth, etc.
│   ├── header.php          # Navbar, PWA tags, flash messages
│   └── footer.php          # Footer, Leaflet JS, service worker reg
│
├── pages/
│   ├── home.php            # Landing page with map & stats
│   ├── reports.php         # Report listing with filters
│   ├── report-detail.php   # Report detail, AI analysis, AQI widget
│   ├── report-edit.php     # Edit report (owner/admin)
│   ├── report-print.php    # Print/PDF export page
│   ├── submit.php          # Submit new report
│   ├── dashboard.php       # User dashboard
│   ├── profile.php         # Profile & password settings
│   ├── admin.php           # Admin panel
│   ├── leaderboard.php     # Community leaderboard
│   ├── chat.php            # AI Climate Assistant chat
│   ├── login.php           # Login
│   ├── register.php        # Registration
│   ├── about.php           # About ClimaVoice
│   ├── terms.php           # Terms & Conditions
│   ├── privacy.php         # Privacy Policy
│   └── 404.php             # Not found page
│
├── api/
│   ├── ai-analyze.php      # AI report analysis endpoint
│   ├── ai-chat.php         # AI chat endpoint
│   ├── air-quality.php     # AQICN proxy endpoint
│   ├── auth.php            # Register/login API
│   ├── comment.php         # Comment submit
│   ├── delete-report.php   # Delete report (owner/admin)
│   ├── reports.php         # Reports API
│   ├── update-status.php   # Admin status update
│   └── upvote.php          # Upvote toggle
│
└── assets/
    ├── css/style.css       # Custom CSS (no @apply — plain CSS)
    ├── js/
    │   ├── main.js         # Scroll animations, char counters
    │   └── sw.js           # Service worker
    ├── icons/              # PWA icons (192px, 512px)
    └── uploads/            # User-uploaded report photos

---

🚀 Installation

Requirements

• PHP 8.0+
• MySQL 8.0+
• Apache with mod_rewrite enabled
• AllowOverride All in Apache config

Steps

1. Clone the repository

git clone https://github.com/YOUR_USERNAME/climavoice.git

2. Place in web server root

/htdocs/climavoice/   (XAMPP)
/var/www/html/climavoice/   (Linux Apache)

3. Import database

mysql -u root -p < database.sql

Or import via phpMyAdmin — creates database climavoice with all tables and demo data.

4. Configure the app

Edit config/config.php:

define('APP_URL',          'http://localhost/climavoice');
define('BASE_PATH',        '/climavoice');
define('OPENROUTER_API_KEY', 'your-openrouter-api-key');
define('AQICN_TOKEN',       'your-aqicn-token');

Get API keys:

• OpenRouter: https://openrouter.ai (free tier available)
• AQICN: https://aqicn.org/api/id/ (free token)

5. Set upload permissions

chmod 777 assets/uploads/

6. Enable Apache mod_rewrite (Linux)

sudo a2enmod rewrite
sudo systemctl restart apache2

7. Access the app

http://localhost/climavoice

Default Admin Account

Email    : admin@climavoice.id
Password : password

---

🔑 Environment Notes

Config	Value
AI Model	google/gemini-2.0-flash-001
Max Upload Size	5 MB (JPG, PNG, WebP)
File Validation	Magic bytes (cross-platform, no finfo dependency)
Password Hashing	bcrypt via password_hash()
CSRF Protection	Token on all POST forms
Session	PHP native sessions

---

📊 Database Schema

Table	Description
users	id, name, email, password (bcrypt), role, bio, created_at
reports	id, user_id, title, description, category, location_name, location_lat, location_lng, photo, status, ai_analysis, ai_severity, upvote_count, view_count, created_at, updated_at
report_upvotes	id, report_id, user_id — unique per user per report
comments	id, report_id, user_id, content, created_at
chat_messages	id, session_key, user_id, role, content, created_at

All foreign keys use ON DELETE CASCADE.

---

🔐 Security Features

• CSRF tokens on all forms
• Prepared statements (PDO) — no SQL injection
• bcrypt password hashing
• Magic bytes file validation (not relying on finfo/MIME)
• Role-based access control (admin vs user)
• XSS prevention via htmlspecialchars() on all output
• File upload restricted to JPG/PNG/WebP with size limit

---

🌐 Cross-Platform Compatibility

Tested and verified to work on:

• ✅ macOS (XAMPP)
• ✅ Windows (XAMPP)
• ✅ Linux (Apache2)

Key cross-platform decisions:

• Magic bytes instead of finfo for file validation
• dirname(__DIR__) for path resolution (no hardcoded separators)
• utf8mb4 MySQL charset
• No OS-specific PHP extensions required

---

📱 PWA Support

ClimaVoice is installable as a Progressive Web App:

• Add to homescreen on Android (Chrome) and iOS (Safari)
• Offline fallback page when no internet connection
• App shortcuts for quick access to key features
• Theme color #16a34a (ClimaVoice green)

---

🗺️ Roadmap

• Heatmap layer on main map (Leaflet.heat)
• Public analytics dashboard with Chart.js
• Dark mode toggle
• Email notifications on report status change
• AI report similarity detection (prevent duplicates)
• Multi-language support (ID/EN)
• Open API for third-party access

---

📜 License & Attribution

• Tailwind CSS — MIT License (CDN)
• Leaflet.js — BSD 2-Clause License
• OpenStreetMap — ODbL License
• Google Gemini — via OpenRouter API (Google Terms of Service)
• AQICN — World Air Quality Index API

All code in this repository is original work by Team Ngawi Empire.

---

👥 Team

Ngawi Empire PROXOCORIS International Competition 2026 Category: Web Development Subtema: AI for Climate Justice and Social Resilience

---

"Suara Komunitas untuk Keadilan Iklim" ClimaVoice — Bridging Gaps: Code for Earth, Intelligence for Justice, and Sustainability for Shaping Tomorrow