The complete consumer app as a responsive component system — every screen, built mobile-first with a desktop sidebar layout. Semantic, tokenised, and structured for a React conversion.
Pre-account. No sidebar, no tab bar — the shell doesn't exist yet.
The portfolio. Classes, work samples, and the AI-assisted entry flow.
Documents. The clearest case for a different desktop experience.
State requirements, evidence matching, and the two-level dismissal model.
Three document types, the transcript chain, signing, and delivery.
Per-student settings and the optional NCAA eligibility tracker.
The opt-in ladder consent model. Nothing shared until the parent taps.
Free vs Family Annual, the conversion moment, and plan management.
Account-scoped. Everything set during onboarding gets a permanent home here.
What a brand-new account actually sees. Each teaches the next step rather than reporting emptiness.
One breakpoint at 768px. Resize your browser across it.
Single column, full width. Bottom tab bar. Upload and Scan buttons. Optimised for quick entry — adding a class, checking a grade.
Sidebar navigation, wider content, left-aligned headers. Drag-and-drop upload, card grids, document-width transcript. Optimised for portfolio work.
Screens marked ★ change behaviour at the breakpoint, not just layout.
No build step. Open any file directly, or serve the folder.
components.css is commented with the React component name and
the props it takes. Each HTML file opens with a comment giving the route,
the data source, and the component tree. The JSON files in data/
are the prop contracts. Repeated elements are written identically so the
props are unambiguous. Start with README.md.