Parent portal

School fees, attendance, news from the school, and term reports — plus a full reference build for developers. Made for phones first; works on slow connections. Available as a web app and an Android app.

Portal 18 workflows 1 reference app Production /portals/parent

Reference implementation

The full Parent app — every workflow, real

A single-file vanilla JS app that covers all 18 parent workflows end-to-end. Sign-in, multi-child switching, fees & payments, attendance, marks, library, calendar, messages, settings, 2FA, offline — everything a developer needs as a complete spec.

Interactive demo

Open the parent app →

Persistent state, hash routing, mobile-first. Phone-frame on desktop, full-bleed on mobile. Sign-in defaults preserved; deep-link to any workflow below.

Launch demo Fullscreen preview

All 18 workflows · deep-link into the demo

01 · AUTH Sign in (phone + OTP) Phone-number entry, 6-digit OTP, remember-device toggle. Try it → 02 · CONTEXT Multi-child switcher Three children across two schools. Switch context app-wide. Try it → 03 · HOME Per-child dashboard Fee hero, today timeline, attendance stat, unread notices. Try it → 04 · FEES Term invoice breakdown Line items, sibling discount, early-pay discount, payment plans. Try it → 05 · PAY Pay fees workflow Select term → method (EcoCash/OneMoney/Bank/Card) → confirm → receipt. Try it → 06 · RECEIPTS Payment history Year-to-date total, filter by child/method, PDF receipt per row. Try it → 07 · ATTENDANCE Term grid + day drill Present/late/absent dots, tap any day, request leave inline. Try it → 08 · MARKS Marks & results Per-subject, CA + exam split, teacher comments, end-of-term PDF. Try it → 09 · NOTICES Notices & messages School broadcasts, RSVPs, attachments, comment thread. Try it → 10 · CALENDAR School calendar Month grid, term events, sports day, "add to phone calendar". Try it → 11 · LIBRARY Library account Current loans, due dates, fines, holds & queue position. Try it → 12 · PROFILE Parent profile Contact details, emergency contacts, sign-in & security with 2FA. Try it → 13 · CHILDREN Child profiles Photo, classroom, form teacher, medical, allergies, transport. Try it → 14 · NOTIFS Notification settings Per-event-type SMS / email / push matrix, quiet hours. Try it → 15 · LANG Language switcher English / Shona / Ndebele. App-wide, persisted. Try it → 16 · HELP Help & contact school FAQ accordion, call/email/WhatsApp the bursar. Try it → 17 · STATES Empty & loading states Skeleton shimmer, empty rows for filters, messages, library. Try it → 18 · OFFLINE Offline banner + retry Persistent state, manual retry, online/offline event hooks. Try it →

Examples

Code alongside the demo

The fee hero and notice rows from the parent portal, built from system components — with the React you would write against @corelith/design-system.

Shells

Device shells

Each portal adapts to the device the audience is using. The primary device is highlighted; the others reflow without losing functionality.

Mobile

360–414 px

Primary

Status bar, hero fee balance, list of children with quick switcher, four-tab bottom nav (Home · Fees · Notices · Profile).

Open dashboard

Tablet

768–1024 px

Same shell with the side rail surfacing all children, term anchor at the top, and notices pulled into a right column.

Pages

Designed surfaces in this portal

Each page is a real, rendered mockup at the right device width. Click any to open.

01 · MOBILE Parent dashboard Greeting, child switcher, fee balance hero, today timeline, notices. Open → 02 · MOBILE Fees & invoices Balance, term invoice breakdown, payment methods, installment option. Open → 03 · MOBILE Attendance & marks Term-by-term roll-up, per-subject scores, attendance dots. Open → 04 · MOBILE Notice detail Long-form notice, attachments, RSVP. Open → 05 · MOBILE Parent profile Contact details, child switcher, account settings, sign-out. Open → 06 · MOBILE Payment history Month groupings, method filters, receipts, year-to-date total. Open →

Used in this kit

Primitives, blocks & patterns

The portal composes from the same system everything else uses.

BL Stat hero Brand-tinted lead stat — used as the fee balance focal block on home and fees. Docs → BL Row card Tap-anywhere list row — payment history, notice picks, action sheets. Docs → BL Filter chips Scrolling chip row — term picker, payment history child / method filters. Docs → BL Bottom tabs Phone-first tab bar — Home · Fees · News · You — anchored to the viewport bottom. Docs → PT Bottom sheet Child switcher, receipt detail, language picker, confirmation dialogs. Docs → PT Mobile shell App bar + scroll + bottom tab bar — used by every parent screen. Docs →

Built from these recipes

Demos illustrate recipes — here are the ones this kit uses

Every screen in the parent demo is built from a Huchu cookbook recipe. Open one to see the React, state machine, and edge cases behind it.

AUTHSign in with 2FAEmail + password, 6-digit OTP, resend countdown, trust-this-device.Open recipe → SHELLSMobile bottom-tab shellFour bottom tabs, brand-pill active state, badge counts, safe-area aware.Open recipe → LISTSMaster–detail pageThe school-notice list — tap a row, drill into the full notice in a bottom sheet.Open recipe → STATESEmpty, loading, errorOne reusable shell for empty, loading, error and offline states across every screen.Open recipe →

Need a new parent portal surface?

Every screen in this portal composes from the documented system. Start a new one by copying an existing template.

All portal shells