Belva.
Back to Works
PWA

TrashHub

Eco-System Recycling PWA & Waste Exchange Marketplace

#Next.js PWA#React#Supabase DB & Storage#PostgreSQL RLS#Tailwind CSS#Leaflet Map#Zod & react-hook-form

01. Problem Identification

Many households simply dump recyclable plastics, metals, and cardboards into landfills because sorting trash is inconvenient and yields no incentive. Meanwhile, individual scavengers and collection agencies struggle to find sorted waste in their vicinity, leading to high coordination costs.

PAIN POINT 01

Absence of an incentive model (points valuation) for household waste sorting.

PAIN POINT 02

High resource waste as scavengers manually inspect arbitrary trash sites.

PAIN POINT 03

Difficulty coordinating exact collection pickup locations and waste pictures.

02. The Solution

TrashHub bridges this gap with an installable, mobile-responsive PWA. Households list sorted waste packages with direct pinpoint map coordinates, photos, and estimated points. Scavengers accept orders nearby, verify weight upon arrival, and credit points to the user's digital wallet.

Offline-Enabled PWA

Supports home screen installation and fast offline service worker performance for waste collectors.

Interactive Pinpoint Map

Uses Leaflet/Google Maps API to drop coordinates (_lat, _long) for waste pickup locations.

Granular RLS Policies

Supabase security layers ensure secure data separation between households, cleaners, and admin roles.

03. Crafting & Engineering

System Architecture Flow

#01Next.js PWA FrontendResponsive mobile app, map plotting & order forms
React / Tailwind / Leaflet
#02Supabase Edge & AuthUnified auth sessions & serverless endpoints gateway
Supabase Auth
#03PostgreSQL DB (RLS)Relational data for users, trash catalog & customer orders
PostgreSQL
#04Supabase StorageObject storage hosting uploaded waste verification pictures
Storage Bucket

Technology Selection

Next.js PWAEnables mobile home-screen installability, lightweight asset caching, and offline-first interfaces for street operators.
Leaflet Maps APIEnables lightweight, custom-styled map marker pins for precise geolocation coordinates without tracking bloat.
Supabase PostgreSQL RLSEnforces robust row-level access control directly at the database level, ensuring users can only read/edit their own orders.
Supabase StorageHandles high-resolution image uploads of waste piles, complete with size and format restrictions.

Key Engineering Challenges Solved

  • Enforcing secure multi-role database tables (Customer, Cleaner, Admin) without bloating Next.js middleware execution limits.
  • Synchronizing offline PWA state queries when waste collectors enter deep landfill zones with zero network signals.
  • Rendering multiple coordinates map clusters on low-end mobile devices without degrading scroll frame rates.