Gateshead Assessment Profile Web App
Gateshead Assessment Profile (GAP) is an educational assessment platform that provides secure and accessible tools for teachers and consultants to moderate children's progress. The system combines a robust backend with an intuitive frontend to deliver a seamless full-stack user experience.
Backend Services
A secure, high-performance backend built with Fastify and TypeScript, featuring robust authentication, data management, and API services.
Frontend Application
A modern Angular-based interface with responsive design, rich media handling, and offline capabilities, providing an intuitive user experience.
Backend Services
The backend is a secure, high-performance platform built with Fastify that provides authentication, user management, and data storage capabilities. The system is designed with security and scalability in mind, implementing modern authentication practices and a clean architecture that separates concerns across various modules.
Technology Stack
Core Technologies
- Fastify: High-performance web framework for Node.js
- TypeScript: For type safety and improved developer experience
- Drizzle ORM: Modern, lightweight SQL ORM for database operations
- SQLite: Lightweight, file-based relational database
- Zod: TypeScript-first schema validation library
- JWT (JSON Web Tokens): For secure authentication and authorization
- Mailjet: For transactional emails including verification and password reset
Development Tools
- TSX: For TypeScript execution with watch mode
- TSUP: For bundling TypeScript applications
- OpenAPI: For API documentation and client generation
- Drizzle Kit: For database migrations and schema management
Key Features
The application follows a modular architecture pattern that separates concerns and promotes maintainable code:
User Management
- User registration with email verification
- Role-based permissions (admin/regular users)
- Profile management
- Organization tracking
Data Storage
- Key-value storage for settings
- Flexible configuration system
- Blob storage for files
- Structured data models
Background Processing
- Cron job system
- Asynchronous email delivery
- Batch operations
- Scheduled tasks
Architecture
The backend follows a modular architecture that separates concerns and promotes maintainable code, built with security and scalability at its core.
Authentication System
- JWT-based authentication with secure token handling
- Email verification workflow
- Password recovery mechanisms
- Account management (sign up, login, logout)
- CSRF protection through nonce verification
Database Layer
- Type-safe operations with Drizzle ORM
- Migration system for schema evolution
- Structured schema with performance optimization
- JSON storage for flexible data structures
API Layer
- RESTful API design with consistent patterns
- OpenAPI/Swagger documentation
- Type-safe endpoints with Zod validation
- Comprehensive error handling
Data Protection
- Transaction-based operations
- Environment-specific configurations
- Secure key management
- Input validation
Security
OWASP-Compliant JWT Authentication
The platform implements a sophisticated JWT security system following OWASP best practices to address the inherent statelessness vulnerabilities of traditional JWT implementations.
Multi-layered Token Security
- None Algorithm Attack Prevention: Uses @fastify/jwt which is not vulnerable to algorithm downgrade attacks
- Token Sidejacking Countermeasures: Combines 256-bit fingerprint in HttpOnly cookies with JWT bearer tokens
- Token Revocation Strategy: Overcomes JWT's stateless nature by requiring both the JWT token and fingerprint cookie
- Information Disclosure Protection: Minimizes JWT payload content to only essential data (userId)
- Secure Storage Requirements: Prevents XSS attacks by requiring proper client-side storage patterns
Advanced Security Measures
- OWASP-Recommended Practices: Secure JWT handling, CSRF protection via nonce verification, and token revocation strategies
- Authentication: Supports both session-based and token-based authentication with Argon2id password hashing
- Database Security: Drizzle ORM with SQLite (dev) and PostgreSQL (prod), parameterized queries, and schema validation
- API Design: RESTful principles with auto-generated OpenAPI documentation from TypeScript types
- Background Processing: Secure token handling with job queue system for async tasks
- Error Handling: Centralized with detailed development logs and secure production messages
Client Integration
The backend generates TypeScript Angular clients through OpenAPI, enabling seamless integration with frontend applications. This approach ensures type safety across the full stack and reduces API integration errors.
This platform represents a modern approach to building secure, scalable backend systems with an emphasis on developer experience and security best practices. The combination of high-performance components like Fastify with modern tooling creates a foundation that can scale with increasing demand while maintaining robust security measures.
Designed with extensibility in mind, the GAP platform can serve as the backend for various applications requiring user authentication and data management capabilities.
Frontend Application
The frontend is a modern, secure, and feature-rich Angular application designed to provide a seamless user interface for interacting with the GAP backend services.
Technology Stack
Core Technologies
- Angular: Standalone component architecture
- Angular Material: UI component library
- Tailwind CSS: Utility-first CSS framework
- RxJS: Reactive state management
- NGX Editor: Rich text content creation
Data & Storage
- Angular HttpClient: HTTP client with TypeScript support
- Dexie.js: IndexedDB wrapper for offline storage
- XLSX: Dynamic spreadsheet creation
- Activity Streams: Data modeling protocol
- Web Crypto API: Client-side cryptography
Key Features
User Experience
- Fully responsive design
- Material Design components
- WCAG 2.0 AA compliant
- Lazy component loading
- Dynamic theming
Security & Data
- JWT authentication
- CSRF/XSS protection
- Client-side encryption
- Offline storage
- Secure data sanitization
Media Handling
- Browser-based WebP image conversion
- Responsive images
- Video embedding
- Document processing
- Unified upload system
Architecture
The frontend follows a modular architecture with clear separation of concerns, designed for maintainability and scalability.
Core Structure
- Components: Reusable UI building blocks organized by functionality
- Services: Centralized business logic and data access
- Routes: Feature-based page components with lazy loading
- Interceptors: HTTP request/response transformation
- Directives & Pipes: Custom DOM behaviour and data transformation
Data modeling
- Implementation of the Activity Streams protocol
- Semantic modeling of content, actions, and relationships
- Hashtag-based linking system
- Extensible object model supporting various content types
API Integration
- Auto-generated Angular services from OpenAPI spec
- Type-safe API calls with shared interfaces
- Centralized error handling
- Authentication interceptors for JWT tokens
- Request/response transformation
Development Features
- HMR (Hot Module Replacement) support
- ESBuild for fast compilation
- Component generator utilities
- TypeScript strict mode enabled
- Automated testing setup
Deployment
The Angular application is built into static assets that can be served by any web server. The production build process optimizes all assets for performance and minimal bundle size, ensuring fast loading times and efficient execution.
Build Optimization:
- Production builds with advanced tree-shaking
- Bundle analysis capabilities
- Optimized asset loading
Performance Features:
- Lazy-loaded modules
- Code splitting
- Optimized change detection