Gateshead Learning and Skills CMS

Full StackTypeScriptLoopBackAngularSSRMySQLOpenAPIWCAGHubSpotZAP

The Gateshead Learning and Skills CMS is a WYSIWYG content management system built to support the Gateshead Council's Learning and Skills department. The system combines a robust backend with dual frontends that have a unified interface - an administrative code base for content managers and a code base for the public-facing website that is optimized for performance and SEO.

Loopback Logo
Backend Service

Built with Loopback 4, it handles the content data and state. It integrates with external MIS systems to generate automated content and it provides a RESTful API for the frontend codebases.

Angular Logo
Admin Frontend

Provides an authenticated administration layer for content managers, with a visual page builder and modular content blocks for simple page creation and editing.

Angular Universal LogoPublic Frontend

A high-performance, SEO-optimized public website layer with server-side rendering, integrating with HubSpot CRM to provide optimal user experience, user engagement and search visibility.

Admin Dashboard
Content Editor
Public Website

Backend Service

The backend service uses the Loopback 4 framework to provide a robust, secure Content Management System built on modern web technologies. It provides a flexible platform for managing web content with a strong focus on security, scalability, and automation.

Technology Stack

Core Technologies

  • Framework: LoopBack 4 - A highly extensible Node.js and TypeScript framework for building REST APIs
  • Database: MySQL - Used for structured data storage with full-text search capabilities
  • Authentication: Multi-strategy authentication system with JWT, Azure, and Google OAuth integration
  • Security: Role-based access control (RBAC) with fine-grained authorization and custom voter patterns
  • API: RESTful API with comprehensive OpenAPI documentation
  • TypeScript: Used throughout for type safety and modern JavaScript features

Key Features

  • Content Management: Complete page, route, and tag management with full-text search
  • Content Versioning: History tracking for content changes
  • Route Management: Hierarchical navigation structure with dynamic menus
  • Automated Content: Integration with external MIS systems (Tribal ebs, which provides course information) to generate and update template driven content
  • Media Management: Support for image and document file uploads with metadata

Architecture

The Loopback Server follows a clean architecture pattern with clear separation of concerns:

Architecture Components

  • Models: Define the data structures with properties, validations, and relationships
  • Repositories: Implement data access patterns with transaction support
  • Controllers: Handle HTTP requests and responses, implement business logic
  • Services: Encapsulate reusable business logic and external integrations
  • Mixins: Provide reusable functionality across multiple components
  • Sequence: Custom request handling pipeline

Security Implementation

  • JWT Authentication: Secure, stateless token-based authentication
  • OAuth Integration: Support for Azure AD and Google authentication
  • Content Security Policies: Implementation of server-side security headers and CORS settings to mitigate attacks
  • Role-based Authorization: Granular permission control with Owner-based Access Control, where content creators have special permissions
  • Penetration Tested: Using OWASP ZAP (Zed Attack Proxy)

Client Integration

Designed as a headless CMS, the system offers multiple integration options including an auto-generated RESTful API with detailed OpenAPI documentation, built-in API explorer in development environments, and support for various client authentication workflows including browser redirects.

The API is designed to be consumed by any front-end technology, with special consideration for modern JavaScript frameworks. The system includes specific redirect handling for single-page application routers, making it particularly well-suited for Angular, React, or Vue frontends.

Administration Frontend

The Administration Frontend is a sophisticated content management system (CMS) administration built with Angular. It provides a comprehensive interface for managing website content, including pages, headers, footers, navigation structures, and media files. The system features a powerful visual page builder, enabling content administrators to create and modify content without requiring programming knowledge.

Technology Stack

Core Technologies

  • Frontend Framework: Angular - A comprehensive platform for building web applications
  • UI Components: Angular Material - For consistent, professional UI elements
  • Rich Text Editing: Quill editor integration with custom plugins
  • Code Editing: Monaco Editor integration for CSS editing
  • HTML Sanitization: DOMPurify for XSS prevention

Key Features

  • Visual Page Builder: WYSIWYG editor with hierarchical component structure
  • Component Library: Pre-built components for text, images, videos, and more
  • Page History: Version tracking and restoration capabilities, draft publishing and recycle bin management
  • Media Management: Image and file upload with automatic hash generation
  • Dynamic Navigation Builder: Tree-based site navigation structure editor
  • Template Management: Modular, block based with copy/paste functionality and support for dynamic variables
  • Live Style Changes: Modify component level (page/section) CSS rules and classes, and also a global level stylesheet
  • External Services: HubSpot forms component for integration with HubSpot CRM

Architecture

The Administration Frontend is built around a modular architecture with clearly separated concerns:

Components

  • Single Page Application: Fast, responsive and low cost
  • Core Component: Custom *ngForTree directive that provides similar functionality to the built-in *ngFor directive, but operates with hierarchical data instead of flat array data. It maintains consistent references to nodes within the tree, allowing the tree state to immediately capture changes to individual nodes
  • Specialized Editors: Extendable modular components tailored to relevant functional needs, such as hashtags, style rules, SEO properties, etc
  • Shared Codebase: Components and services that are used by both the admin and public frontends are structured into a shared common library
  • Uploads: Browser-based cryptographic hashes are used for file identification and de-duplication.
  • Images: Browser based conversion to WebP format at different sizes/ratios, prior to upload.

Security

  • Authentication: JWT-based authentication with secure token storage
  • Cross Tab Communication: Broadcast Channel API for sharing information across browser tabs
  • Content Security: HTML content sanitization using DOMPurify
  • API Security: Custom REST interceptor for managing authentication headers and graceful error handling
Page Builder Templates

Page Builder Templates

Intuitive visual editor for creating and modifying pages with real-time preview

Live Style Changes

Live Style Changes

Live CSS changes at component level (page/section) and global level

Navigation Builder

Navigation Builder

Dynamic navigation management with auto breadcrumb generation

Public Frontend

The Public Frontend is a modern, performance-optimized application built using Angular Universal for content delivery with an emphasis on SEO, security, and developer experience. Utilizing server-side rendering (SSR), it delivers high-performance web pages with optimized search engine visibility while maintaining the interactivity of a single-page application.

Technology Stack

Core Technologies

  • Server-Side Rendering: Angular Universal for improved performance and SEO with client-side hydration for interactive features
  • Hydration: Client-side hydration after the first load supports interactive features
  • Shared Codebase: Utilizes a shared common library for common components and services
  • Optimized Bundle: Code splitting and minification for faster load times with lazy loading support

Key Features

  • Dynamic Page Resolution: Content resolution based on URL paths
  • SEO Optimization: Meta tags, canonical URLs, and OpenGraph support
  • Responsive Design: Adapts to various screen sizes and devices
  • Analytics: Google Analytics with Google Tag Manager integration
  • HubSpot Forms: Integration with HubSpot CRM

Architecture

The Public Frontend follows a modern, modular architecture with several key design patterns:

Components

  • Component-Based Structure: Encapsulated UI components
  • Service Layer: Dedicated services for business logic and data
  • Resolver Pattern: Pre-fetches data before route activation
  • Repository Pattern: Abstracted data access through API services

Security

  • XSS Protection: DOMPurify integration for HTML sanitization of user-generated content
  • Content Security Policy: Supports strict CSP configurations enforce by the server
  • REST API: Custom REST interceptor for graceful error handling
Lighthouse Icon

Performance Testing

Content and framework audit using Google Lighthouse to improve the quality of pages

Accessibility Icon

Accessibility Testing

Content and framework audit using axe DevTools to ensure WCAG 2.1 AA compliance

ZAP Icon

Security Testing

Framework penetration tests using OWASP ZAP (Zed Attack Proxy) to identify vulnerabilities

Deployment

The Angular Universal application is deployed using server-side rendering (SSR) to generate HTML on the server before sending it to the client. This approach combines the SEO benefits of server-rendered content with the interactivity of a single-page application. The Node.js server processes Angular templates and delivers fully rendered pages, which are then hydrated on the client side for dynamic functionality.

Server-Side Rendering:

  • Angular Universal Node.js server - Enables full server-side rendering of Angular applications
  • Pre-rendering of dynamic routes - Improves initial page load speed and SEO rankings
  • Optimized server-to-client transfer state - Prevents duplicate data fetching
  • Better SEO performance - Search engines can fully index content
  • Improved performance on low-powered devices - Less client-side processing required

Client-Side Features:

  • Client-side hydration - Preserves interactivity after initial server render
  • Progressive enhancement - Ensures functionality across all devices and browsers
  • Seamless state transfer from server to client - Eliminates flickering during transition
  • Faster subsequent navigation - Client-side routing after initial load
  • Reduced server load - After initial page load, most interactions happen client-side
Want to collaborate?

Reach out to me on LinkedIn

Connect