Saran S Kumar
All Systems
Product - PWA - Education·April 2024

KōA 🐨

A modern, high-performance Progressive Web Application (PWA) designed to help students track syllabi, maintain daily study habits, and compete on a global leaderboard. Built with a stunning 'Claymorphism' UI and deep native mobile integration.

React 19Vite 7Tailwind CSS v3ZustandTanStack Query v5SupabasePostgreSQL 15+pg_cronDeno Edge Functions

✦ A high-performance study execution engine enforcing a disciplined 'Execution-First' workflow, with automated nudges and global league competition.

KōA Dashboard

Execution Dashboard

KōA Syllabus Master

Syllabus Master Hub

Executive Summary

KōA (S4 Study Tracker) is a high-performance study execution engine. Moving away from passive tracking, it enforces a disciplined "Execution-First" workflow, ensuring students know exactly what to do at every moment of their revision cycle. It serves as an uncompromising, accountability-driven study companion.

Design System: Claymorphism

The application uses a custom Claymorphism design system to provide a tactile, premium, and engaging user experience.

Visual Tokens

  • Surface: Anthracite Dark (#030712) with backdrop-blur-xl glassmorphism.
  • Puffy Depth: Multi-layered shadow system (inset highlights + deep outer drops) to simulate tactile clay physics.
  • Color Palette:
    • ● Cyan: Focus & Primary UI.
    • ● Indigo: Peak Performance blocks.
    • ● Emerald: Mastery & Success states.
    • ● Red: High-Priority Strategic Alerts.
KōA AI Features

AI-Driven Study Assistance

KōA Tracking & Progress

Daily Execution Tracker

Product Features

A. Dashboard (The High-Intensity Hub)

  • Focus Mode: Dynamically isolates the "Immediate Task" and the "Output Peak" block.
  • Readiness Scoring: Visual percentage representing global syllabus completion.
  • Strategic Warnings:
    • Countdown: Days remaining until the next exam.
    • Critical Subjects: Auto-identifies subjects with "Make or Break" priority.

B. Daily Mission Checklist

  • Atomic Operations: Support for Complete (verify), Push (defer to next cycle), and Skip (archive).
  • Execution State: Tasks transition from high-contrast Clay cards to low-opacity "Victory" states upon completion.
KōA Onboarding

Step-by-Step Onboarding

KōA Profile & Metrics

Student Profile & Performance

Technical Architecture

Tech Stack

  • Frontend: React 19, Vite 7, Tailwind CSS v3.
  • State Management: Zustand (Client) + TanStack Query v5 (Server).
  • Backend: Supabase Auth + PostgreSQL 15 + RLS.
  • Automation: pg_cron scheduling Deno Edge Functions for serverless Web Push notifications (Morning 7 AM, Evening 8 PM).

S4 Command Center: Workflow & Logic

The Application provides an instant onboarding experience through two paths:

  1. Seeded Ecosystem: Clones the global S4 template (Maths, AI, OS, DBMS, ADSA, Economics) using PostgreSQL RPCs (apply_s4_seed).
  2. Total Control: Allows creating a manual study planner for scholars outside the S4 constraints.

Core Architecture Decisions

  • Single-Template Focus: Hardcoded UX around the "S4 Exam Prep" to simplify the value loop.
  • Module-Grouped Hierarchy: Restored the Module layer in SubjectDetailView.jsx to keep 100+ topic engineering syllabi readable.
  • Execution-First Logic: Shifted from analysis-heavy views to a "Today View" home screen focus.

API Contracts (Table Definitions)

  • plans: User workspaces.
  • subjects: Associated with a specific plan (Subject → Exam Date → Priority).
  • topics: Linked directly to subjects/modules with status (todo, done, mastered).
  • study_plan: The primary source for the "Daily Mission" checklist.

"Start small, finish big."

#pwa#supabase#react#education#productivity#claymorphism#postgresql