CleanShare

CleanShare makes waste reporting dead-simple: log in, drop a pin, snap a photo, let AI verify, and see it on the map—fast and friendly. ✅🗺️

What it does (super short) 🔐 Sign in with Clerk → reliable identity and roles.

📍 Search/select location with MapTiler + OSM.

🖼️ Upload a photo → 🤖 Gemini detects waste type and amount with confidence.

🗄️ Save to Neon Postgres via Drizzle → clean, reliable data.

🗺️ View reports on the map → filter by status: Open, Verified, Cleaned.

Why it matters 🧠 Smarter reports: AI adds type/quantity/confidence so teams act faster.

🗺️ Transparent impact: Hotspots and progress are visible to everyone.

📱 Built for action: Mobile-first UX → more reports, faster cleanups.

Flowchart (text + icons) Use this slide as-is. ┌───────────┐ | 🚀 Start | └─────┬─────┘ v ┌───────────────┐ | 🔐 Login | (Clerk) └─────┬─────────┘ v ┌──────────────────────┐ | 📍 Pick Location | (MapTiler + OSM) └─────┬────────────────┘ v ┌──────────────────────┐ | 🖼️ Upload Photo | └─────┬────────────────┘ v ┌─────────────────────────────────────┐ | 🤖 AI Analyze (Gemini) | | Type - Quantity - Confidence | └─────┬───────────────────────────────┘ v ┌───────────────────────────┐ | 🗄️ Save Report | (Drizzle → Neon) └─────┬─────────────────────┘ v ┌───────────────────────────┐ | 🗺️ View on Map | (Open/Verified/Cleaned) └─────┬─────────────────────┘ v ┌───────────┐ | ✅ Done | └───────────┘

Legend (statuses) 🟡 Open = New, needs review.

🟢 Verified = AI + moderator confirmed.

✅ Cleaned = Resolved with proof.

UML-style sequence (simple) Actors: 👤 Reporter | 🔐 Clerk | 🌐 Map | 🤖 Gemini | 🗄️ DB | 🗺️ UI

👤 → 🔐: Login() → token 🔑 👤 → 🌐: Geocode(search “street…”) → coords 📍 👤 → 🤖: Analyze(photo) → {type, qty, conf} 📈 👤 → 🗄️: Save(report payload) → id ✔️ 👤 → 🗺️: LoadMap(filters) 🗺️ → 🗄️: FetchReports() → GeoJSON 🗺️ → 👤: Render clusters + status chips

UML-style components (simple) Client (Next.js/React/Tailwind) → Auth SDK(Clerk) 🔐, Map SDK(MapTiler/OSM) 🗺️, Upload 🖼️

Server (Next.js API Routes) → AI Service(Gemini) 🤖, Data Service(Drizzle) 🗄️

Database → Neon PostgreSQL (cloud) 🗃️

ASCII blocks for slides: ┌──────── Client ────────┐ │ UI + Clerk + Map SDK │ └──────────┬─────────────┘ │ HTTPS v ┌──────── Server ────────┐ │ API: AI(Gemini), DB │ └──────────┬─────────────┘ │ SQL v ┌────── Neon Postgres ───┐ │ reports - users - media│ └────────────────────────┘

Point-wise “How to use” Open app and sign in 🔐.

Search location, drop a pin 📍.

Click “Upload photo,” add a note 🖼️📝.

AI suggests type/quantity; confirm or edit 🤖✏️.

Submit → appears on the map with status 🗺️.

Track progress: Open → Verified → Cleaned 🔁.

Presenter one-liner “Report waste in seconds, let AI verify, and watch cleanups happen on the map—simple, transparent, and community-powered.” 💡🧹🗺️

Built With

• clerk
• drizzle
• neon
• nextjs
• postressql
• react
• tailwindcss
• typescript