Technical Study & Implementation Showcase

TDX Platform

Full-Stack Monorepo Architecture

Exploring modern web development with Next.js 15, Turborepo, Sanity CMS, and Kubernetes deployment - from design tokens to production infrastructure

View Technical Details
Development Methodology

Human-AI Collaboration

How we systematically built TDX using 8-agent methodology, hypothesis testing, and specialized team collaboration

Phase 1
Initial Hypothesis
Mathias from Tobii Dynavox proposed hypothesis for multi-market platform architecture
Phase 2
Expert Collaboration
Brought in experts Jonas, Daniel, and Shahen with complementary skills
Phase 3
Vendor-Agnostic Testing
Systematic testing of vendor-agnostic headless solutions with AI-assisted documentation
Phase 4
Parallel Development
Team members focused on specialized areas - Jonas validated headless CMS hypothesis

Methodology Deep-Dives

Explore how we combined AI agents, human expertise, and systematic validation

Comprehensive Documentation

58+ Documentation Files

Extensive technical documentation covering architecture, deployment, budget analysis, and implementation guides - all version controlled in Git

58+

Documentation Files

Markdown documentation in Git

4

Major Categories

Architecture, CI/CD, PM, Implementation

8

App-Specific Guides

Per-app README files

100%

Version Controlled

All docs in Git with history

Architecture & Design15 files
System architecture, design patterns, and technical decisions
ARCHITECTURE_OVERVIEW.md
ROUTING_ARCHITECTURE.md
MONOREPO_CATALOG.md
SANITY_MULTI_SITE_STRATEGY.md
Development & CI/CD12 files
Deployment guides, workflows, and infrastructure setup
DEPLOYMENT.md
SANITY_CICD.md
GITHUB_SECRETS_SETUP.md
CONTRIBUTING.md
Project Management18 files
Budget analysis, time tracking, and project governance
PROJECT_CONTEXT.md
8_AGENT_SPECIFICATION_REVIEW.md
BUDGET_EXECUTIVE_SUMMARY.md
GOVERNANCE.md
Implementation Guides13 files
SEO, accessibility, internationalization, and feature implementation
SEO_IMPLEMENTATION.md
ACCESSIBILITY_WORKFLOW.md
I18N_MIGRATION_STRATEGY.md
IMPLEMENTATION_STATUS.md

Browse Full Documentation

All documentation is version controlled and available in the GitHub repository

View on GitHub
Headless CMS Selection

Headless CMS

Strategic vision and systematic evaluation of headless CMS solutions against 120+ feature requirements for a 17+ market multi-website platform

Headless CMS Strategy
Extensive experience with headless CMS systems and a clear vision of what a modern multi-market platform requires
Shared Experience Platform

Marketing, Product + IT as co-owners - not a standalone UI library but a production-deployed platform

Headless Separation

Clear separation between content, presentation and data/identity, with DevOps flows and compliance built-in

Localization as a Process

An operational process (model, tools, workflows, quality) as much as a technology choice

Business Impact

Shorter time-to-market, consistent accessibility (WCAG 2.2 AA), lower operational cost, fewer risks around PHI/HIPAA

Evaluation Deep-Dives

Explore the strategic vision, 120+ feature checklist, and platform comparison

Content Management

Sanity CMS Integration

Headless CMS powering multi-site content with real-time preview, draft mode, and structured content modeling

Headless CMS
Sanity Studio as central content hub for all TDX applications and markets
Multi-Site Architecture
Single Sanity project managing content for multiple websites and applications
Real-Time Preview
Live draft mode with instant preview of unpublished changes before going live
Internationalization
Multi-language support with market-specific content and localization

CMS Implementation Details

How we structure, manage, and deliver content across multiple sites

System Overview

Built for Scale and Flexibility

TDX provides a complete foundation for building consistent, accessible, and performant digital experiences across multiple markets and platforms

60+

UI Components

Production-ready components built with React and TypeScript

17+

Market Configurations

Multi-market support with localization and currency handling

Monorepo

Architecture

Unified workspace with shared packages and apps

100%

Type Safe

Full TypeScript coverage across all packages

Design System

VOX Component Ecosystem

From Figma designs to production code - a complete design-to-development workflow with 60+ accessible components

Design Tokens
Consistent design language with CSS variables, color schemes, and spacing scales
Typography System
Custom fonts with optimized loading and comprehensive type scale
Component Library
60+ components built on Radix UI primitives with full accessibility support
Accessibility First
WCAG 2.1 compliant components with keyboard navigation and screen reader support

Design System Deep-Dives

Explore how we build, maintain, and scale our component library

Architecture

Scalable Monorepo Architecture

Structured for collaboration, maintainability, and rapid feature development across multiple applications

Monorepo Structure
Organized workspace with apps, packages, and shared configurations for efficient development
CI/CD Pipeline
Automated builds, tests, and deployments to staging and production environments
Shared Packages
Reusable design system, fonts, utilities, and configurations across all applications
Type Safety
Comprehensive TypeScript coverage with strict mode and shared type definitions

Technical Deep-Dives

Expand sections below to explore implementation details

Technology Stack

Modern Development Tools

Built with the latest technologies to ensure performance, scalability, and developer experience

Next.js 15
Latest React framework with App Router, Server Components, and Turbopack
pnpm Workspaces
Efficient monorepo management with shared dependencies and optimized builds
TypeScript
Full type safety across packages with strict mode and path mapping
Sanity CMS
Headless CMS with real-time collaboration and content versioning
CI/CD Pipeline

Automated Deployment Pipeline

From code commit to production in minutes with zero-downtime deployments

Git Push
Code pushed to GitHub
Build & Test
TypeScript check, lint, build
Docker Build
Container image creation
Harbor Push
Image registry storage
K8s Deploy
Automated rollout

Pipeline Details

Explore how our automated CI/CD pipeline works

Live Applications

Deployed Applications

All applications are live and accessible in production environments

Component Library (Storybook)
Interactive Storybook documentation with 60+ components
Staging:
https://storybook.staging.tdx.eagle.productions
Production:
https://storybook.tdx.eagle.productions
StagingProduction
Main Website
Multi-market website with Sanity CMS integration
Staging:
https://main-website.staging.tdx.eagle.productions
Production:
https://main-website.tdx.eagle.productions
StagingProduction
Sanity Studio (CMS)
Headless CMS for content management
Staging:
https://sanity-studio.staging.tdx.eagle.productions
Production:
https://sanity-studio.tdx.eagle.productions
StagingProduction
Auth Service
Authentication service with SSO integration
Staging:
https://auth.staging.tdx.eagle.productions
Production:
https://auth.tdx.eagle.productions
StagingProduction
Presentation Site
Technical study and implementation showcase
Staging:
https://presentation.staging.tdx.eagle.productions
Production:
https://presentation.tdx.eagle.productions
StagingProduction
Documentation
Project documentation and guides on GitHub
https://github.com/Dunderdog/tdx
Open Application
Development Roadmap

Project Progress & Recommendations

Completed milestones and recommended next phases for platform expansion

Phase 1: Foundation & Infrastructure
Completed
  • ✓Monorepo setup with Turborepo + CI/CD (GitHub Actions + Harbor)
  • ✓Design System (@tdx/ds - 60+ components with shadcn/ui + Radix)
  • ✓Storybook documentation with a11y checks
  • ✓Sanity CMS multi-site setup (3 sites configured)
  • ✓Kubernetes infrastructure (K3s cluster)
  • ✓Production + Staging environments with SSL/TLS
Phase 2: Core Platform
Completed
  • ✓Main Website with Sanity CMS integration
  • ✓Multi-market foundation (path-based routing)
  • ✓Authentication service (SSO ready)
  • ✓Multiple deployed applications (6 live apps)
  • ✓Automated deployment pipeline
Phase 3: Governance & Design System Council
Recommended
  • •Design System Council establishment (6 members: Design Lead, Tech Lead, Frontend Reps, Product Owner)
  • •Decision-making framework (P0/P1/P2 priority levels with approval workflows)
  • •Component lifecycle process (Proposal → Approval → Build → Release → Maintenance → Deprecation)
  • •Quality gates & standards (code review, accessibility audit, testing requirements)
  • •Contribution model & guidelines (how teams can propose and build components)
  • •Weekly Council meetings (strategic decisions, roadmap planning)
Phase 4: Presentation & Documentation
In Progress
  • •Technical study presentation site
  • •Documentation site
  • •CMS evaluation & methodology documentation
Phase 5: Translation Management System
Recommended
  • •Phrase TMS integration with Sanity CMS
  • •Professional medical translation workflow
  • •Expand from 2 to 15+ languages
  • •Automated translation sync (Sanity ↔ Phrase ↔ Translators)
  • •Market-specific content blocks
Phase 6: myTobiiDynavox Platform
Recommended
  • •User portal/workspace (M1 target: Dec 2025)
  • •TDIAM SSO integration (OAuth 2.0/OIDC)
  • •Multi-market support (initial 2 locales: en, sv)
  • •Authenticated user features
  • •Session management across platform
Phase 7: Platform Expansion & AAC Features
Recommended
  • •Component library expansion: Switch control, eye-tracking UI, large touch targets
  • •Additional market-specific page blocks
  • •RTL support for future markets
Phase 8: Performance & Scale
Recommended
  • •Market migration (15+ legacy sites → unified platform)
  • •Performance optimization (Core Web Vitals)
  • •Advanced monitoring & analytics
  • •A/B testing framework
  • •SEO enhancements for all markets