Wie hier gebaut wird, und warum.
Jedes Tool im Stack ist eine Entscheidung. Hier stehen sie alle, mit Versionen und Begründungen, quer durch method64, Climactra und Kundenprojekte. Plus zehn populäre Werkzeuge, die bewusst nicht eingesetzt werden.
Fünf Layer.
Vom Pixel im Browser bis zur Maschine im Datacenter, jeder Layer mit der Begründung warum.
- 01Frontend & UIWas im Browser läuft
- 02API & Backend ServicesWas zwischen Browser und Datenbank steht
- 03Daten, Auth & PaymentsWas auf der Festplatte landet, und wer rein darf
- 04AI & MLWas Sprache versteht und Embeddings rechnet
- 05Infrastructure, Observability & DevToolsWo es läuft und wie es überwacht wird
Klicken springt zur Sektion. Hover über eine Tool-Karte zeigt verwandte Tools.
Frontend & UI.
Frontend ist die Schicht mit den meisten Mikro-Entscheidungen, typografische Hierarchie, Animation-Easing, Loading-States, Accessibility. Stack-Auswahl: kompromisslos React-zentrisch, weil es das einzige Ökosystem ist, in dem alle Capabilities (3D, Animation, Accessibility, Forms, Routing) in einer Hand sind. TypeScript überall, kein "mal eben JS dazwischen werfen". Tailwind statt CSS-in-JS-Lösungen, weil es im Build verschwindet und im Browser nichts kostet. Three.js und GSAP nur dort, wo es wirklich um interaktive 3D oder choreografierte Sequenzen geht, sonst CSS.
Komponenten-Modell, das nach 12 Jahren Bestand hat. Die method64-Site selbst läuft auf React 18 mit Vite, Climactra und Kundenprojekte auf Next.js mit React 19.2, weil dort Concurrent Features und der React Compiler den Mehrwert liefern.
Strict Mode überall, eine ganze Klasse von Runtime-Fehlern verschwindet beim Tippen.
Server-Komponenten, App-Router, eingebautes Routing + i18n. Im Einsatz überall, wo SSR oder Multi-Tenancy gefragt ist (Climactra), diese Site kommt mit Vite + Prerenderer aus.
Dev-Server in unter einer Sekunde, Production-Build in unter zehn. Webpack hat fünf Jahre lang versucht, das zu liefern, Vite hat's einfach gemacht.
Wenn statt Next.js Vite zum Einsatz kommt, ist React Router das ehrliche, unabhängige Routing, keine versteckten Magic-Konventionen.
Utility-First spart hunderte custom-CSS-Klassen pro Projekt. Im Build-Output ist nur, was wirklich verwendet wird.
Für component-spezifisches Styling außerhalb der Tailwind-Welt, keine Klassen-Kollisionen, keine BEM-Bürokratie.
Components als Source-Code, nicht als npm-Package, veränderbar statt API-Kampf.
Für Timeline-getriebene Sequenzen mit präzisem Easing, wo CSS-Transitions zu wenig Kontrolle haben und JS-Animation-Libs zu viel Overhead.
WebGL ohne den Boilerplate. Im Einsatz, wenn 3D wirklich Sinn ergibt, sonst bleibt's aus, weil es ein Bundle-Schwergewicht ist.
Smooth-Scroll ohne die typischen Native-Bugs, und mit `prefers-reduced-motion`-Respekt out of the box.
Icon-Familie, die wirklich konsistent aussieht. Einzeln importiert, nicht das ganze Library-Bundle.
Plus Jakarta Sans, Inter, JetBrains Mono, Source Serif 4, selbst-gehostet, woff2, font-display:swap. Kein Google-Tracking, kein dritter DNS-Lookup.
API & Backend Services.
API-Schicht baut Verträge, nicht Endpoints. Jede Route hat ein Zod-Schema, jeder Response ist getypt, Frontend und Backend sprechen dieselbe Sprache, garantiert vom Compiler. Fastify statt Express, weil Schemas ohnehin geschrieben werden und Fastify sie zur Performance nutzt. Python kommt rein, wenn ML / Embeddings / Datenpipelines gefragt sind, Node ist da nicht das richtige Werkzeug.
Default-Runtime für alles JavaScript-seitig. LTS-Branch, kein Edge-Cutting.
Wenn ML, Daten-Engineering oder Embeddings im Spiel sind, alles dort hat einen besser gepflegten Python-Pfad als JS-Pendant.
Schema-getrieben, schnell, klein. Express-Ersatz, seit Validation und JSON-Schema sowieso geschrieben werden.
Eine Schema-Definition für Validation, TypeScript-Types und JSON-Schema-Export, DRY ohne Generator-Pipeline.
SMTP-Client, der seit 16 Jahren genau funktioniert. Standard-SMTP heißt: Provider-Wechsel ist Config, nicht Rewrite, kein Lock-in wie bei Resend oder SendGrid mit ihren proprietären HTTP-APIs.
i18n in Next.js-Apps mit Server-Komponenten-Support, kein separater Provider-Layer im Tree.
Daten, Auth & Payments.
Daten-Layer ist konservativ, weil hier Migrationen weh tun und Auth-Bugs Vertrauen kosten. Postgres als Default, kein Vendor-DB. Prisma als ORM, weil die generierten Types Frontend bis Datenbank durchverbinden. pgvector statt einer eigenständigen Vektor-Datenbank, eine DB pro Projekt ist genug. Auth.js, weil es auditierbar ist und nicht mit Lock-in zu Auth0 / Clerk wachsen muss.
Eine relationale DB, die seit rund 40 Jahren reift. JSONB, Volltext, pgvector, alles in einer Engine.
Schema als Single Source of Truth, Migrationen versioniert, Types automatisch generiert. Einfach beste DX im Node-Ökosystem.
Vector-Search direkt in Postgres, kein Pinecone-Kostenmodell, keine zweite Datenbank.
In-Memory-Caching und Rate-Limiting, wenn Postgres zu viele Writes für ephemere Daten bekommt.
Auth ohne Vendor-Account (vormals NextAuth.js). Self-hostable, OAuth-Provider-flexibel, kein Pricing-Cliff bei MAU-Wachstum. v5 läuft seit Monaten stabil im Beta-Channel, gut genug für Produktion.
Password-Hashing, das nicht von einer C-Lib abhängt, überall lauffähig, auch in serverless Environments.
Payment-Layer mit der besten Developer-Experience. Webhook-First-Architektur passt zur Architektur hier. Für italienische Kunden gibt es die Brücke zu SdI über Aruba Fatturazione Elettronica, Stripe rechnet, Aruba stellt die elektronische Rechnung.
PDF- und Excel-Exporte serverseitig generiert, Climactra erzeugt damit sechs druckfertige Klima-Berichte und vier Zertifizierungs-Label-Exporte. Templates leben im Code, nicht in einem Designer-Tool, dieselbe Diff-bare Versionierung wie der Rest der App.
AI & ML.
Modell-Auswahl ist pragmatisch: Claude für lange Kontexte und Code, GPT für günstige Bulk-Calls, Embeddings von OpenAI, weil sie semantisch immer noch das beste Preis-Leistungs-Verhältnis liefern. LangChain als Glue, nicht als Framework-Religion, sondern als Bibliothek, die punktuell eingesetzt wird, wenn sich Standard-Patterns wiederholen. Kein Lock-in zu einem Provider, alles über Anthropic / OpenAI direkt, kein Aggregator dazwischen.
Long-Context, Code-Reasoning und Tool-Use auf einem Niveau, an dem GPT noch lange knabbert. Default für alles, was Genauigkeit über Geschwindigkeit braucht.
Wenn Latenz und Kosten zählen, z.B. bulk-Klassifikation oder einfache Generation in High-Volume.
Beste Embedding-Qualität für RAG, kombiniert mit pgvector als Storage.
Reranking-Stage zwischen Vector-Search und LLM. Hebt RAG-Antwortqualität messbar, rund zwei Dollar pro Tausend Queries, vernachlässigbar gegen die LLM-Kosten dahinter.
Punktuell für Standard-Patterns wie Retrieval-Chains. Nicht als Framework-Wrap aller LLM-Calls.
Infrastructure, Observability & DevTools.
Infra ist bewusst unspektakulär: Docker für Reproduzierbarkeit, Hetzner statt Hyperscaler, weil die Größenordnungen passen, nginx statt Application-Routern, weil es seit 20 Jahren ohne Drama läuft. Beobachtbarkeit zweistufig, Sentry für Errors mit Stack-Trace, Umami für Pageviews ohne Cookies. Deploy manuell per SSH + git pull + docker compose, bei dieser Größe schneller als eine Pipeline, und kein zweiter Provider nötig.
Reproduzierbare Umgebungen, keine "läuft auf meiner Maschine"-Diskussionen. Compose für lokale Multi-Service-Setups.
Echte VMs in deutschen Datacentern, halber Preis von AWS für vergleichbare Specs. Kein Vendor-Lock-in.
Reverse-Proxy, TLS-Termination, statisches Hosting, eine Config, drei Aufgaben. Default für die method64-Site und alle Setups, in denen ein klassischer Web-Server gefragt ist.
Reverse-Proxy mit Auto-Let's-Encrypt im Container-Setup. In Climactra spart das eine Config-Schicht, gleicher Job wie nginx, anderer Trade-off.
Service-Management ohne Daemon-Soap-Opera. Auto-Restart, Logs in journald, Standard auf jedem Linux.
EU-gehostete Infrastruktur für die eigenen Postfächer und DNS-Records. Etabliert genug, dass Banken und Behörden es nutzen. Für Produkt-Volumen (Climactra) kommt je nach Skalierung Amazon SES in eu-central-1 zum Einsatz.
Errors mit Stack-Trace, Source-Map-aufgelöst, Probleme werden sichtbar, bevor User sie melden.
Pageview-Statistik ohne Cookies, ohne IP-Speicherung, GDPR-konform. Self-hosted auf eigenem Hetzner-Server.
Test-Runner, der Vite-Configs erbt, kein doppeltes Setup. Schneller als Jest, gleiche Jest-API.
Lint-Layer, der projekt-weite Code-Konventionen automatisch durchsetzt, strict-rules, keine "warning"-Schlupflöcher.
TypeScript-Files direkt aus Node ausführen, Build-Scripts und Migration-Tools laufen ohne separaten ts-Compile-Schritt.
Zehn populäre Werkzeuge, die bewusst ausgelassen werden.
Eine Stack-Entscheidung ist nicht nur, was drin ist. Genauso wichtig: was draußen bleibt, und warum.
- WordPressWartungsaufwand für Themes, Plugins und Sicherheits-Patches wächst überproportional mit der Site-Komplexität. Für eine Marketing-Site, die statisch prerendered ausgeliefert werden kann, überdimensioniert.
- BootstrapTailwind ist seit Jahren das bessere Werkzeug für utility-orientiertes Styling. Bootstrap-Klassen-Sets sind starr, der Override-Aufwand für eigenständiges Design unverhältnismäßig.
- jQueryBrowser haben mittlerweile native APIs für DOM-Manipulation, Event-Handling und HTTP-Requests. Der Footprint von etwa 30 kB lohnt nicht mehr.
- Webpack (direkt konfiguriert)Konfiguration ist aufwendig und Build-Zeiten sind im Vergleich zu Vite deutlich langsamer. Für neue Projekte ist Vite die pragmatischere Wahl.
- MongoDBDie Schemaless-Idee verlagert nur die Schema-Last vom DB- ins Anwendungs-Layer. Postgres mit JSONB-Spalten liefert dieselbe Flexibilität ohne den Trade-off bei Transaktionen und JOINs.
- Redux / Redux ToolkitGlobales State-Management ist in den meisten Apps unnötig. React-State, Context und Server-State-Libraries wie TanStack Query lösen dasselbe mit deutlich weniger Boilerplate.
- Vercel (Hosting)Sehr gute DX, aber Edge-Functions skalieren preislich schnell über das hinaus, was ein dedizierter Server kostet. Next.js wird direkt auf eigener Hardware deployed.
- AWS AmplifyEine zusätzliche Abstraktion über AWS-Services, die bei Komplexität mehr Probleme schafft als sie löst. Wer AWS möchte, fährt direkt mit den Primitiv-Services besser.
- Page-Builder (Webflow / framer.com)Visuelle Drag-and-Drop-Tools erschweren Performance-Optimierung, Custom-Logic und Versionierung. Für nicht-triviale Sites stößt das an Grenzen, die ein Code-First-Ansatz nicht hat.
- No-Code-Backends (Supabase Auth)Praktisch für Prototypen, in der Produktion entstehen aber schnell Lock-in-Probleme. Auth-Logik gehört in den eigenen Code, damit sie auditierbar und migrierbar bleibt.
Aktuelle Build-Metriken dieser Site, automatisch generiert bei jedem Deploy.