Developer documentation

StudioMeyer for developers.

A look at the technology behind our website, with code examples and testing methods. Each client project's architecture depends on the agreed scope.

Technology stack

Modern, proven technologies

Next.js 15

App Router, Server Components and static generation

React 19

Components, Suspense and concurrent rendering

TypeScript

Strict typing and checked interfaces

Tailwind CSS

Utility classes and a custom design system

Framer Motion

Animations, gestures and layout transitions

Prisma + PostgreSQL

Typed ORM and relational database

Redis

Caching and session storage

Docker

Multi-stage builds and Docker Compose

Architecture

A modular structure

/studiomeyer/
├── app/                    # Next.js App Router
│   ├── [locale]/           # DE/EN/ES language versions
│   │   ├── page.tsx        # Homepage
│   │   ├── services/       # Service pages
│   │   ├── referenzen/     # References and demos
│   │   ├── portal/         # Customer account
│   │   └── docs/           # Documentation
│   └── api/                # API routes
├── components/
│   ├── sections/           # Page sections
│   ├── effects/            # Visual effects
│   ├── motion/             # Animation components
│   └── ui/                 # UI building blocks
├── lib/
│   ├── hooks/              # Custom hooks
│   ├── bot-core/           # Chatbot logic
│   └── schema.ts           # JSON-LD for SEO
├── messages/               # Translations
├── prisma/                 # Database schema
└── mcp/                    # MCP servers

Separation of concerns

Pages in app/, reusable components in components/, and logic and types in lib/.

Performance in mind

Lazy loading and suitable animations for mobile devices and reduced motion preferences.

Container deployment

Docker Compose for services, local port bindings and HTTPS through the fronting server.

Code patterns

Recommended practices

Animations for mobile devices

Respect the device and the preference for reduced motion

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

Load video on desktop only

Avoid additional video downloads on mobile devices

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

Deployment with Git and Docker

Pull code from Git, build the app container and check its logs

# Pull the approved code from Git
git -C /path/to/project pull

# Rebuild the app container
docker compose -f /path/to/project/docker-compose.yml up -d --build app

# Show the app logs
docker compose -f /path/to/project/docker-compose.yml logs -f app --tail=100

Security

Technical safeguards

HTTPS and HSTS

Content Security Policy (CSP)

X-Frame-Options: SAMEORIGIN

X-Content-Type-Options: nosniff

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

Permissions-Policy: camera, microphone and location access disabled

Rate limits for protected API endpoints

Server-side input validation

Cookie settings for optional functions

Server secrets stay outside the client bundle