Documentación para desarrolladores

StudioMeyer para desarrolladores.

Una mirada a la tecnología de nuestra web, con ejemplos de código y métodos de prueba. La arquitectura de cada proyecto de cliente depende del alcance acordado.

Tecnologías

Tecnologías modernas y probadas

Next.js 15

App Router, componentes de servidor y generación estática

React 19

Componentes, Suspense y renderizado concurrente

TypeScript

Tipado estricto e interfaces verificadas

Tailwind CSS

Clases de utilidad y un sistema de diseño propio

Framer Motion

Animaciones, gestos y transiciones de diseño

Prisma + PostgreSQL

ORM tipado y base de datos relacional

Redis

Caché y almacenamiento de sesiones

Docker

Compilaciones por etapas y Docker Compose

Arquitectura

Una estructura modular

/studiomeyer/
├── app/                    # Next.js App Router
│   ├── [locale]/           # Versiones en DE/EN/ES
│   │   ├── page.tsx        # Página de inicio
│   │   ├── services/       # Páginas de servicios
│   │   ├── referenzen/     # Referencias y demos
│   │   ├── portal/         # Cuenta de cliente
│   │   └── docs/           # Documentación
│   └── api/                # Rutas API
├── components/
│   ├── sections/           # Secciones de página
│   ├── effects/            # Efectos visuales
│   ├── motion/             # Componentes de animación
│   └── ui/                 # Elementos de interfaz
├── lib/
│   ├── hooks/              # Hooks propios
│   ├── bot-core/           # Lógica del chatbot
│   └── schema.ts           # JSON-LD para SEO
├── messages/               # Traducciones
├── prisma/                 # Esquema de base de datos
└── mcp/                    # Servidores MCP

Responsabilidades separadas

Páginas en app/, componentes reutilizables en components/, lógica y tipos en lib/.

Rendimiento desde el diseño

Carga diferida y animaciones adecuadas para móviles y preferencias de movimiento reducido.

Despliegue en contenedores

Docker Compose para los servicios, puertos locales y HTTPS mediante el servidor de entrada.

Patrones de código

Prácticas recomendadas

Animaciones para móviles

Respetar el dispositivo y la preferencia de movimiento reducido

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 }}
/>

Cargar vídeo solo en escritorio

Evitar descargas de vídeo adicionales en móviles

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]);

Despliegue con Git y Docker

Obtener el código de Git, construir el contenedor de la app y revisar los logs

# Obtener el código aprobado de Git
git -C /path/to/project pull

# Reconstruir el contenedor de la app
docker compose -f /path/to/project/docker-compose.yml up -d --build app

# Mostrar los logs de la app
docker compose -f /path/to/project/docker-compose.yml logs -f app --tail=100

Seguridad

Medidas de protección técnicas

HTTPS y HSTS

Content Security Policy (CSP)

X-Frame-Options: SAMEORIGIN

X-Content-Type-Options: nosniff

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

Permissions-Policy: cámara, micrófono y ubicación desactivados

Límites de solicitudes en los endpoints API protegidos

Validación de datos en el servidor

Ajustes de cookies para funciones opcionales

Los secretos del servidor quedan fuera del código del cliente