---
title: "Developer Docs – Documentación Técnica | StudioMeyer"
description: "Stack tecnológico, arquitectura, seguridad, rendimiento y patrones de código. Documentación técnica para desarrolladores de StudioMeyer."
canonical: "https://studiomeyer.io/es/docs/developer"
language: es
last_updated: 2026-09-14
image: "https://studiomeyer.io/og-developer-agents.png"
markdown_versions: ["https://studiomeyer.io/de/docs/developer.md", "https://studiomeyer.io/en/docs/developer.md", "https://studiomeyer.io/es/docs/developer.md"]
publisher: "StudioMeyer, https://studiomeyer.io (llms.txt: https://studiomeyer.io/llms.txt)"
---

[Zurück zur Übersicht](https://studiomeyer.io/es/docs)

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/                    # MCP Server Familie (Memory, CRM, GEO, Crew, KI-Verbinder + Customer-MCPs)

#### 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

95/100 (Desktop)

Lighthouse Performance

(PageSpeed Insights)

100/100

Lighthouse SEO

(geräteunabhängig)

100/100

Lighthouse Accessibility

(geräteunabhängig)

100/100

Lighthouse Best Practices

(geräteunabhängig)

<1s

First Contentful Paint

(typisch)

~0

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 tief integriertem MCP-Toolset, alles was ein KI-Agent braucht.

Dokumentation ansehen

https://studiomeyer.io/es/docs/developer/agents

## Interesse an Zusammenarbeit?

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

[Projekt starten](https://studiomeyer.io/es/contacto)

## Sitemap

Todas las páginas de este sitio en Markdown: [sitemap](https://studiomeyer.io/sitemap.md). Punto de entrada: [llms.txt](https://studiomeyer.io/llms.txt).