Developer Documentation

Für Entwickler.

Technische Details, Code-Beispiele und Best Practices für alle StudioMeyer Projekte.

Tech Stack

Moderne, bewährte Technologien

Next.js 15

App Router, Server Components, SSG

React 19

Concurrent Features, Suspense

TypeScript

Strenge Typisierung, Type Safety

Tailwind CSS

Utility-first, Custom Design System

Framer Motion

Animations, Gestures, Layout

Prisma + PostgreSQL

Type-safe ORM, pgvector

Redis

Caching, Session Storage

Docker

Multi-Stage Builds, Compose

Architektur

Modularer Aufbau

/studiomeyer/
├── app/                    # Next.js App Router
│   ├── [locale]/           # i18n (DE/EN/ES)
│   │   ├── page.tsx        # Homepage
│   │   ├── services/       # Service-Seiten
│   │   ├── portfolio/      # Portfolio
│   │   ├── portal/         # Kunden-Portal
│   │   └── docs/           # Dokumentation
│   └── api/                # API Routes
├── components/
│   ├── sections/           # Page Sections
│   ├── effects/            # Visual Effects
│   ├── motion/             # Animation Components
│   └── ui/                 # UI Primitives
├── lib/
│   ├── hooks/              # Custom Hooks
│   ├── bot-core/           # AI Bot Logic
│   └── schema.ts           # JSON-LD SEO
├── messages/               # i18n Translations
├── prisma/                 # Database Schema
├── portfolio/              # 18 Portfolio-Showcases
├── ceo/                    # AI CEO Agent Fleet (12 Agents)
└── mcp/                    # 58 MCP Server (680+ Tools)

Separation of Concerns

Types in lib/types.ts, Config in lib/config.ts, Hooks in lib/hooks/

Performance-First

Lazy Loading, Video nur Desktop, 3D-Transforms nur Desktop

Container-basiert

Docker für alles, Ports nur auf 127.0.0.1, Nginx für HTTPS

Code Patterns

Best Practices

Mobile-optimierte Animationen

Hooks für Performance auf Touch-Devices

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

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

<motion.div
  animate={isMobile ? { y: 20 } : { rotateX: -15 }}
  style={{ willChange: "transform" }}
/>

Video-Loading (Desktop-only)

Spart ~3MB auf Mobile Devices

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

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

Docker Deployment

Multi-Stage Build für optimale Image-Größe

# Alle Services starten
docker compose up -d

# Einzelnen Service rebuilden
docker compose up -d --build app

# Logs anzeigen
docker compose logs -f app --tail=100

Security

Sicherheit by Design

HTTPS-Only (HSTS mit 2 Jahren max-age + preload)

Content Security Policy (CSP)

X-Frame-Options: DENY (Clickjacking-Schutz)

X-Content-Type-Options: nosniff

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

Permissions-Policy (Kamera, Mikrofon deaktiviert)

Rate Limiting auf API-Endpoints

Server-seitige Input-Validierung

DSGVO-konformes Cookie-Management

Keine Secrets im Client-Bundle

Performance

Lighthouse Scores

64+

Lighthouse Performance

(variiert je nach Inhalt)

96+

Lighthouse Accessibility

(Zielwert)

100

Lighthouse Best Practices

(Zielwert)

100

Lighthouse SEO

(Zielwert)

<1s

First Contentful Paint

(typisch)

Cumulative Layout Shift

(typisch)

Testing

Qualitätssicherung

Playwright E2E

End-to-End Tests für kritische User-Journeys

npm run test:e2e

API & Smoke Tests

API-Validierung und schnelle Smoke-Tests

npm test

Agent Integration Docs

Discovery-Endpoints, A2A Protocol (JSON-RPC 2.0), Public API v1 mit 11 Tools und REST API mit 680+ Tools — alles was ein KI-Agent braucht.

Dokumentation ansehen

Interesse an Zusammenarbeit?

Wir arbeiten mit denselben hohen Standards für alle Kundenprojekte.

Projekt starten