Back to Projects ArchiveProject 04 of 04

Nonprofit Client Collaboration • Technical Case StudyPaediatric Health & Interactive Education Hub

Davcie Foundation

Nonprofit Platform & Paediatric Diabetes Health Hub

A modern, accessible non-profit web platform supporting children and teenagers living with diabetes across West Africa. Engineered with Next.js 16, Supabase, Tailwind CSS v4, and Paystack integration, pairing gamified health literacy experiences with an authenticated administrative management portal.

My RoleFull-Stack DeveloperFrontend, Education, Supabase & Admin

CollaborationTech Lead ColleagueAuthored Foundation About Page

Core StackNext.js 16 • SupabaseTailwind v4 • Framer Motion

Project StatusPre-Launch PreviewAwaiting Medical Review

davciefoundation.org • Preview Build

Source Code

Davcie Foundation • Empowering Young Lives Beyond DiabetesVerified Staging Implementation

01 • The Mission

Demystifying Paediatric Diabetes in West Africa

Davcie Foundation is a non-profit initiative dedicated to supporting children and teenagers living with diabetes and their families. Across Ghana and West Africa, a diagnosis of diabetes in young people is frequently accompanied by profound societal stigma, isolation, and widespread misinformation. Myths such as diabetes being caused solely by excessive sugar intake or being contagious can lead to delayed clinical presentation, anxiety, and school disruptions.

The platform was created to provide a warm, encouraging, and authoritative digital presence. Instead of presenting intimidating clinical manuals, the objective was to craft an approachable space where children, parents, and educators can build accurate health awareness through interactive discovery, volunteer for outreach programmes, and access vital support.

Education

Dispel persistent misconceptions through gamified myth-busting cards and interactive quizzes.

Support

Connect newly diagnosed families with community networks, shared stories, and peer encouragement.

Advocacy

Raise institutional awareness across schools, health centres, and youth sporting programmes.

Empowerment

Equip young individuals with the confidence and tools to thrive beyond a chronic diagnosis.

02 • Visual Direction

Warmth, Dignity, and Contrast-Engineered Design

When designing health platforms for children and families, visual atmosphere directly impacts emotional safety. Harsh clinical whites, stark reds, and cold sterile layouts were rejected in favour of a comforting, organic palette rooted in warm cream (#fdfaf0), stately navy (#14307a), and hopeful gold (#e8b423).

I drew limited structural inspiration from meeafoundation.org, specifically its arrangement of information, floating pill navigation bar, and rounded card containers. However, the visual direction, color system, typography pairings, and code architecture were entirely my own creation, tailored specifically to Davcie Foundation's mission.

Theme TokenHex CodeContrast & Application Role

navy

#14307aPrimary headings, dark cards, footer, authoritative anchors

azure

#2f7fd0Surface glows, badges, icon backdrops (decorative only)

azure-text

#2566adWCAG AA compliant (4.5:1 ratio) for small blue text

gold

#e8b423Action triggers, celebration stars, active interactive states

cream

#fdfaf0Warm page canvas, inviting alternative to sterile hospital white

Accessibility Rigour:

Standard azure (#2f7fd0) failed WCAG AA text contrast on cream backgrounds at small font sizes. I engineered the dedicated azure-text (#2566ad) design token, ensuring readable contrast across all mobile viewports while preserving the visual identity.

03 • Motion Physics

14-Piece Emblem Reassembly & Web Speech Narration

To introduce visitors to the foundation's core philosophy of restoration and community, I designed an opening animation experience. The foundation's circular emblem enters the screen divided into fourteen distinct vector puzzle fragments scattered around the viewport.

Using polar coordinates and trigonometric scattering mathematics, each piece begins dispersed across the screen with deliberate angular offsets. As the intro sequence unfolds, Framer Motion springs magnetically pull the fourteen fragments toward the centre, smoothly reassembling the complete foundation emblem. Concurrently, the browser's native Web Speech API speaks a welcoming voice greeting, establishing an inviting, multi-sensory first impression.

components/IntroSplash.tsx • Polar Coordinate Fragment Scattering

// Polar distribution: spreads 14 emblem fragments across orbits
function scatterFor(i: number, n: number) {
  const angle = (i / n) * Math.PI * 2 + 0.6;
  const rx = 30 + ((i * 7) % 18);
  const ry = 45 + ((i * 11) % 30);
  return {
    x: Math.round(Math.cos(angle) * rx) + "%",
    y: Math.round(Math.sin(angle) * ry) + "%",
    rotate: (i % 2 === 0 ? -1 : 1) * (140 + ((i * 23) % 120)),
    scale: 0.55 + ((i * 13) % 5) * 0.1,
  };
}

// Zero-flash pre-hydration caching in layout.tsx:
// An inline script immediately reads localStorage('davcie-intro-seen')
// and appends .intro-seen before DOM paint, preventing duplicate animations.

Zero-Flash Caching

Inline head script appends .intro-seen prior to paint, guaranteeing returning visitors never experience intro replay lag.

Web Speech API

Synthesized audio greeting triggers upon first user interaction, gracefully degrading in unsupported environments without throwing exceptions.

Reduced-Motion Bypass

Users with prefers-reduced-motion bypass the animation entirely, while an Escape key shortcut allows instant skipping.

04 • Gamified Health Literacy

Interactive Learning: Flip Cards, Game & Quiz

Education is the platform's primary clinical defense against paediatric diabetes complications. To transform complex medical facts into engaging, age-appropriate interactions, I engineered three distinct learning modules on /learn:

Module A • CSS 3D Transforms

Myth-Busting 3D Flip Cards

Rendered with CSS perspective: 1000px and 3D backface visibility. Clicking or pressing Enter flips the card 180 degrees to replace prevalent myths with clinical truths.

Accessible ARIA live labels inform screen reader users of the hidden state toggle.

Module B • Binary Classification

Myth or Fact Rapid Game

Presents children with real-world statements. Players make quick binary decisions, receiving instant affirmation with bg-green-700 success states and concise explanations.

Reinforces clinical knowledge without punitive penalties or high-pressure timers.

Module C • Dynamic Knowledge Check

5-Question Randomised Quiz

Selects five randomised questions from a clinical question pool using the Fisher-Yates shuffle algorithm. Shuffles options on every round to guarantee unique learning sessions.

Programmatic focus restoration automatically shifts keyboard focus to the next question heading.

Davcie Foundation Diabetes Education Hub

Paediatric Education Workshop & Warning Signs CurriculumInteractive Curriculum Suite

05 • Technical Architecture

Next.js 16 App Router, Proxy Gating & Tagged Caching

The project leverages the latest Next.js 16 App Router runtime alongside React 19, Turbopack, and Tailwind CSS v4's inline token system (@theme inline). Two modern Next.js architectural patterns were introduced:

Next.js 16 Proxy Gating (proxy.ts): Transitioned from legacy middleware to Next.js 16's recommended proxy architecture to intercept all requests targeting/admin/* routes, verifying Supabase SSR authentication tokens and redirecting unauthenticated users to /admin/login.
Directive-Level Caching ("use cache"): Implemented the Next.js 16 "use cache" directive with cacheTag("events"), enabling edge caching for public event schedules while granting administrators instant on-demand cache revalidation.

proxy.ts • Next.js 16 Route Protection & SSR Auth Session Interception

import { NextResponse, type NextRequest } from "next/server";
import { createServerClient } from "@supabase/ssr";

export async function proxy(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll: () => request.cookies.getAll(),
        setAll: (cookiesToSet) => {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value));
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();
  const pathname = request.nextUrl.pathname;

  // Gate all admin management routes
  if (!user && pathname !== "/admin/login") {
    const url = request.nextUrl.clone();
    url.pathname = "/admin/login";
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = { matcher: "/admin/:path*" };

06 • Form Ingestion Pipeline

Dual-Layer Anti-Spam Pipeline & Supabase Backend

Community outreach websites frequently suffer from aggressive spam bot submissions. Rather than burdening children, parents, and volunteers with privacy-invasive, visual reCAPTCHA puzzles, I built a zero-dependency, server-side anti-spam verification pipeline in app/api/contact/route.ts andapp/api/volunteer/route.ts.

Layer 1 • Honeypot & Timing Gate

Invisible Bot Interception

An invisible form input (website) is left empty by genuine users. Automated scrapers invariably fill it, triggering an immediate silent HTTP 200 drop. Concurrently, a 3-second elapsed time check (elapsedMs < 3000) weeds out programmatic headless submissions.

Layer 2 • Payload Size & Validation

10KB Boundary & Service Role Ingestion

Every request is gated by a strict 10KB payload limit (10240 bytes) to thwart memory exhaustion attempts. Verified submissions are cleaned, field-length truncated, and committed to Supabase PostgreSQL using an isolated server-only administrative client.

app/api/contact/route.ts • Server-Side Bot Defense & Supabase Mutation

export async function POST(request: Request) {
  // 1. Strict 10KB payload protection gate
  const rawText = await request.text();
  if (new TextEncoder().encode(rawText).length > 10240) {
    return NextResponse.json({ error: "Payload too large." }, { status: 413 });
  }

  const body = JSON.parse(rawText);

  // 2. Honeypot check: automated scrapers populate this hidden field
  if (typeof body.website === "string" && body.website.trim() !== "") {
    return NextResponse.json({ ok: true }); // Silent drop
  }

  // 3. Human interaction timing threshold: reject bots filling in < 3s
  if (typeof body.elapsedMs !== "number" || body.elapsedMs < 3000) {
    return NextResponse.json({ ok: true });
  }

  // 4. Sanitize and insert into Supabase contact_messages table
  const { error } = await supabaseAdmin.from("contact_messages").insert({
    name: String(body.name).trim().slice(0, 120),
    email: String(body.email).trim().slice(0, 254),
    subject: body.subject ? String(body.subject).trim().slice(0, 200) : null,
    message: String(body.message).trim().slice(0, 3000),
  });

  if (error) return NextResponse.json({ error: "Submission failed." }, { status: 500 });
  return NextResponse.json({ ok: true });
}

07 • Operations Portal

Administrative Management CMS & Timezone Operations

To empower foundation staff to manage operations independently without touching database tables, I constructed the authenticated backoffice portal under /admin. The portal provides event creation, volunteer tracking, message reviews, and secure CSV data export.

Accra Timezone Handling

Bi-directional conversion between ISO UTC timestamps and Africa/Accra (GMT+0) ensures event schedules align precisely with local Ghanaian community timing.

Safe CSV Export

Volunteer rosters export as sanitized CSV files. Formula injection prevention prepends single quotes to cells starting with =, +, -, @ to guard coordinator spreadsheets.

Live Operational Metrics

Real-time database count badges immediately show coordinators the volume of upcoming events, unreviewed volunteer applications, and unresolved contact inquiries.

app/admin/volunteers/export/route.ts • Formula Injection-Proof CSV Export

function escapeCsvCell(val: unknown): string {
  if (val === null || val === undefined) return '""';
  let str = Array.isArray(val) ? val.join("; ") : String(val);

  // Prefix any cell starting with =, +, -, @, \t, \r with a single quote
  // to prevent malicious spreadsheet formula execution vulnerabilities
  if (/^\s*[=+\-@\t\r]/.test(str)) {
    str = "'" + str;
  }

  // Double up quotation marks to satisfy CSV specification
  str = str.replace(/"/g, '""');
  return '"' + str + '"';
}

08 • Payments & Checkout

Paystack Multi-Currency Checkout Integration

To fund educational workshops and essential glucose testing equipment for vulnerable families, I integrated Paystack's transaction initialization API into the platform. Built insideapp/api/donate/initialize/route.ts, the checkout supports three core African regional and international currencies: Ghanaian Cedi (GHS), US Dollar (USD), and Nigerian Naira (NGN).

The backend validates the donor's contact information, converts the donation total into integer subunits (e.g. pesewas or cents), attaches custom donor metadata, and requests an official authorization URL from Paystack's gateway.

Pre-Launch Technical Disclosure

The Paystack integration is fully written and tested in code. However, the foundation has not officially launched public donation processing. The production Paystack secret key remains unconfigured in live hosting, returning a transparent HTTP 503 fallback state until merchant banking approvals are finalised. No live donor funds or payment cards have been processed in production.

09 • Team & Collaboration

Collaborative Division: Full-Stack Developer vs. Tech Lead

Davcie Foundation was built as a focused two-person engineering collaboration. To maintain transparency and accurately honour team contributions, responsibilities were divided clearly:

Godwin Apedo • Full-Stack Developer

Frontend Architecture, Games, Backend & Admin

Engineered complete visual identity, typography tokens, and WCAG AA contrast styling.
Constructed 14-piece emblem scatter physics, Framer Motion assembly, and Web Speech narration.
Built interactive education suite: 3D perspective flip cards, Myth-or-Fact game, and quiz.
Architected dual-layer anti-spam submission pipeline and Supabase PostgreSQL ingestion.
Created operations admin CMS with proxy.ts auth gating and injection-proof CSV export.
Integrated Paystack multi-currency donation checkout with HTTP 503 fallback handling.

Collaborator • Project Tech Lead

Editorial About Page & Founder Narrative

Authored the foundation's About page narrative (/about and /about/story).
Drafted the founder's personal journey and early organizational documentation.
Conducted editorial liaison with the foundation's leadership.
Collaborated on overall site milestone planning and launch criteria.

10 • Retrospective

Key Lessons, Outstanding Approvals & Roadmap

Key Engineering Insights

Contrast engineering in health UI: Aesthetic warmth must never compromise legibility. Developing dedicated text tokens (azure-text) resolved contrast gaps on soft cream surfaces.
Accessible gamification: Educational games must offer keyboard parity, programmatic focus restoration, and screen reader announcements to truly welcome every child.
Zero-dependency bot mitigation: Combining hidden honeypot fields with client timing gates eliminates spam without relying on cumbersome third-party CAPTCHAs.

Outstanding Approvals Prior to Launch

Formal Clinical Review: All diabetes health statements and warning signs are slated for review by qualified paediatric endocrinology specialists before official launch.
Production Merchant Credentials: Live Paystack API keys and bank settlement routing require finalization by the foundation's board.
Physical Assistive Tech Testing: Screen reader validation on real mobile hardware (iOS VoiceOver and Android TalkBack) remains on the pre-launch testing checklist.

Explore More Case Studies

Architectural breakdowns, commercial platforms, and university engineering systems.

GitHub Repository • Davcie

Project 01 • Luxury E-Commerce & Spatial Logistics

MENSAH

Luxury tailoring, deterministic measurement sizing & Haversine courier dispatch prototype.

• Case Study AvailableRead Case Study

Project 02 • Commercial Platform

Chef Apedo Foods

Full-cycle food ordering, real-time kitchen operations & courier dispatch platform.

• Case Study AvailableRead Case Study

Project 03 • Software Engineering

Raku Vehicle Rental

University coursework: full-stack rental inventory engine, lockouts & concurrency control.

• Case Study AvailableRead Case Study