Overview
A two-part system for digitising student administrative workflows. The staff-facing Form Studio is a canvas-based editor where administrators drag and drop fields to design forms (withdrawal, deregistration, etc.). Students then access the submission portal to fill out and submit forms online, replacing paper-based processes entirely.
Key Features
- Canvas-based form builder — Drag-and-drop field placement in Form Studio (
/admin/studio), with per-form editing at/admin/studio/:formId - Student submission portal — Students access published forms at
/forms/:formId, complete fields, and submit - Google OAuth — Staff authentication via the shared
mc-google-authpackage - File uploads — Attachments stored to Vercel Blob for supporting documents
- PDF export — Completed submissions exported to PDF using jsPDF and html2canvas
- Digital signatures — Signature capture fields powered by react-signature-canvas
Design Decisions
- Vite + Express over Next.js: The form builder is a canvas SPA with no need for SSR or server components, and the student submission side doesn’t require SEO (it’s accessed via direct school links, not search). Vite gives fast HMR during development and Express provides a straightforward REST API without the overhead of Next.js file-system routing and middleware. There was no reason to bring in the full Next.js framework for a clean client-server split.
- Custom form builder over off-the-shelf: Libraries like Formio or SurveyJS impose their own field type systems, submission storage, and rendering models. School admin forms have specific requirements — signature capture, file uploads to a particular blob store, PDF export with exact school formatting. Building custom gives full control over the field palette, canvas layout, and how completed forms render in the exported PDF, rather than fighting an opinionated library to handle school-specific needs.
Form Studio
Form Studio: staff drag-and-drop fields to build custom student forms.