Teacher portal

Class lists, mark entry, attendance, lesson plans. Use a tablet at the front of class for attendance; use a desktop for marking. Same look, more room to work.

Portal 3 shells 8 pages Production /portals/teacher

Full demo

The whole Teacher portal in one file

A single tablet-first app covering all 18 screens. Tap any link below to jump straight to that screen.

Tablet-primary · 1024×768

Open the live demo

Mr Tendai Chari · Maths & Combined Sci · Form 2A class teacher. Sign in, take roll, mark a quiz, message a parent, plan a lesson — every job, from start to finish.

Launch demo

What's inside

Sign in, including shared classroom tablet mode
Today screen · today's lessons · papers to mark
Mark attendance (Present / Absent / Late) · save and move on
Enter marks, then share with parents
Marks book with quick-edit and add-column
Parent messages inbox · reply · send to whole class
Weekly timetable · lesson details · cover lesson
Lesson planner with side panel & copy-from-last-week
Homework · shared file library · reports
Parent meetings calendar · profile · settings · help
Offline notice · empty / loading / error screens

Open fullscreen

All 18 screens — quick links

01Sign inStaff ID and password, with shared tablet mode. 02TodayToday's lessons, attendance card, papers to mark, week numbers. 03Mark attendancePresent / Absent / Late for each pupil, save and move to next class. 04Enter marksType marks, check, paste, save, share with parents. 05Marks bookPupils against tests, averages, tap-to-edit, add a new column. 06MessagesParent chats, reply, attach files, send to a whole class. 07TimetableWeekly grid, lesson details, add a cover lesson. 08Lesson plannerWhat pupils should learn, materials, homework, copy-from-last-week. 09Homework & tasksSet work, send it out, see who's handed in, mark it all. 10Shared filesDepartment files, upload, filter by subject and form. 11ProfileYour contact details, subjects, classes, qualifications. 12Parent meetingsCalendar of booked slots, accept or decline, add to calendar. 13ReportsAttendance trend, pass rate, grade spread. 14SettingsAlerts, when marks reach parents, theme, password. 15HelpHow-to guides and common questions. 16Screen statesWhat empty, loading and error screens look like. 17Offline noticeToggle from the top bar to see how the app works without internet. 18Sign outFrom profile or side menu · takes you back to sign in.

Examples

Code alongside the demo

Attendance and mark-entry rows from the Teacher 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

Side menu sorted by class; the main grid is for marks, attendance and lesson plans.

Open mark entry

Desktop

1280 px+

Same layout with more columns visible; sortable rows, keyboard shortcuts, type in many marks at once.

Mobile

360–414 px

Cut down — attendance only. Mark entry is turned off on phones by default.

Pages

Screens in this portal

Each page is a real, working mockup at the right screen size. Click any to open.

01 · TABLET Today Today's lessons, classes to mark, parent messages waiting, week numbers. Open → 02 · TABLET Enter marks Pupil list with a column for each test; paste many at once, auto-grade, add comments. Open → 03 · MOBILE Mark attendance Phone-first attendance; Present / Absent / Late per pupil with a running count. Open → 04 · DESKTOP Marks book Pupils against tests grid with running averages, filter by test or exam, add a column. Open → 05 · TABLET Messages inbox Parent chats with unread counts, replies, and a "send to whole class" button. Open → 06 · TABLET Timetable Mon–Fri weekly grid, subjects in colour, Today highlighted, cover lessons list. Open → 07 · TABLET Lesson planner Weekly grid across classes; side panel with what pupils should learn, materials and homework. Open →

Used in this kit

Primitives, blocks & patterns

The portal composes from the same system everything else uses.

PT Editable grid Tap-to-edit cells with tab to move between them — the marking screen. Docs → P Status dots Present / Absent / Late · the standard attendance markers. Docs → PT Tablet layout Side menu + main area — shared with the Student portal. Docs →

Built from these recipes

Demos illustrate recipes — here are the ones this kit uses

Every screen in the teacher 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 Teacher portal screen?

Every screen in this portal is built from the same system. Start a new one by copying an existing template.

All portal shells