Entwickler-Dokumentation

StudioMeyer für Entwickler.

Einblick in die technische Grundlage unserer Website, mit Code-Beispielen und Prüfverfahren. Die konkrete Architektur eines Kundenprojekts richtet sich nach dem vereinbarten Umfang.

Technologien

Moderne, bewährte Technologien

Next.js 15

App Router, Server-Komponenten und statische Generierung

React 19

Komponenten, Suspense und paralleles Rendering

TypeScript

Strenge Typisierung und geprüfte Schnittstellen

Tailwind CSS

Utility-Klassen und ein eigenes Designsystem

Framer Motion

Animationen, Gesten und Layout-Übergänge

Prisma + PostgreSQL

Typisiertes ORM und relationale Datenbank

Redis

Caching und Sitzungsspeicher

Docker

Mehrstufige Builds und Docker Compose

Architektur

Modularer Aufbau

/studiomeyer/
├── app/                    # Next.js App Router
│   ├── [locale]/           # Sprachfassungen DE/EN/ES
│   │   ├── page.tsx        # Startseite
│   │   ├── services/       # Leistungsseiten
│   │   ├── referenzen/     # Referenzen und Demos
│   │   ├── portal/         # Kundenkonto
│   │   └── docs/           # Dokumentation
│   └── api/                # API-Routen
├── components/
│   ├── sections/           # Seitenabschnitte
│   ├── effects/            # Visuelle Effekte
│   ├── motion/             # Animationskomponenten
│   └── ui/                 # UI-Bausteine
├── lib/
│   ├── hooks/              # Eigene Hooks
│   ├── bot-core/           # Chatbot-Logik
│   └── schema.ts           # JSON-LD für SEO
├── messages/               # Übersetzungen
├── prisma/                 # Datenbankschema
└── mcp/                    # MCP-Server

Getrennte Zuständigkeiten

Seiten in app/, wiederverwendbare Komponenten in components/, Logik und Typen in lib/.

Performance im Blick

Verzögertes Laden und passende Animationen für Mobilgeräte und reduzierte Bewegung.

Betrieb in Containern

Docker Compose für die Dienste, lokale Port-Bindings und HTTPS über den vorgeschalteten Server.

Code-Muster

Bewährte Vorgehensweisen

Animationen für Mobilgeräte

Gerät und Wunsch nach reduzierter Bewegung berücksichtigen

import { useMobileDevice, useReducedMotion } from "@/lib/hooks";

const isMobile = useMobileDevice();
const prefersReduced = useReducedMotion();
const reduceAnimations = isMobile || prefersReduced;

<motion.div
  animate={reduceAnimations ? { opacity: 1 } : { opacity: 1, rotateX: -15 }}
/>

Video nur auf dem Desktop laden

Zusätzliche Video-Downloads auf Mobilgeräten vermeiden

import { useEffect, useState } from "react";
import { useMobileDevice } from "@/lib/hooks";

const isMobile = useMobileDevice();
const [showVideo, setShowVideo] = useState(false);

useEffect(() => {
  if (!isMobile) {
    const timer = setTimeout(() => setShowVideo(true), 1000);
    return () => clearTimeout(timer);
  }
}, [isMobile]);

Bereitstellung mit Git und Docker

Code aus Git übernehmen, den App-Container bauen und Logs prüfen

# Den freigegebenen Code aus Git holen
git -C /path/to/project pull

# Den App-Container neu bauen
docker compose -f /path/to/project/docker-compose.yml up -d --build app

# App-Logs anzeigen
docker compose -f /path/to/project/docker-compose.yml logs -f app --tail=100

Sicherheit

Technische Schutzmaßnahmen

HTTPS und HSTS

Content Security Policy (CSP)

X-Frame-Options: SAMEORIGIN

X-Content-Type-Options: nosniff

Referrer-Policy: strict-origin-when-cross-origin

Permissions-Policy: Kamera, Mikrofon und Standortzugriff deaktiviert

Rate Limits für geschützte API-Endpunkte

Serverseitige Prüfung von Eingaben

Cookie-Einstellungen für optionale Funktionen

Servergeheimnisse bleiben außerhalb des Client-Bundles