CareYuk

A two-sided platform that routes volunteers to the healthcare opportunities their community needs most; and turns every hour they give into verified, badge-earning experience.

Comment

Inspiration

Across Jakarta, the Posyandu and neighbourhood clinics that hold community health together are stretched impossibly thin — maternal check-ups get skipped, elderly screenings go undone, and health education never reaches the families who need it, all for want of hands. At the same time, we kept meeting students — high schoolers curious about medicine, undergrads, med students chasing clinical hours — who genuinely wanted to help but had no trusted way to find real healthcare work or prove they'd done it. Two problems that are secretly each other's solution. That's the gap CareYuk was born to close.

What it does

CareYuk is a two-sided platform that connects volunteers with the healthcare opportunities and neighbourhoods that need them most, and verifies every hour they give.

  • Organisations post opportunities (maternal drives, clinic intake, ward shadowing), review matched applicants, and run live QR check-in on-site.
  • Volunteers see a live map of opportunities ranked for them by a weighted matching engine, apply in a tap, scan the organiser's QR code to check in, and build a verified care portfolio — hours + badges — that hospitals and universities can trust.
  • Communities watch their health scores climb as verified sessions accumulate: the relay effect where every trained volunteer strengthens the next.

How we built it

  • Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind v4, and framer-motion for the cinematic About landing, page transitions, and animated portfolio timeline.
  • Backend & auth: Supabase (Postgres + Auth) with email/password and Google OAuth, and a clean client seam that degrades gracefully when the API isn't reachable.
  • Matching engine: a weighted score — interest (0.30) + faculty/education level (0.25) + proximity via Haversine (0.25) + zone priority (0.10) + urgency (0.10) — with level gating and human-readable match reasons.
  • Map: Leaflet with CARTO Positron tiles and custom opportunity pins.
  • QR check-in: qrcode to generate a real, scannable code on the org side and jsQR to read it live from the volunteer's camera — fully offline, with a manual-code fallback.
  • This was our first hackathon and our first real team project, and for some of us it was our first time coding at all — so we leaned on Claude (Anthropic's AI) as a patient pair programmer across the frontend, animations, matching logic, and integration.

Challenges we ran into

  • Learning to work as a team, on Git, all at once. None of us had built a project together before — we learned GitHub during the hackathon: branches, pull requests, merge conflicts, keeping everyone's work in sync without stepping on each other.
  • The absolute-positioned map layout (a curved clip-path sidebar floating over a full-screen Leaflet map) was beautiful on desktop but fought us hard on mobile — we solved it with mobile-only layouts that never touch the desktop design.
  • Backend config gaps during the build (an empty Supabase service-role key) took down every server route with a cryptic 500 — we traced it from the logs and hardened the whole app to fall back to a self-contained demo mode, so the experience never dead-ends.
  • Keeping the demo honest without a live DB: we built lightweight localStorage-backed stores so a real user's name, applications, profile, and verified hours flow through the whole journey — no more mysterious "Rina" greeting us.

Accomplishments that we're proud of

  • Shipping a genuine end-to-end journey — land on a cinematic About page → sign up and build a profile → get matched → apply → check in with a QR scan → watch verified hours and badges appear — as a first-time team, some of us writing our first-ever lines of code.
  • A real matching algorithm (not a mock) with proximity, interest, and education-level gating.
  • On-site QR check-in that actually works, offline, with a graceful fallback.
  • A polished, fully responsive product with themed error/404 pages — and a desktop design we protected pixel-for-pixel while giving mobile its own layout.
  • Finishing with a clean GitHub repo, pull requests, and a deployable build — something none of us knew how to do a weekend ago.

What we learned

  • How to build software together. This was our first hackathon and first team project — we learned Git and GitHub from scratch (branches, PRs, resolving conflicts), how to split work, and how to bring it back together into one app.
  • How to actually code, for those of us starting from zero — with Claude helping us understand why each piece worked, not just paste it in.
  • How to design software that degrades gracefully — every feature has a fallback, so a missing key or offline camera never breaks the demo.
  • Tuning a weighted matching model so the "why" behind a recommendation is as clear to the user as the score.
  • A lot about the reality of community health access in Jakarta — and how much a small logistics layer can unlock.

What's next for CareYuk

  • Live backend at scale: finish wiring Supabase (education level, avatar storage, seeded zones) so accounts and portfolios persist for real.
  • LLM-polished match reasons (already scaffolded with the Anthropic SDK) for warmer, more personal recommendations.
  • Real community-health scoring from actual session data to steer volunteers to the highest-need zones.
  • Certification pathways — turning verified hours into recognised credentials that move students from citizen to certified community health worker.
  • Expansion beyond Jakarta's five kota to more regions and more kinds of care.

Built With

Share this project:

Updates