Kevin Mahardyan SaputraFullstack Web & Mobile Developer

Information Systems · Crafting performant, high-craft web & mobile experiences.

Deployed on Vercel
Back to All Projects
Side / Mini Project
2025
Web Application

CivicLens: AI-Powered Civic Problem Analyzer & Issue Tracker

AI Vision-powered public infrastructure diagnostic platform: automated damage classification, structural hazard estimation, and geospatial citizen issue tracking.

CivicLens: AI-Powered Civic Problem Analyzer & Issue Tracker
Interactive Multi-Role Showcase

Role-Isolated Ecosystem Previews

01 / 04
Web AnalyzerDesktop Mockup Frame

AI-driven civic reporting console: image upload with EXIF metadata parsing, multimodal Gemini diagnostic outputs, municipal escalation workflows, and civic impact documentation.

4 Verified Screens
1. Issue Intake & Photo Upload
Click to view full screen
desktop Frame Mockup
01

1. Issue Intake & Photo Upload

Interactive drag-and-drop upload form detecting photo EXIF coordinates and issue category tags.

2. AI Vision Diagnostics & Severity Score
Click to view full screen
desktop Frame Mockup
02

2. AI Vision Diagnostics & Severity Score

Automated extraction of damage type, structural hazard estimation, and municipal urgency priority score.

3. Verification & Escalation Workflow
Click to view full screen
desktop Frame Mockup
03

3. Verification & Escalation Workflow

Overview of civic report validation workflow from AI triage to public agency field dispatch.

4. Civic Impact & Public Transparency
Click to view full screen
desktop Frame Mockup
04

4. Civic Impact & Public Transparency

Documentation on civic-tech architecture fostering urban public infrastructure accountability.

Project Architecture & Overview

CivicLens accelerates municipal infrastructure maintenance using artificial intelligence. Citizens simply snap photos of public hazards such as potholes, damaged sidewalks, or illegal dumping sites. The system analyzes the imagery in real time using the Google Gemini Vision API to quantify structural risk, validate GPS coordinates on interactive maps, and compile standardized escalation reports for public works authorities.

TECHNOLOGIES & TOOLS USED
Next.js 15
TypeScript
Tailwind CSS
Google Gemini Vision
Leaflet Maps
Supabase DB
Framer Motion
Deep-Dive Engineering Log

Case Study & Retrospective

CHALLENGE #1

AI Vision Classification Accuracy Under Low-Light Conditions

Encountered Problem:

Nighttime photos of road defects taken under dim streetlighting frequently yielded classification noise and false positives.

Engineering Solution:

Applied client-side CLAHE image preprocessing to enhance contrast and edge definition prior to sending frames to the Gemini Vision API.

CHALLENGE #2

Duplicate Issue Report De-duplication Near Identical Coordinates

Encountered Problem:

Multiple citizens submitting photos of the exact same street pothole within a 10-meter radius caused database clutter.

Engineering Solution:

Engineered PostGIS spatial queries with ST_DWithin clustering to merge incoming alerts into existing active municipal tickets.

NEXT PROJECT
Big Project

HabitHub: Gamified Habit Tracker & Social Squad Ecosystem

Gamified mobile habit tracking platform featuring RPG progression: tiered streak systems, mystery reward chests, 7-day login bonuses, interactive exploration challenges, social accountability squads, and GitHub-style consistency heatmaps.

View Case Study