Bio-Sada: Multi-Role Real-Time Digital Waste Bank & Logistics SaaS
Mobile-first web ecosystem digitizing on-demand waste collection logistics, dynamic price transparency, and financial ledgers for customers, partners, and admins.
Overview
Conventional community waste banks across Malang face logistical bottlenecks, untracked pricing fluctuations, and tedious manual bookkeeping. Engineered as a multi-tenant freelance SaaS application, Bio-Sada seamlessly connects three core stakeholders: Customers, Collection Partners, and System Administrators. Built mobile-first using React, TypeScript, and Supabase Realtime, the platform automates on-demand pickup dispatches, facilitates on-site weight reconciliation, and delivers instantaneous transparent payout calculations to accelerate circular economy engagement.
Challenges & Solutions
Synchronizing three distinct operational entities within a single web architecture required resilient real-time state pipelines and strict authorization boundaries:
Preventing race conditions during rapid dispatch claims as concurrent collection partners bid on newly submitted pickup tickets.
Designing an accessible, mobile-first interface optimized for outdoor field readability under direct sunlight and volatile network conditions.
Preserving historical ledger precision whenever admins adjust material pricing benchmarks while collection runs are actively in transit.
Key Responsibilities
Analyzed multi-stakeholder operational requirements and engineered a high-performance frontend architecture leveraging React (Vite), TypeScript, and Tailwind CSS v4
Architected modular, role-isolated portals tailored for Customer bookings, Partner operational dispatching, and Administrative governance
Integrated Supabase Auth, PostgreSQL, Object Storage, and Realtime event channels to achieve sub-second collection dispatch synchronization
Implemented robust asynchronous data-fetching and caching pipelines with TanStack Query v5 paired with Zustand for scalable global client state
Engineered on-site weight reconciliation mechanisms that dynamically calculate financial yields based on live administrative master rate tables
Result & Outcomes
The production deployment of Bio-Sada modernized local waste aggregation logistics and removed operational friction across the collection chain:
Unified three discrete stakeholder workflows (consumer, collector, governor) into a cohesive responsive web platform bypassing native app installation friction.
Drastically reduced pickup dispatch confirmation times through Supabase Realtime subscriptions and instant toast notifications.
Completely eliminated manual reconciliation discrepancies via server-side atomic valuation formulas applied during on-site handovers.
Lessons Learned
Architecting a real-time multi-tenant logistics ecosystem provided vital technical takeaways concerning state partitioning and transactional safety:
Strictly separating asynchronous server caches (TanStack Query) from transient local UI state (Zustand) prevents redundant UI re-renders across high-frequency forms.
Dynamic pricing models require binding immutable valuation snapshots directly to the transaction record at creation to prevent historical accounting anomalies.
Technologies Used
React.js
Vite
TypeScript
Tailwind CSS
TanStack Query
shadcn/ui
PostgreSQL
Key Features
On-Demand Pickup Request — Streamlined dispatch submission allowing customers to schedule doorstep collections with estimated weights and geolocation coordinates.
Real-Time Partner Dispatch — Interactive collection cockpit equipping verified partners with instant task notifications and optimized route workflows.
On-Site Weight Reconciliation — Mobile input module allowing partners to log verified field measurements with immediate automated earnings recalculations.
Dynamic Material Catalog — Live marketplace registry exposing transparent scrap material valuations dynamically configurable by system admins.
Multi-Role Governance Console — Centralized oversight suite managing partner credential verification, operational audit logs, and complete user directories.
Digital Waste Ledger — Transparent personal ledger enabling customers to audit historical collection milestones and cumulative monetary yields.