BantuCepat

"BantuCepat: Bridging donors and disaster zones with real-time, transparent, and verified aid distribution."

Comment

🌋 Inspiration

Indonesia sits on the Ring of Fire. From sudden floods in Aceh to earthquakes in Cianjur, natural disasters are a tragic but consistent reality. During these crises, the biggest bottleneck isn't a lack of empathy or supplies—it's information asymmetry.

Volunteers often rely on chaotic, unstructured WhatsApp or Telegram messages. This leads to critical logistical failures: one posko (command post) might receive a surplus of instant noodles, while another just 5 kilometers away desperately needs baby formula and blankets. We realized that to save lives efficiently, we needed a "digital nervous system" for emergency logistics. Thus, BantuCepat was born.

⚙️ How we built it

BantuCepat is built on a high-performance Monorepo architecture powered by Bun, ensuring isolated heavy lifting on the backend and an ultra-light, responsive frontend for volunteers in the field.

Here is our dual-stage AI and spatial pipeline:

  1. The Brain (Backend - Hono & Gemini AI): We built a serverless-ready API using Hono. When a victim or local representative submits an unstructured, panicked text report via their phone (e.g., "Help, water is chest-high in RT 03, need 40 blankets NOW"), we pipe this into the Google Gemini API. Gemini acts as our Stage-1 parser, extracting entities into a clean JSON format (disaster type, urgency level, specific supplies needed, and coordinates).
  2. The Spatial Engine (Supabase + PostGIS): Extracted data is fed into a PostgreSQL database equipped with PostGIS. We utilize spatial queries to match victims with the nearest active volunteer hubs, utilizing distance calculations based on the Haversine formula: $$d = 2r \arcsin\left(\sqrt{\sin^2\left(\frac{\Delta\phi}{2}\right) + \cos\phi_1\cos\phi_2\sin^2\left(\frac{\Delta\lambda}{2}\right)}\right)$$
  3. The Interface (Frontend - React 19 & Tailwind v4): We translated complex system flows into a clean, intuitive UI/UX design system. Using React 19 and Tailwind CSS v4, we crafted a dashboard that renders MapLibre geospatial data dynamically. We ensured strict mobile responsiveness, knowing that volunteers will primarily access this platform via smartphones in areas with potentially poor connectivity.

🚧 Challenges we faced

  • Wrangling Unstructured Data: People in panic don't fill out neat forms. Engineering the Gemini prompt to consistently output strict JSON schemas from messy, typo-ridden Indonesian slang was a major hurdle.
  • Responsive Complex UI: Designing a map-heavy dashboard that looks expansive on a 1440px desktop but stacks perfectly into a usable, thumb-friendly interface on a mobile screen required deep dives into Flexbox, Grid, and Tailwind v4's new @theme configurations.
  • Monorepo Dependency Hell: Setting up a shared workspace (@bantucepat/shared) for end-to-end TypeScript type safety between the Hono backend and React frontend initially caused lockfile conflicts, but migrating fully to Bun's package manager resolved this instantly.

🧠 What we learned

  • The immense power of combining LLMs (Generative AI) with Geospatial Databases (PostGIS). AI is great at understanding context, but SQL is better at math. Letting them do what they do best created a flawless pipeline.
  • Tailwind v4 is a game-changer. Dropping the tailwind.config.js for pure CSS variable manipulation significantly sped up our UI translation from Figma mockups to code.
  • Empathy in UI/UX: Designing for disaster means designing for high cognitive load. Every color choice (like soft off-whites instead of glaring pure whites) and button placement was optimized to reduce volunteer fatigue.

🚀 What's next for BantuCepat

We plan to integrate automated WhatsApp/Telegram dispatcher bots to notify volunteers the second a high-priority JSON payload is parsed by Gemini. We also aim to partner with local agencies like BNPB to standardize our taxonomy of relief supplies.

Built With

Share this project:

Updates