ReachFirst

The secure account creation page tailored for donors looking to fund crises and track verified humanitarian deliveries.
An administrative queue displaying various regional relief organizations and their current government or platform verification status.
The central Admin Console where platform administrators can review, approve, or reject pending NGO accreditation applications.
The public transparency ledger displaying confirmed donations, paid milestones, and audited escrow disbursals for complete accountability.
A detailed disaster overview page featuring algorithmic rankings of priority responders based on proximity and delivery rates.
The impactful platform landing page emphasizing transparent, escrow-backed funding alongside real-time platform metrics.
An interactive live deployment map tracking geospatial crisis hotspots across India, categorized by disaster severity.
A secure document upload interface for NGOs to submit their official registration and tax exemption certificates for verification.
The verified NGO dashboard displaying successful accreditation, detailed organizational information, and quick action tools.
A legal declaration and submission checklist ensuring NGOs agree to strict platform compliance before their application is reviewed.

Inspiration

During natural disasters, two major problems occur on the ground: information chaos and a trust deficit. Donors want to help but don't know which organizations are actively delivering aid, while small, local NGOs struggle to get visibility and resources compared to massive, heavily-marketed ones. At the same time, verifying how funds are utilized is nearly impossible in real-time.

We built ReachFirst to solve this. Our inspiration was to create a transparent, data-driven disaster relief platform that maps real-time crises, ranks the most effective local NGOs on the ground using empirical metrics, and tracks every donation with an interactive escrow and visual proof ledger.

What it does

ReachFirst is an end-to-end disaster relief and transparency platform:

Live Crisis Mapping: Shows active disasters (color-coded by severity) with filters, utilizing custom Leaflet maps.
NGO Ranking System: Dynamic algorithmic ranking based on proximity, historical delivery speed, capacity, and verified badges to ensure the best responders are funded first.
Transparent PayPal Escrow Flow: A live workflow where donors can select preset or custom amounts, see exactly what supplies their money will purchase, and track funds from escrow to field verification.
NGO & Admin Portal: Allows NGOs to apply, submit inventory updates through an AI-powered budget parser, and upload geo-tagged photo proofs. Admins can verify documents, manage applications, and control campaigns.
Transparency Ledger: Provides donors with a chronological history of escrow disbursements, combined with image metadata (GPS and timestamps) to prevent fraud.

How we built it

We chose a robust, modern stack to ensure performance and real-time reliability:

Frontend: Next.js (App Router), Tailwind CSS, and TypeScript for a fast, responsive, and type-safe interface.
Maps: react-leaflet with dynamic rendering to prevent SSR window issues, coupled with custom custom L.divIcon styling.
State & Validation: Zod with React Hook Form for client/server schema validation.
Database: PostgreSQL managed with Drizzle ORM.
Authentication: NextAuth v5 to handle Role-Based Access Control (RBAC) securely across 3 personas (Donors, NGOs, Admins).
Integrations: @paypal/react-paypal-js for capturing and securing donations, and exifr on the client side to extract real-time GPS coordinates from proof photos.

Challenges we faced

Map Integration: Implementing react-leaflet within Next.js had a steep learning curve because Leaflet depends heavily on client-side global window objects. We solved this by using next/dynamic to turn off server-side rendering for the map wrapper, ensuring a fluid build process.
State Synchronization: Merging distinct backend features—such as user authorization, the donation checkout, and algorithmic ranking—without a centralized production environment led to Git merge conflicts. To conquer this, our team adopted a rigorous branching strategy (be/... tasks and frontend-phase-x paths) and staged visual Pull Requests to seamlessly merge API routes.
Data Integrity: Pulling geo-coordinates from photos uploaded by NGOs needed a zero-trust model. We built client-side EXIF extractors that guarantee files actually possess precise GPS tracking markers before they can be sent to the server.

Accomplishments that we're proud of

Custom Design System: Created a highly professional, cohesive design system (slate blue, navy, and teal) designed to feel like an enterprise disaster room.
Intelligent Ranking Algorithm: Devised a mathematical scoring system based on proximity, delivery speed, and target capacity—no more "favorite" NGOs getting all the money, just the ones who can help right now.
Flawless Secure Escrow: Fully wired payment checkouts directly with mock API endpoints that update active status trackers automatically upon payment confirmation.

What we learned

We learned how to design software with deep user-persona considerations. Moving between Donor, NGO, and Admin roles forced us to consider different workflows—especially around mobile-friendly data grids and offline-friendly image inputs. On the developer side, this hackathon has been an intense lesson in Git collaboration, multi-branch merging, and API handoffs under a ticking clock.

What's next for ReachFirst

Real-time WebSocket Alerts: Live disaster notifications pushed instantly to registered field volunteers.
On-Chain Accountability: Migrating the ledger and proof of delivery systems to a decentralized blockchain for Immutable, zero-knowledge verification.
Offline Data Queues: Enabling NGO portal functionality, GPS tagging, and document preparation even during cellular network outages, with background syncing when connectivity returns.

Built With

api
authentication
dashboard
drizzle-orm
exifr
geojson
git
github
gps
leaflet.js
next.js
next.js-15
nextauth.js
node.js
paypal
postgresql
react
react-hook-form
responsive-design
schema-validation
tailwindcss
typescript
visual-studio-code
zod

Updates

Siddhi Bathwal posted an update — Nov 12, 2026 12:49 PM EST

Title: Project Complete: ReachFirst is ready for deployment!

Update Body: We just wrapped up the final code for ReachFirst! After an intense hackathon of building, branching, and merging, our transparent disaster relief platform is fully operational.

During natural disasters, donors want to help but often don't know who to trust, while local NGOs struggle to get visibility. We built ReachFirst to bridge that gap with verified data and financial accountability.

Here is a quick look at the core engine we just finished building:

Live Crisis Mapping: Real-time tracking of disaster hotspots using custom Leaflet maps.
Smart NGO Ranking: An algorithmic scoring system to highlight the most effective frontline responders based on proximity and capacity.
Secure Escrow Donations: Fully integrated with the PayPal API so donors can track their funds from payment to verified field delivery.
AI & Transparency Portals: We added an AI-powered budget parser for NGOs and a strict GPS-verified photo ledger to guarantee zero-trust transparency.

The Tech Stack: Next.js 16 (App Router), TypeScript, Tailwind CSS, PostgreSQL (Drizzle), NextAuth v5, and PayPal.

A huge shoutout to the team for pulling off a complex multi-branch Git workflow and bringing this enterprise-grade design system to life. Check out our project gallery to see the live map, NGO portals, and public transparency ledger in action!

Siddhi Bathwal started this project — Nov 12, 2026 12:26 PM EST

Leave feedback in the comments!