🛠️ Technische Dokumentation

Umfassende technische Dokumentation für Entwickler und Systemadministratoren.

🏗️ Systemarchitektur

Knowledge Map System v2.0

LERNREISE.TECH Architecture
├── Frontend: Vanilla HTML5/CSS3/JavaScript
├── Visualization: Markmap.js + D3.js
├── CMS: GRAV with Gantry5 Theme
├── Data Storage: LocalStorage + GRAV Pages
├── Container: Docker (lernreise-tech-staging)
└── Deployment: Stage Environment

Core Components

  • Interactive Mind Maps: Markmap.js-based visualization
  • Progress Tracking: LocalStorage with cross-page sync
  • User Management: Session-based authentication
  • Content Management: GRAV CMS with Markdown pages
  • Theme System: Gantry5 with custom modifications

🚀 Knowledge Map System

Features

  • ✅ Interactive SVG mind maps with zoom/pan
  • ✅ Real-time progress tracking (4 states)
  • ✅ Cross-page data synchronization
  • ✅ Mobile-responsive touch interactions
  • ✅ Test user creation system
  • ✅ Learning dashboard with analytics

Technology Stack

// Core Libraries
- Markmap.js: Interactive mind map rendering
- D3.js: SVG manipulation and data visualization
- LocalStorage: Client-side data persistence
- Vanilla JavaScript: No framework dependencies

// File Structure
/assets/js/
├── d3.min.js (279KB)
├── markmap-lib.min.js (311KB)
└── markmap-view.min.js (50KB)

Data Flow

User Action → Progress Update → LocalStorage → 
Cross-Page Sync → Visual Update → Dashboard Refresh

🔧 Development Environment

Prerequisites

  • Docker & Docker Compose
  • Git
  • Node.js 18+ (for asset building)
  • Modern browser with ES6+ support

Local Setup

# Clone repository
git clone https://github.com/lernreise-tech/lernreise.tech.git
cd lernreise.tech

# Start development environment
docker-compose up -d

# Access development site
open http://localhost

Container Configuration

# docker-compose.yml
version: '3.8'
services:
  lernreise-tech-staging:
    image: grav:latest
    ports:
      - "80:80"
    volumes:
      - ./user:/var/www/html/user
      - ./assets:/var/www/html/assets

🗃️ Content Management

GRAV CMS Structure

/user/pages/
├── 01.einfuehrung/
├── 02.hardware/
├── 03.software/
├── 04.erwachsene/
├── 05.lern-reise/
├── 06.info/
│   ├── 01.about/          # Über das Projekt
│   ├── 02.partner/        # Partner & Netzwerk
│   └── 03.dokumentation/  # Diese Dokumentation
├── 09.ressources/
└── 10.tour/

Page Templates

  • default.md - Standard content pages
  • presentation.md - Reveal.js presentations
  • slide.md - Individual presentation slides

Metadata Structure

---
title: 'Page Title'
taxonomy:
    category: menu
visible: true
metadata:
    description: 'SEO description'
---

🎨 Theme System

Gantry5 Framework

  • Base Theme: Hydrogen
  • Customizations: LERNREISE.TECH branding
  • Responsive: Mobile-first design
  • Assets: Custom CSS/JS integration

Custom Styling

/* Custom color scheme */
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --accent-color: #4CAF50;
  --background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

🔌 API & Integration

Internal APIs

  • Progress Tracking API: LocalStorage-based
  • User Management API: Session-based
  • Content API: GRAV's built-in system

External Integrations

  • Markmap.js: Mind map visualization
  • D3.js: Data visualization library
  • GRAV CMS: Content management
  • Docker: Containerization

📊 Performance Metrics

Current Performance

Page Load Times:
├── Demo Guide: ~1.2s
├── Test User Creator: ~0.8s
├── Learning Dashboard: ~1.0s
├── Knowledge Map Demo: ~1.5s
└── Documentation: ~0.6s

JavaScript Libraries: 640KB total
Interaction Response: <100ms
Mobile Performance: Optimized

Optimization Strategies

  • Local JavaScript libraries (no CDN dependency)
  • Minimal CSS framework usage
  • Optimized image assets
  • Browser caching strategies

🔒 Security Considerations

Current Security Measures

  • Container Isolation: Docker-based deployment
  • File Permissions: Proper www-data ownership
  • HTTPS: Let's Encrypt SSL certificates
  • Input Validation: GRAV's built-in protection
  • Session Management: Secure session handling

Privacy & GDPR

  • LocalStorage Only: No server-side user tracking
  • No Analytics: Privacy-first approach
  • No Cookies: Session-based authentication only
  • Open Source: Transparent code and data handling

🧪 Testing Framework

Manual Testing

  • Functional Testing: 5-minute test flow
  • Cross-Browser Testing: Modern browser support
  • Mobile Testing: Touch interaction validation
  • Performance Testing: Load time measurements

Automated Testing (Planned)

# Future testing setup
npm test              # Unit tests
npm run test:e2e      # End-to-end tests
npm run test:perf     # Performance tests
npm run test:a11y     # Accessibility tests

🚀 Deployment

Current Deployment

  • Environment: stage.lernreise.tech
  • Container: lernreise-tech-staging
  • Status: Fully operational
  • Monitoring: Manual health checks

Deployment Commands

# Update container with new files
docker cp ./user/pages/ lernreise-tech-staging:/var/www/html/user/

# Set permissions
docker exec lernreise-tech-staging chown -R www-data:www-data /var/www/html/user/

# Restart if needed
docker restart lernreise-tech-staging

📋 Troubleshooting

Common Issues

  1. 404 Errors: Check file permissions and GRAV cache
  2. JavaScript Errors: Verify library loading order
  3. CSS Issues: Clear browser cache and check asset paths
  4. Performance: Optimize images and minify assets

Debug Commands

# Check container status
docker ps --filter name=lernreise-tech-staging

# View logs
docker logs lernreise-tech-staging

# Access container shell
docker exec -it lernreise-tech-staging /bin/bash

# Check file permissions
docker exec lernreise-tech-staging ls -la /var/www/html/user/pages/

📞 Development Support

Technical Issues: dev@lernreise.tech
Documentation Updates: docs@lernreise.tech
Bug Reports: bugs@lernreise.tech

Letzte Aktualisierung: 2025-08-02 | Version: 2.0 Beta