ZHI — Learn While Playing
ZHI is a production-grade, multi-portal EdTech SaaS platform purpose-built for early childhood foundation learning (Pre-KG, LKG, UKG, and 1st Standard). It combines four distinct authenticated portals — Super Admin, School Admin, Parent, and Student — each with its own role-specific dashboard and business logic. The platform serves two distinct customer segments: B2C individual parents via Razorpay subscription plans, and B2B school institutions via manual invoice and bank transfer activation.
PROJECT OVERVIEW
ZHI is a full-stack, production-grade early childhood learning platform that replaces fragmented PDF worksheets and passive YouTube playlists with a structured, interactive digital curriculum. The platform was engineered to serve two distinct business models simultaneously: B2C individual parents who subscribe to monthly plans for their child's home learning, and B2B school institutions that pay a per-student monthly fee to unlock full curriculum access for every enrolled student.
B2C parents subscribe via automated monthly Razorpay plans (Free 14-day trial, Focus Premium Ultimate é╣699) with countdown trial timers and instant activation. B2B schools pay via GST invoice and bank transfer, activated via Super Admin control.
The core challenge of building ZHI was not just building a learning portal — it was building four fundamentally different applications that share a unified Next.js backend architecture, and a common authentication system with strict role-based access control. Each portal serves a completely different user persona with entirely different data needs, UI flows, and business rules.
Agaran designed and engineered the complete system from multi-role JWT authentication middleware, secure platform architecture, payment integration with webhook fallback safety, and four full frontend portals — all delivered as a cohesive, live production system.
Super Admin HQ, School Admin HQ, Parent Dashboard & Kids Learning Hub.
B2C Razorpay subscriptions + B2B manual school GST invoice flow.
English Phonics (-at/-an/-ig), Tamil, Early Maths & EVS with TTS Mascot Voice.
Multilingual English + Tamil i18n support powered by next-intl.
THE CHALLENGE
PDF & YouTube Dependency
Schools and parents had no structured digital curriculum for Pre-KG to 1st Std. Learning happened through scattered WhatsApp PDFs, random YouTube videos, and printed sheets — with zero tracking, zero progress data, and zero engagement feedback for parents or teachers.
Past Payment Failures
Prior EdTech systems faced a critical failure mode: parents would pay via Razorpay, but webhook misses or race conditions meant course access never activated. Money was deducted with zero access granted — a trust-destroying user experience that ZHI required a bulletproof verification engine to solve.
Four Different Users, One System
Super admins, school principals, parents, and young students each require completely different interfaces, data scopes, and access permissions. Building four coherent portals on a shared backend without data leakage between tenants was a fundamental architectural challenge.
PORTAL ARCHITECTURE — FOUR USER SYSTEMS
ZHI is not a single portal with a “role toggle.” It is four fully independent, purpose-designed user systems — each with its own frontend routes, access permissions, data visibility rules, and business logic — served from a shared Next.js backend with centralized JWT authentication middleware.
Super Admin — Platform Command Center
LIVEThe Super Admin portal is the master control layer for the entire ZHI platform. This is an internal operations dashboard accessible only to Agaran/ZHI platform administrators. It provides full visibility across every school, student, parent, and payment in the system.
Create new school accounts, assign school admins, set student capacity limits, view active/inactive school plans, and soft-delete institutions from the platform.
Real-time metrics: total students, total parents, active schools, platform revenue, lesson completion rate, avg quiz score, engagement score, and avg session minutes.
Review and approve parent+student account creation requests. Every new parent registration triggers a pending approval queue before the account is activated.
Track all subscription revenues, verify unverified school bank transfers (mark UTR, confirm credit), and force-activate access for parents whose payment cleared but auto-webhook failed.
Map education boards, add grades, manage chapters and lessons, publish quizzes, and maintain the entire content library across all subjects and terms.
Live alert panel: pending_approvals count, pending_payments unverified, expiring_plans near renewal — with severity ratings (High / Medium / Soon).
School Admin — Institution Management Portal
LIVEThe School Admin portal is issued to the principal or administrator of each enrolled institution. Each school admin has a strictly scoped data view — they can see only their own school's students, parents, and analytics. They cannot access data from any other school. This is enforced via JWT-bound school_id claims on every request.
Real-time stats for their school: total students enrolled, students active today (within last 24h), total stars given out platform-wide within the school, and number of unique grade sections active.
Full student roster management — view all enrolled students, add new students, update roll numbers and section assignments, and remove students. Bulk import of student records from school management systems.
Per-grade average progress tracking. Visual progress bar per grade (LKG, UKG, Grade 1) showing what % of the curriculum each class has completed on average. Color-coded green/amber/red based on progress thresholds.
Smart alert system that surfaces students with overall_progress < 30% or who have had no activity in the last 7 days. School admin can identify at-risk learners and follow up with parents.
Star-based ranking of the top 5 performers in the school by total_stars_earned. Encourages healthy academic competition and highlights consistent learners for recognition.
View all parent profiles linked to their school students. Access school subscription plan details and billing status (Bank transfer / Invoice-based activation confirmed by Super Admin).
Parent Portal — Child Progress Monitoring Dashboard
LIVEThe Parent Portal gives every parent a real-time window into their child's learning journey. Built with simplicity-first design (parents with limited digital literacy must be able to understand their child's progress at a glance), the portal provides multi-child switching, per-subject progress tracking, quiz attempt logs, badge achievements, milestone timelines, and subscription plan management — all in a single unified dashboard.
Parents with multiple children can switch between child profiles using a dropdown selector. The active child's full progress data is pre-fetched and cached using React Query — switching is instant with no load delay.
Four top-level stats for the active child: Lessons Completed, Learning Streak (consecutive active days), Badges Earned, and Quiz Attempts — all pulled from live platform data.
Per-subject completion progress bars (English, Tamil, Maths, EVS, GK) showing percentage of chapters and lessons completed within each subject. Expandable to chapter-level detail with lesson-by-lesson unlock status.
Full quiz attempt log: quiz name, subject, lesson linked, score (e.g., 8/10), percentage, pass/fail status, time taken, and attempt timestamp. Summary metrics: total attempts, total passed, failed count, and average score percentage.
Chronological activity feed combining quiz completions, chapter finishes, and learning streaks into a milestone timeline. Parents see what their child did most recently without needing to understand raw progress numbers.
Parents on individual paid plans see their active plan tier and a live countdown timer (DD:HH:MM:SS) showing exactly how much premium access time remains before renewal. Integrated with Razorpay subscription lifecycle.
Student Portal — Kids Interactive Learning Hub
LIVEThe Student Portal is the core learning interface for children aged 3 to 7. It is built with child-first UX principles: large visual elements, audio-driven instruction, gamified progression, and minimal text. Every lesson includes a mascot-guided TTS voice tutorial, followed by interactive quiz activities. The portal routes are: /student/Home (dashboard), /student/Learn (lesson library), /student/Quiz (active quizzes), /student/Games (activity mini-games), and /student/profile.
Personalized greeting with grade, current overall progress %, total stars earned, badges count, current learning streak, and max streak. Shows today's lessons with thumbnail previews, in-progress status indicators, and next lesson unlock requirements.
Grade-specific, term-sequenced lesson library. Subjects covered: English Phonics (Capital/Small letters, CVC word families -at/-an/-ig, Sight Words, Rhymes), Early Maths (Numbers 1–100, Shapes, Missing Number Trains), Tamil (α«ëα«»α«┐α«░α»ì & α««α»åα«»α»ì α«Äα«┤α»üα«ñα»ìα«ñα»üα«òα»ìα«òα«│α»ì), and EVS/GK (Animals, Body Parts, Seasons, Fruits).
Each lesson launches an audio-visual step-by-step mascot tutorial powered by Web Speech Synthesis TTS. The mascot speaks directly to the child ('Hello Explorer! Let us learn the -at family today!'), animates letter cards, and pronounces every word sound clearly.
Post-lesson quizzes with interactive formats: WordSorterQuiz (drag letters into word families), PictureLetterMatch (match images to correct letters), MissingLettersTrain (complete the sequence), and RhymesPlayer sing-along activities. Each attempt is submitted to the backend, scored, and stored.
Standalone gamified activity modules beyond lesson-tied quizzes. Includes independent word building games, picture matching challenges, and counting activities. Stars are earned per correct answer and accumulate in the student's global star total.
Every lesson watched, quiz submitted, and activity completed is logged to the student's progress record. Completion unlocks the next sequential lesson. Badge rewards are issued on milestones (First Steps, 10 Lessons, 5-Day Streak, etc.) and synced to the parent dashboard in real-time.
PAYMENT ENGINE & SUBSCRIPTION ARCHITECTURE
ZHI runs a dual-track monetization model: B2C individual parent subscriptions via Razorpay, and B2B school institution billing via manual invoice and bank transfer. The payment system was engineered with bulletproof idempotency and triple-verificationto prevent the trust-breaking failure mode of “payment deducted but access not granted” — a critical issue from prior EdTech projects.
B2C — Individual Parent Subscription Plans (Razorpay)
B2B — School Institution Pack (Manual Invoice)
Schools pay per child per month via bank transfer or cheque. For a school with 500 students, this is é╣25,000/month — a bulk amount that cannot go through standard Razorpay UPI (limit issues, GST invoice requirements, PO approval cycles). The B2B flow is deliberately manual with Super Admin verification as the activation gate.
CURRICULUM ARCHITECTURE — SUBJECTS & MODULES
The ZHI curriculum is organized in a hierarchical structure: Board → Grade → Subject → Chapter → Lesson → Activity/Quiz. Each lesson has a defined position in a term sequence (Term 1, Term 2, Term 3), and the next lesson is unlocked only after the current lesson is completed. This sequential unlock architecture ensures structured learning and prevents content skipping.
English Phonics & Literacy
- ✓Capital Letters A–Z (with mascot pronunciation)
- ✓Small Letters a–z (recognition & matching)
- ✓Capital-to-Small Letter Matching games
- ✓Phonics Soundboard (letter sound isolation)
- ✓CVC Word Families: -at (cat, hat, mat, bat), -an (can, fan, man, van), -ig (big, dig, fig, wig), -op (hop, mop, pop, top)
- ✓Sight Word recognition (the, and, is, was, etc.)
- ✓Story Reading Time (guided reading with TTS)
- ✓Nursery Rhymes Sing-along player (animated)
Early Mathematics & Logic
- ✓Number Counting 1 to 10 (with object visual aids)
- ✓Number Counting 11 to 50 (sequence exercises)
- ✓Number Counting 51 to 100 (complete range mastery)
- ✓Object Counting games (count the apples, stars, etc.)
- ✓Missing Number Train (fill-in-the-blank sequences)
- ✓Shape Recognition (circle, square, triangle, rectangle)
- ✓Color & Pattern Identification exercises
- ✓1st Std Introduction to Visual Addition (1+1, 2+3, etc.)
Tamil Language Foundation
- ✓α«ëα«»α«┐α«░α»ì α«Äα«┤α»üα«ñα»ìα«ñα»üα«òα»ìα«òα«│α»ì — 12 vowels (α«à, α«å, α«ç, α«ê, α«ë, α«è, α«Ä, α«Å, α«É, α«Æ, α«ô, α«ö)
- ✓α««α»åα«»α»ì α«Äα«┤α»üα«ñα»ìα«ñα»üα«òα»ìα«òα«│α»ì — 18 consonants recognition
- ✓Tamil letter audio pronunciation with mascot
- ✓Picture-to-word letter matching activities
- ✓Tamil rhymes with animated sing-along player
- ✓Basic Tamil vocabulary building (objects, animals, colors)
EVS & General Knowledge
- ✓My Body Parts (head, shoulders, eyes, etc. — interactive)
- ✓Animals of the World (domestic & wild — picture quiz)
- ✓Seasons & Weather (summer, winter, rainy — visual cards)
- ✓Fruits & Vegetables identification (picture matching)
- ✓Community Helpers (teacher, doctor, police, etc.)
- ✓Colors & Shapes in nature (environmental awareness)
HOW IT WORKS — TWO USER JOURNEYS
B2C Journey — Individual Parent
B2B Journey — School Institution
SYSTEM ARCHITECTURE
Architectural Design Decisions: The platform uses Next.js App Router for both frontend rendering and server services. Role-based access is enforced at the middleware layer using JWT claims — every request is validated before reaching business logic. Enterprise data isolation ensures no cross-tenant data leakage between schools. The i18n architecture (next-intl) supports bilingual content delivery in English and Tamil across all four portals.
AGARAN'S ROLE
TECHNOLOGY STACK
PROJECT DETAILS
B2B School SaaS Pack + B2C Parent Subscription
Early Childhood & Elementary Education Technology
Pre-KG, LKG, UKG & 1st Standard (Ages 3 to 7)
Super Admin, School Admin, Parent Dashboard & Kids Hub
English + Tamil (i18n powered by next-intl)
Vercel (Frontend) + Railway (Backend Infrastructure)
Live with continuous curriculum & module expansion
Architecture, all 4 portal frontends, payment engine
OUTCOME & MEASURABLE RESULTS
“The ZHI platform completely changed how we track our kindergarten students' learning progress. The school admin dashboard shows us which grade sections are falling behind in real time, and parents love being able to see their child's quiz scores and chapter completions the same day it happens. The structured term-by-term curriculum also gave our teachers a proper digital framework to follow for the first time.”