Thumbnail
SLIDE 3
sLIDE1
Onboarding
Tutorial
Tung Beatdown Success
Global Map
SLIDE 2

Litter Hitter: Snap Trash, Summon Chaos, Save the Planet

Inspiration

Let’s be real: reporting litter to the government is boring, and Gen Z doesn't do "boring." We looked at the addictive, chaotic energy of Roblox "brainrot" games and wondered: What if we could trick people into cleaning the planet by making it a meme? We wanted to replace the friction of civic duty with the instant dopamine hit of a funny animation and the competitive itch of territory ownership.

What it does

Litter Hitter is a web-based AR game that turns street cleaning into a high-stakes turf war.

Snap: The camera opens instantly via browser WebRTC. No login wall, no friction.
Verify: Google Gemini AI scans the photo to ensure it’s actually trash (preventing "point farming" with fake photos).
Bust: Once verified, the app triggers a chaotic 3D mascot beatdown animation directly over the litter.
Log: Reports are geo-tagged and synced to a global Mapbox view, which doubles as a territory map.
Compete: Users earn points, climb the Supabase-powered leaderboard, and claim "ownership" of city zones.

How we built it

We prioritized a cutting-edge, ultra-responsive stack for the Hackathon:

Frontend: Built with React 19 and Vite for the fastest possible load times.
Styling: Used the brand-new Tailwind CSS v4 for streamlined, high-performance UI.
Intelligence: Integrated Google Gemini API (multi-model fallback) for real-time visual verification.
Database & Auth: Supabase (PostgreSQL) handles our real-time leaderboard, user profiles, and litter-pin persistence.
Mapping: Mapbox GL JS via react-map-gl for the interactive territory and pickup visualization.
Camera: Custom implementation using getUserMedia for seamless multi-camera switching in-browser.

Challenges we ran into

The biggest hurdle was the "Zero Friction" goal. Getting a camera to launch instantly while initializing the AI verification engine is a performance tightrope. We also spent significant time on Gemini prompt engineering to ensure the AI could accurately distinguish between "litter on the ground" and "a messy room" to maintain the integrity of our leaderboard.

Accomplishments that we're proud of

Verification Speed: Optimizing the Gemini Vision call to return a "Verified" status in near real-time.
React 19 Integration: Being early adopters of React 19 and Tailwind v4 to ensure the app is built on the latest industry standards.
The "Map-to-Action" Loop: Creating a seamless transition from the live camera to a global map pin in under 15 seconds.

What we learned

We learned that gamification is the ultimate UX shortcut. By adding a competitive leaderboard and visual "hits," we saw that people stop viewing litter as an eyesore and start viewing it as an opportunity to level up. We also gained deep experience in managing real-time geospatial data with Supabase and Mapbox.

What's next for Litter Hitter

Mascot Marketplace: Unlocking new characters with unique "beatdown" animations and XP multipliers.
Council API Integration: Moving from structured JSON logs to direct ticket injection for city councils (starting with DKI Jakarta).
Clan System: Allowing neighborhoods to form "Guilds" to compete for the "Cleanest District" trophy.
Real Rewards: Partnering with local businesses to turn "Passive XP" into actual vouchers or transit credits.