Technology Stack¶
Toodle uses a modern web technology stack built around separate frontend, backend, database, and documentation applications.
The technologies were selected to support the project's functional requirements, maintainability, security, automated testing, and deployment. The team also prioritised tools that support collaborative development and comply with the COMS3011A project requirements.
Technology Overview¶
The following table summarises Toodle's principal technologies and their responsibilities.
| Area | Technology | Purpose |
|---|---|---|
| Frontend | React 19, Vite 6 | User interface and development tooling |
| Styling | Tailwind CSS 4 | Responsive interface styling |
| Routing | React Router 7 | Client-side navigation |
| Backend | Node.js, Express 5 | Hand-written REST API |
| Database | PostgreSQL | Relational data storage |
| Database Access | Prisma 5 | Database queries and migrations |
| Validation | Zod 4 | Request validation |
| Authentication | Auth0 | User authentication and token verification |
| External Services | Brevo, Supabase Storage | Email delivery and file storage |
| Testing | Vitest, React Testing Library, Supertest | Automated frontend and backend testing |
| Code Quality | ESLint, Prettier | Static analysis and formatting |
| Version Control | Git, Gitea | Source control and collaboration |
| CI/CD | Gitea Actions | Automated checks and deployment workflows |
| Hosting | Vercel, Render, Supabase, Cloudflare Pages | Application and documentation hosting |
| Documentation | MkDocs Material | Public technical documentation |
Frontend Technologies¶
React and Vite¶
React provides Toodle's component-based frontend architecture, while Vite handles development tooling and production builds.
React was selected because reusable components support the application's different role-specific interfaces without duplicating common UI elements. This is particularly useful for dashboards, forms, course management, and allocation workflows.
Vite provides fast development startup, Hot Module Replacement, and optimised production builds. It also allows the frontend to remain independent of the Express backend.
Tailwind CSS¶
Tailwind CSS provides utility-based styling for the frontend.
It supports consistent spacing, responsive layouts, reusable styling patterns, and the project's visual design system.
This approach allows the team to maintain a consistent interface across different user roles while reducing repetitive custom CSS.
React Router¶
React Router manages client-side navigation between application pages.
It supports nested layouts, route parameters, and protected routes. Toodle combines these capabilities with authentication and role-aware components to control access to relevant interfaces.
Backend authorisation remains responsible for enforcing protected operations.
Supporting Frontend Libraries¶
Several additional libraries support the user experience.
| Library | Purpose |
|---|---|
| Axios | HTTP communication with the backend and authenticated request handling |
| dnd-kit | Drag-and-drop interactions |
| FullCalendar | Calendar and scheduling interfaces |
| Framer Motion | Interface animations and transitions |
| Lucide React | Consistent SVG iconography |
| clsx and tailwind-merge | Conditional and reusable component styling |
These libraries provide specialised functionality without requiring the team to implement every interface mechanism from scratch.
Backend and Database¶
Node.js and Express¶
Node.js provides the JavaScript runtime for Toodle's backend, while Express is used to implement the REST API.
Express was selected for its lightweight architecture, middleware support, and flexibility in organising routes, controllers, and services.
It gives the team direct control over endpoint design, request validation, authentication, and business logic.
The API is implemented by Infinite Loopers rather than generated automatically by a Backend-as-a-Service platform, satisfying an important project requirement.
PostgreSQL and Prisma¶
PostgreSQL stores the system's relational data, including users, courses, applications, allocations, timesheets, and other tutoring records.
It was selected because Toodle depends on relationships, foreign-key constraints, transactions, and structured queries.
Prisma provides the ORM used by the backend to interact with PostgreSQL. Its schema and migration tools support consistent database development and maintenance.
Supabase provides managed PostgreSQL infrastructure, while database requests continue to pass through the team's Express API rather than a generated Supabase API.
Zod¶
Zod provides runtime validation for incoming API data.
Reusable validation schemas help reject malformed requests and enforce expected data structures before protected operations are performed.
Additional business validation is implemented within the backend services where appropriate.
Authentication and External Integrations¶
Auth0¶
Toodle uses Auth0 for user authentication through its established authentication services and SDKs.
The React application manages the authentication flow, while the backend verifies access tokens and enforces application permissions.
Auth0 was selected to avoid implementing security-sensitive authentication functionality from scratch.
Application roles and course-specific authorisation are managed by Toodle's backend.
External Services¶
Toodle integrates with several external services to support specialised functionality.
| Service | Integration |
|---|---|
| Brevo | Transactional emails and application notifications |
| Supabase Storage | User avatar uploads and storage |
| Wits Academic Calendar | Retrieval and parsing of academic term information |
Brevo provides an external communication API, while Supabase Storage handles file storage independently of the PostgreSQL data model.
The academic calendar integration retrieves information from the Wits website using Cheerio for HTML parsing.
The backend also uses csv-parse to process structured timetable and marks imports.
These integrations reduce the need to build specialised infrastructure while allowing Toodle to maintain control over its own application logic.
Testing and Development Tools¶
Automated Testing¶
Toodle uses Vitest as the test runner in both the frontend and backend repositories.
| Tool | Purpose |
|---|---|
| Vitest | Unit and integration test execution |
| React Testing Library | Component testing through user-facing behaviour |
| user-event | Simulation of user interactions |
| jest-dom | Additional DOM assertion matchers |
| Supertest | HTTP endpoint testing for the Express API |
| V8 Coverage | Automated code coverage reporting |
Using Vitest across both applications provides a consistent testing approach while supporting frontend components, backend services, and HTTP endpoints.
Code Quality¶
ESLint provides static analysis to identify problematic code patterns, while Prettier maintains consistent formatting.
These tools support code reviews and reduce inconsistencies between contributions from different team members.
Git and Gitea are used for version control, branching, pull requests, and collaborative development.
Continuous Integration and Deployment¶
Gitea Actions automates quality checks and selected deployment processes.
The repositories use separate workflows:
- Frontend: Dependency installation, linting, formatting checks, automated tests, and production builds.
- Backend: Prisma Client generation, code-quality checks, automated tests, coverage, database integrity tests, and conditional Render deployment.
- Documentation: Dependency installation, strict MkDocs builds, and deployment to Cloudflare Pages.
These workflows support consistent development and help detect errors before changes are integrated or deployed.
Hosting and Documentation¶
Toodle's components are configured for deployment across separate hosting services.
| Component | Platform |
|---|---|
| Frontend application | Vercel |
| Backend API | Render |
| PostgreSQL database | Supabase |
| Avatar storage | Supabase Storage |
| Documentation website | Cloudflare Pages |
Separating these services allows the frontend, backend, database, and documentation to be managed independently.
MkDocs Material¶
The documentation website is built using MkDocs with the Material theme.
MkDocs was selected because documentation can be written in Markdown, maintained through Git, and published as a static website without requiring users to create accounts.
The Material theme provides responsive navigation, search, syntax highlighting, Mermaid diagrams, and light and dark appearance modes.
Custom styling and theme overrides maintain Toodle's visual identity while preserving the usability of a technical documentation website.
Technology Selection Principles¶
The team's technology choices are guided by:
- Maintainability: Supporting readable, reusable, and manageable code.
- Security: Using established authentication and security mechanisms.
- Separation of concerns: Maintaining independent frontend and backend applications.
- Testability: Supporting automated testing across the system.
- Deployment compatibility: Working with the project's hosting and CI/CD platforms.
- Project compliance: Meeting the requirements established in the project brief.
Together, these technologies provide the foundation for Toodle's development, operation, and future maintenance.