Campus Design System

Appearance

Technology Stack ​

Build System & Monorepo ​

  • Nx Workspace: Monorepo management with caching and task orchestration
  • Angular CLI: Angular application scaffolding and building
  • npm: Package manager

Frontend Stack ​

  • Angular 16.2.9: Primary frontend framework
  • NgRx: State management (Store, Effects, Entity, Router Store)
  • TypeScript 4.9.5: Primary language
  • SCSS: Styling with custom theming system
  • RxJS: Reactive programming

Key Libraries ​

  • @diekeure/dcr-components: Main UI component library
  • @diekeure/cds-tokens: Design system library
  • Froala WYSIWYG: Rich text editing
  • Konva: 2D canvas graphics for whiteboard
  • Socket.io: Real-time communication
  • HLS.js: Video streaming

Testing & Quality ​

  • Jest: Unit testing framework
  • Cypress: E2E testing
  • ESLint: Code linting with Angular-specific rules
  • Prettier: Code formatting

Common Commands ​

Development ​

bash
# Start development server
nx serve [app-name]

# Build application
nx build [app-name]

# Run tests
nx test [app-name]
nx run-many --target=test --parallel --all

# Run E2E tests
nx e2e [app-name]

Code Quality ​

bash
# Lint all projects
nx run-many --target=lint --parallel --all

# Format code
nx format:write

# Check affected projects
nx affected:test
nx affected:lint

Build & Deploy ​

bash
# Build for staging
npm run build:staging:nx

# Build for production
npm run build:production:nx

# Generate dependency graph
nx dep-graph

Architecture Patterns ​

  • Nx Module Boundaries: Strict dependency constraints between libs
  • Component Prefix: All components use campus- prefix
  • Path Mapping: @campus/* aliases for internal libraries
  • Lazy Loading: Route-based code splitting