Huchu DS · 0.5
All portals

Student portal

A complete mobile-first student app: sign-in, dashboard, timetable, marks, assignments, library, notifications, goals, profile, settings — and the offline mode in between. Try the full demo below.

Portal Mobile-first 16 workflows Production /portals/student
Full-app demo

Run the complete student app

All 16 workflows wired end-to-end. Hash routes, localStorage persistence, dark mode, offline simulation, onboarding tour, sign-in/out. Demo PIN: 4218. Opens in a new tab.

Open the live Student app
Anesu Moyo · Form 3B · St Faith's Park · today is Tuesday week 6 of Term 2.
Launch
Every workflow · deep-linked
01 · Dashboard 02 · Timetable + week swipe 03 · Marks · GPA · histogram 04 · Assignments + submit 05 · Library + scan return 06 · Notifications inbox 07 · Profile 08 · Goals & targets 09 · Help & how-to 10 · Settings + change PIN 11 · Sign-in flow 12 · Onboarding tour 13 · Submit workflow 14 · Dark mode & language 15 · Offline mode 16 · Sign out
Examples

Code alongside the demo

Today's class card and an assignment row from the student portal, built from system components — alongside 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.

Tablet
768–1180 px
Primary

Left rail pinned to class & term; main panel devotes itself to one anchor surface — Timetable, Results, Notices, Library.

Open timetable
Mobile
360–414 px

Rail collapses into a sheet; the anchor surface stacks vertically. Bottom tab bar replaces the rail.

Pages

Designed surfaces in this portal

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

01 · MOBILE Dashboard Greeting, next class card, weekly assignment count, upcoming exams, grade sparkline. Open → 02 · TABLET Timetable Week grid; subjects, rooms, teachers; clash detection on the day strip. Open → 03 · MOBILE Marks Term selector, GPA & position, per-subject progress with CA + exam breakdown. Open → 04 · MOBILE Assignments Filter chips, subject-coloured cards, due countdowns, open detail with attachments. Open → 05 · MOBILE Profile Identity card, contact info, attendance, notification & theme settings, sign out. Open → 06 · MOBILE Library Search, borrowed books with due dates, scan-to-return, recommended carousel, fines. Open →
Used in this kit

Primitives, blocks & patterns

The portal composes from the same system everything else uses.

PT Calendar grid Week × period grid · used by timetable and lesson planner. Docs → P Subject pill Colour-coded pill — anchors a subject in lists & grids. Docs → PT Tablet shell Side rail + main panel — the recurring tablet layout. Docs →
Built from these recipes

Demos illustrate recipes — here are the ones this kit uses

Every screen in the student 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 → AUTHForgot password flowFour-stage reset — email → check inbox → set new password → success.Open recipe → SHELLSMobile bottom-tab shellFour bottom tabs, brand-pill active state, badge counts, safe-area aware.Open recipe → STATESEmpty, loading, errorOne reusable shell for empty, loading, error and offline states across every screen.Open recipe →

Need a new student portal surface?

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

All portal shells