EduFund Connect

About the Project

Inspiration

I set out to build a platform that bridges the gap between students and supporters by offering a transparent, data-driven experience. After seeing how many worthy students struggled to access resources—and how donors wanted real-time visibility into impact—I realized that a modern web application, combining real-time metrics with a polished UI, could make all the difference.

Problem (especially in Africa)

Underfunded schools and students: Many families can’t afford tuition, books, or supplies, leaving large numbers of children out of the classroom.
Opaque funding channels: Traditional scholarship programs often lack clear tracking, so donors can’t see if funds actually reach students.
Delayed disbursements: Bureaucratic processes can hold up payments for months, causing students to drop out mid-term.
Lack of local monitoring: Without on-the-ground verification, funds may be misallocated or misused before ever reaching the intended beneficiary.

What I Learned

Scalable state management with React Context and custom hooks to keep components lean and predictable.
Type-safe API integration using Supabase’s auto-generated TypeScript types, which dramatically reduced runtime errors.
Internationalization workflows with i18next, enabling the site to support multiple locales without duplicating code.
No-code hosting & deployment by leveraging Bolt New’s Git-connected UI for zero-maintenance build pipelines.

How I Built This

Bootstrapped the frontend with Vite + React + TypeScript for lightning-fast hot reloads and modern ES module support.
Styled exclusively with Tailwind CSS utility classes to ensure a consistent, responsive design without wrestling with custom CSS.
Managed data and authentication via Supabase’s dashboard—using its Postgres database, Auth API, and Realtime subscriptions—so I didn’t have to script any backend infrastructure.
Integrated Stripe Elements for secure, PCI-compliant payments, and Firebase Cloud Messaging for push notifications—all configured through their web consoles.
Deployed the app on Bolt New (the official hackathon organizer’s no-code platform): I simply connected my Git repo, defined environment variables, and Bolt handled building, previewing, and production releases.

Solution with EduFund Connect

Transparent dashboards show donors exactly when and how much was disbursed at each stage of a student’s journey.
Staged disbursement logic releases funds only when students meet predefined milestones (e.g., enrollment confirmation, exam completion).
Independent verifiers (local NGOs or community volunteers) can upload photos or reports, which trigger automated status updates.
Real-time notifications ensure stakeholders are alerted immediately on payments, milestone achievements, or flagged issues.
Mobile-first design and multi-language support make the platform accessible even in low-bandwidth or non-English environments.

Challenges Faced

Real-time monitoring: Tuning Supabase Realtime channels to only push necessary events, avoiding UI thrashing under heavy update loads.
Auth guard edge cases: Handling token expiry gracefully required building a silent refresh mechanism to keep users logged in without interrupting their workflow.
Responsive layouts: Crafting a dashboard that worked equally well on mobile and desktop took several rounds of tweaking Tailwind’s breakpoint utilities.