Aphantasie Testplattform | Case Study

Im Januar 2025 haben wir aphantasie.org gelauncht – eine wissenschaftliche Testplattform für Aphantasie mit validierten psychologischen Tests, 3D-Visualisierungen und Community-Features. In dieser Case Study teilen wir unsere technischen Entscheidungen und Lessons Learned.

Was ist Aphantasie?

Aphantasie bezeichnet die Unfähigkeit, mentale Bilder zu erzeugen. Schätzungsweise 2-5% der Bevölkerung sind betroffen – viele wissen es nicht einmal. Es fehlte eine zugängliche, wissenschaftlich fundierte Plattform für Selbsttests im deutschsprachigen Raum.

Die Herausforderungen

1. Wissenschaftliche Validität

Die Tests mussten exakt nach wissenschaftlichen Standards implementiert werden:

• VVIQ (Vividness of Visual Imagery Questionnaire) – 1973 von David Marks entwickelt
• PSIQ (Plymouth Sensory Imagery Questionnaire) – Multisensorische Erfassung
• Binocular Rivalry Test – Experimenteller Test mit visueller Stimulation

2. Mehrsprachigkeit von Anfang an

Die Plattform sollte von Tag 1 auf Deutsch und Englisch verfügbar sein – mit korrekter SEO für beide Sprachen.

3. Datenschutz bei sensiblen Gesundheitsdaten

Testergebnisse zur mentalen Gesundheit erfordern höchste Datenschutzstandards.

Technologie-Stack

Architektur-Entscheidungen

Routing mit next-intl

// middleware.ts - Sprachbasiertes Routing
import createMiddleware from 'next-intl/middleware'
 
export default createMiddleware({
  locales: ['de', 'en'],
  defaultLocale: 'de',
  localePrefix: 'always'
})
 
// Ergebnis:
// /de/tests/vviq → Deutsche Version
// /en/tests/vviq → Englische Version

3D-Visualisierungen mit Three.js

Die Hero-Section zeigt ein interaktives 3D-Gehirn, das auf Mausbewegungen reagiert:

// components/hero/BrainVisualization.tsx
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'
 
export function BrainModel() {
  const meshRef = useRef<THREE.Mesh>(null)
  const { nodes } = useGLTF('/models/brain.glb')
 
  useFrame((state) => {
    if (meshRef.current) {
      // Sanfte Rotation basierend auf Mausposition
      meshRef.current.rotation.y = state.mouse.x * 0.3
      meshRef.current.rotation.x = state.mouse.y * 0.2
    }
  })
 
  return <mesh ref={meshRef} geometry={nodes.Brain.geometry} />
}

Supabase Auth mit Row Level Security

-- Nur eigene Testergebnisse sichtbar
CREATE POLICY "Users can view own results" ON test_results
  FOR SELECT USING (auth.uid() = user_id);
 
-- Nur authentifizierte User können Ergebnisse speichern
CREATE POLICY "Users can insert own results" ON test_results
  FOR INSERT WITH CHECK (auth.uid() = user_id);

Performance-Optimierung

Three.js auf Mobile

3D-Grafik ist ressourcenintensiv. Unsere Strategien:

1. Conditional Loading: 3D nur auf Desktop, statisches Bild auf Mobile
2. LOD (Level of Detail): Reduzierte Polygon-Anzahl für schwächere Geräte
3. Lazy Loading: Three.js Bundle nur bei Viewport-Eintritt laden

// Conditional 3D Loading
const BrainScene = dynamic(
  () => import('@/components/hero/BrainScene'),
  {
    ssr: false,
    loading: () => <StaticBrainImage />
  }
)
 
export function HeroSection() {
  const isMobile = useMediaQuery('(max-width: 768px)')
 
  return isMobile ? <StaticBrainImage /> : <BrainScene />
}

Ergebnis: Lighthouse Scores

DSGVO-Compliance

Datensparsamkeit

• Anonyme Testdurchführung möglich
• Account nur für Ergebnis-History erforderlich
• Keine Drittanbieter-Tracker

Technische Maßnahmen

• TLS 1.3 für alle Verbindungen
• Supabase in EU-Region (Frankfurt)
• Row Level Security auf Datenbankebene
• Automatische Löschung nach 2 Jahren Inaktivität

Lessons Learned

1. i18n früh einplanen

Mehrsprachigkeit nachträglich einzubauen ist aufwändig. Mit next-intl von Anfang an war die Integration nahtlos.

2. Three.js Bundle Size

Das Three.js Ökosystem ist groß. Selektive Imports und Tree Shaking sind essentiell:

// Nicht: import * as THREE from 'three'
// Sondern:
import { Scene, PerspectiveCamera, WebGLRenderer } from 'three'

3. Wissenschaftliche Validierung

Bei medizinisch/psychologisch relevanten Tests: Immer Experten einbeziehen und Quellen dokumentieren.

Fazit

Mit aphantasie.org haben wir gezeigt, dass wissenschaftliche Plattformen modern, performant und datenschutzkonform sein können. Die Kombination aus Next.js 16, Three.js und Supabase ermöglichte eine schnelle Entwicklung ohne Kompromisse bei der Qualität.

Links:

• Live: aphantasie.org
• Portfolio-Eintrag

Interesse an einem ähnlichen Projekt? Kontaktieren Sie uns für eine unverbindliche Beratung.