Children's Rights Learning Platform

// An interactive, gamified children’s rights education platform built with Next.js App Router and Supabase (Updated).

Next.js 15 (App Router)

React 19 + TypeScript

Supabase (Postgres, Auth, Storage)

Tailwind CSS + shadcn/ui + Radix UI

Framer Motion & Motion

@splinetool 3D Scenes

Vercel Analytics

The Problem

Why_Software?

Most children’s rights or child-labour education resources are static PDFs, slides, or one-off lectures with no interactivity or feedback. Learners get bored, there is no persistent notion of progress, and teachers or parents can’t see whether concepts are actually understood. I wanted to build a real product-like platform where learners sign in, move through well-structured modules, complete quizzes and activities, and have their progress and creative work (like drawings) tracked in a proper backend with security and RLS.

System Design

Architecture && Flow

The platform uses a hybrid architecture: public marketing pages and authenticated learning areas are handled by Next.js App Router, while core curriculum is version-controlled in local TypeScript modules (`src/api/modules.ts`) to avoid runtime database dependencies. Dynamic user state (progress, drawings, auth) is managed by Supabase (Postgres + RLS + Storage), combining the speed of static content with the interactivity of a SaaS product.

FIG_DIAGRAM :: High-level architecture overview

// Source_Code

Implementation Details

Type-Safe Learning Content Model

// All educational content (categories, topics, theory sections, quizzes, and activities) is expressed as strongly-typed data in a single module. This enforces structure at compile time and keeps the curriculum logic centralized and easy to extend.

source_code.tsx

// src/api/modules.ts
export interface Category {
  id: string;
  name: string;
  description: string;
  modules: {
    id: number;
    title: string;
    description: string;
  }[];
}

export type InteractiveElement =
  | { type: 'quiz'; question: string; options: string[]; correctAnswer?: string }
  | {
      type: 'activity';
      name: string;
      description: string;
      dragDropItems?: {
        items: string[];
        dropZones: string[];
        correctPairings: { [key: string]: string };
      };
    };

export interface Topic {
  id: number;
  title: string;
  description: string;
  videoUrl: string;
  splineUrl: string;
  theory: { title: string; content: string; keyPoints: string[] }[];
  interactiveElements: InteractiveElement[];
}

// Local, version-controlled curriculum data
export const categories: Category[] = [/* ... */];
export const topics: Topic[] = [/* ... */];

Supabase-Backed Progress and Drawings with RLS

// Learner-specific state is stored in Supabase Postgres tables with Row Level Security so that each user only sees and manipulates their own records. Separate tables handle module progress and uploaded drawings, with indexes and policies tuned for typical queries.

source_code.tsx

-- supabase/migrations/20240321000000_progress_tracking.sql
CREATE TYPE progress_status AS ENUM ('not_started', 'in_progress', 'completed');

CREATE TABLE IF NOT EXISTS public.progress (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  module_id TEXT NOT NULL,
  status progress_status DEFAULT 'not_started',
  completed_at TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  updated_at TIMESTAMPTZ DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  UNIQUE (user_id, module_id)
);

ALTER TABLE public.progress ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view their own progress"
  ON public.progress FOR SELECT
  USING (auth.uid() = user_id);

CREATE POLICY "Users can insert their own progress"
  ON public.progress FOR INSERT
  WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update their own progress"
  ON public.progress FOR UPDATE
  USING (auth.uid() = user_id);

Trade-offs

Consequences()

Hard-coded Content

The Challenge

Content changes require code deploys vs quick CMS edits.

The Decision

Accepted for version control & type safety of curriculum data.

Supabase vs. Local

The Challenge

Vendor lock-in and RLS complexity adds overhead.

The Decision

Necessary for robust Auth & RLS security features.

Performance vs. Polish

The Challenge

3D/Motion UI increases bundle size & device load.

The Decision

Trade-off taken for high engagement; monitored via budgets.

Single Role Scope

The Challenge

Current schema only supports single learners, not teachers.

The Decision

Keeps initial architecture simple; expandable later.

Next_Steps.exe

Platform Expansion

Teacher/Parent dashboards for progress tracking.
Multi-language support and localization.
Real-time collaborative activities & live quizzes.

Architecture Evolution

Migrate static TS curriculum to Headless CMS/MDX.
In-session analytics dashboards.
Role-based access control (RBAC) for admins.

Share_Project:

Return(Index)

// src/api/modules.ts export interface Category { id: string; name: string; description: string; modules: { id: number; title: string; description: string; }[]; } export type InteractiveElement = | { type: 'quiz'; question: string; options: string[]; correctAnswer?: string } | { type: 'activity'; name: string; description: string; dragDropItems?: { items: string[]; dropZones: string[]; correctPairings: { [key: string]: string }; }; }; export interface Topic { id: number; title: string; description: string; videoUrl: string; splineUrl: string; theory: { title: string; content: string; keyPoints: string[] }[]; interactiveElements: InteractiveElement[]; } // Local, version-controlled curriculum data export const categories: Category[] = [/* ... */]; export const topics: Topic[] = [/* ... */];

-- supabase/migrations/20240321000000_progress_tracking.sql CREATE TYPE progress_status AS ENUM ('not_started', 'in_progress', 'completed'); CREATE TABLE IF NOT EXISTS public.progress ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE, module_id TEXT NOT NULL, status progress_status DEFAULT 'not_started', completed_at TIMESTAMPTZ, created_at TIMESTAMPTZ DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL, updated_at TIMESTAMPTZ DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL, UNIQUE (user_id, module_id) ); ALTER TABLE public.progress ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can view their own progress" ON public.progress FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own progress" ON public.progress FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own progress" ON public.progress FOR UPDATE USING (auth.uid() = user_id);

Next_Steps.exe

Platform Expansion

Teacher/Parent dashboards for progress tracking.
Multi-language support and localization.
Real-time collaborative activities & live quizzes.

Architecture Evolution

Migrate static TS curriculum to Headless CMS/MDX.
In-session analytics dashboards.
Role-based access control (RBAC) for admins.