Design Specifications¶
This page provides access to all design artifacts produced for the Toodle Tutor Management System. Each document captures a different aspect of the system's design and architecture.
Entity-Relationship Diagram¶
The ERD maps every table in the PostgreSQL database, their columns, primary/foreign keys, and the relationships between them. It serves as the authoritative reference for the Prisma schema and data layer.
System Architecture¶
View Architecture Diagram (PDF)
A high-level overview of the Toodle system showing the frontend (Vite + React), backend (Node/Express API), database (PostgreSQL), and external service integrations. This diagram illustrates how the major components communicate and where data flows between tiers.
Authentication Flow¶
A sequence diagram covering the complete authentication lifecycle in three phases:
- Login & Token Acquisition - credential submission, JWT generation
- User Sync - profile synchronisation between Auth0 and the application database
- Authorised API Request - how subsequent requests are validated with role-based access control (RBAC)
The RBAC matrix maps each role (Organiser, Tutor, Student) to the endpoints they may access.
Data Flow Diagram¶
Contains both a Level 0 Context Diagram (showing the system as a single process interacting with external entities) and a Level 1 Detailed DFD with 8 processes and 6 data stores. A summary table maps each process to its inputs, outputs, and storage locations.
User Flow Diagram¶
A role-split flow diagram showing the paths available to each user type:
- Organiser - manages courses, allocates tutors, handles excusals
- Tutor - submits timesheets, views allocations, manages availability
- Student - views tutor allocations, submits feedback
Page access tables detail which routes are available to each role.
Component Inventory¶
View Component Inventory (PDF)
A catalogue of every frontend component in the Toodle React application, organised by category:
- 4 Auth components
- 4 Layout components
- 5 UI primitives
- 2 custom hooks
- 4 API service modules
- 13 pages
Each entry includes implementation status, role visibility, and purpose.
API Contract¶
The full REST API specification for the Toodle backend, structured into 8 sections covering authentication, courses, tutors, students, allocations, timesheets, excusals, and swap requests. Each endpoint includes request/response schemas and example payloads.
Wireframes¶
Low-fidelity wireframe sketches showing the layout and structure of key pages before UI design refinement. These served as the structural foundation for the high-fidelity Figma mockups shown on the UI Designs page.