Frontend strategy
Four Next.js applications (or monorepo packages) sharing one design system — matching the SOQ three-portal boundary plus public site.
| App | Package | Audience |
|---|
apps/web | Public Course Website + Registration | Prospects / applicants |
apps/admin | Admin Workspace | Staff (academic, admissions, finance, sales) |
apps/student | Student Portal | Enrolled learners |
apps/trainer | Trainer Portal | Trainers |
packages/ui | Shared design system | All apps |
packages/sdk | Typed API client | All apps |
Recommended stack
| Layer | Choice | Why |
|---|
| Framework | Next.js (App Router) + TypeScript | AIEE.DEV standard; SSR/SEO for public site; strong DX |
| Styling | Tailwind CSS + design tokens | Speed + consistency |
| Components | shadcn/ui primitives + domain components | Accessible base, custom SOQ patterns on top |
| Forms | React Hook Form + Zod | Complex diploma/WSQ forms with validation |
| Tables | TanStack Table | Dense Admin queues |
| State | Server components + React Query for client cache | Ops dashboards stay fresh |
| Auth UX | OIDC session + Singpass redirect flows | Singapore identity |
| Charts | Lightweight chart lib for dashboards | Management/SWDA reports |
| Realtime | Optional WebSocket/SSE for SWDA job status | Integration hub UX |
Frontend module map (by app)
Public website
| # | Detail |
|---|
| 1 | Course catalogue & filters |
| 2 | Course detail + comparison |
| 3 | Enquiry forms |
| 4 | Applicant account + Singpass |
| 5 | Diploma / short / WSQ registration wizards |
| 6 | Payment return pages |
Admin
| # | Detail |
|---|
| 1 | Programme/course/run builders |
| 2 | Admissions queues & offer workflows |
| 3 | Enrolment & Student 360 |
| 4 | Attendance & assessment consoles |
| 5 | CRM pipeline & commission screens |
| 6 | Finance orders & Xero sync status |
| 7 | SWDA integration operations dashboard |
| 8 | Reporting & RBAC settings |
Student
| # | Detail |
|---|
| 1 | Dashboard, timetable, Zoom links |
| 2 | Learning content player |
| 3 | Assessments & submissions |
| 4 | QR check-in |
| 5 | Payments / invoices |
| 6 | Certificates |
| 7 | Self-service requests |
Trainer
| # | Detail |
|---|
| 1 | Roster & acceptance |
| 2 | Session delivery |
| 3 | Attendance matrix |
| 4 | Marking queue |
| 5 | Fee claims |
Quality bar
| Area | Standard |
|---|
| Performance | LCP < 2.5s public; Admin table interactions < 100ms perceived |
| Responsive | Public + Student + Trainer mobile-first; Admin desktop-primary |
| A11y | WCAG 2.2 AA student/public |
| i18n | English first; architecture ready for Chinese/Malay later |
| Security | No secrets in client; CSRF on mutations; role-gated routes |
| Observability | Client error reporting (Sentry-class) |
Frontend delivery phases (AIEE.DEV)
- Design system + shell apps — auth, nav, layouts
- P0 screens — WSQ registration, Admin run/enrol/attendance, Student/Trainer check-in
- CRM + finance UIs
- Diploma admissions + exemption wizards
- Polish — empty states, keyboard shortcuts for Admin power users