# Tech-Stack: was du bauen solltest und warum

Es gibt hunderte sinnvolle Wege, eine Webapp zu bauen. Im Workshop nehmen wir den, mit dem du am schnellsten online bist: Next.js, Supabase und Vercel. Du brauchst keinen eigenen Server, keine DevOps-Kenntnisse und kommst mit dem kostenlosen Tarif extrem weit. Ben Scheurer selbst betreibt seine Produkte später anders (eigener Server, eigene Auth), aber das ist erst relevant, wenn du echtes Wachstum hast. Bis dahin: Workshop-Stack.

Du musst nicht alles verstehen. Du musst nur wissen, was wofür da ist.

## Die drei Schichten einer Webapp

Jede Webapp besteht aus drei Teilen, egal wie groß sie wird.

**Frontend** ist das, was der Nutzer im Browser sieht. Buttons, Formulare, Texte, Bilder. Frontend-Code läuft im Browser des Nutzers.

**Backend** ist die Logik dahinter. Wer darf was sehen, was passiert beim Klick auf "Bestellen", wie wird die Rechnung berechnet. Backend-Code läuft auf einem Server irgendwo im Internet.

**Datenbank** ist der Speicher. Nutzerkonten, Bestellungen, Inhalte. Alles, was nach einem Neustart noch da sein soll.

Im Workshop-Stack verschmelzen Frontend und Backend in einem einzigen Projekt (Next.js). Die Datenbank kommt als fertiger Service dazu (Supabase). Du musst keinen Server administrieren.

## Workshop-Stack: heute online gehen

### Frontend: Next.js 15 mit App Router

Next.js ist das meistgenutzte Framework für Webapps in JavaScript. Es nimmt dir Routing, Server-Rendering und Code-Splitting ab. Wir nutzen den neuen "App Router", weil er sauberer ist und auch das Backend direkt mit abbildet.

**Dazu Tailwind v4 für Styling.** Statt eigene CSS-Dateien zu schreiben, klebst du Klassen direkt an die Elemente: `class="bg-blue-500 text-white p-4 rounded"`. Das klingt hässlich, ist aber in der Praxis viel schneller und konsistenter.

**Sprache: TypeScript.** Wie JavaScript, aber mit Typprüfung. Findet Fehler bevor sie im Browser landen. KI-Coding-Tools arbeiten deutlich besser mit TypeScript, weil sie aus den Typen ableiten können, was du meinst.

### Backend: Next.js Server Actions

Du brauchst keinen separaten Backend-Server. Next.js erlaubt dir, Funktionen zu schreiben, die garantiert auf dem Server laufen ("Server Actions"). Aus deinem Formular rufst du sie auf wie eine normale Funktion, intern wird daraus ein sicherer API-Call.

Für komplexere Fälle gibt es "Route Handlers" (klassische API-Endpunkte unter `/app/api/...`).

### Datenbank und Auth: Supabase

Supabase ist eine fertige PostgreSQL-Datenbank in der Cloud plus eingebautes Login-System plus File-Storage. Du klickst dir ein Projekt zusammen, bekommst zwei Keys (eine URL und einen API-Key) und kannst sofort lesen und schreiben.

Login mit Email-Magic-Link, Google oder GitHub ist in 10 Minuten eingebaut. Details dazu in `webapp-auth.md`.

### Hosting: Vercel

Vercel ist die Firma hinter Next.js. Du verbindest dein GitHub-Repo, jeder Push deployt automatisch. Eigene Domain ist ein Klick. Der kostenlose Tarif reicht für Prototyp und MVP problemlos.

### Package Manager: npm

Kommt mit Node.js automatisch. Andere Tools wie pnpm oder bun sind schneller, aber npm tut es und macht keine Probleme.

## Setup auf deinem Rechner

### Mac

```bash
# Homebrew installieren (falls nicht da)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.js installieren
brew install node

# Prüfen
node --version   # sollte v20 oder hoeher zeigen
npm --version
```

### Windows

Installiere Node.js direkt von der offiziellen Seite: `https://nodejs.org` (LTS-Version, einfach durchklicken). Danach in PowerShell oder im Terminal:

```powershell
node --version
npm --version
```

### Projekt anlegen

```bash
npx create-next-app@latest mein-projekt
cd mein-projekt
npm install @supabase/supabase-js @supabase/ssr
npm run dev
```

Im Browser auf `http://localhost:3000` und du siehst deine App.

## Production-Stack: später, wenn du wirklich wächst

Ab einem bestimmten Punkt willst du mehr Kontrolle. Du willst nicht von Vercels Preismodell überrascht werden, willst beliebig große Datenbanken, eigenes Mailing, eigene Auth-Logik. Dann sieht der Stack so aus, wie Ben Scheurer ihn selbst betreibt.

**Frontend bleibt gleich:** Next.js 15 mit App Router, Tailwind v4, TypeScript. Kein Umbau nötig.

**Backend:** Eigener Fastify-Server in TypeScript. Fastify ist ein schneller, moderner Node-Server. Er läuft als eigener Prozess neben Next.js und kümmert sich um alles, was nicht direkt zur UI gehört: Schwere Berechnungen, Hintergrund-Jobs, externe APIs.

**Datenbank:** PostgreSQL 16 selbst gehostet. Prisma als ORM (Object Relational Mapper), damit du in TypeScript statt SQL arbeitest.

**Auth:** Eigene Cookie-Sessions mit JWT, Passwörter mit Argon2id gehasht. Klingt nach Aufwand, ist aber ein einmaliges Setup von wenigen hundert Zeilen Code. Volle Kontrolle über Login-Flow, kein Vendor-Lock-in.

**Hosting:** Docker-Container, deployed via Dokploy auf einen Hetzner-Server. Traefik als Reverse-Proxy mit automatischen Let's-Encrypt-Zertifikaten. Image landet in der eigenen Registry `hub.sac.sh`. Kosten: ab 5 Euro im Monat für einen Hetzner-Server, der Hunderte Nutzer trägt.

## Migration: wann und wie?

**Wann migrieren?**

- Vercel-Rechnung wird größer als 50 Euro im Monat.
- Supabase-Limits werden eng (mehr als 500 MB DB, viele Dateien).
- Du brauchst Logik, die in Vercel-Functions nicht passt (lange Laufzeit, Hintergrund-Jobs, viele Webhooks).
- Du brauchst Custom-Auth-Flows, die Supabase nicht anbietet.

Bis dahin: bleib auf dem Workshop-Stack. Früher umziehen ist Premature Optimization und kostet dich Zeit, die du nicht hast.

**Wie migrieren?**

1. Datenbank zuerst. PostgreSQL-Dump aus Supabase, Import in eigenen Postgres. Prisma-Schema dazu.
2. Auth zweite Etappe. Nutzer-Tabelle übernehmen, Passwort-Reset-Flow einmal triggern, fertig.
3. Backend-Logik schrittweise aus Server Actions in Fastify überführen, eine Route nach der anderen.
4. Frontend bleibt fast unverändert, nur die API-Aufrufe zeigen jetzt auf den Fastify-Server.

Die Migration kann in ein, zwei Wochen ablaufen, wenn du sie sauber planst.

## Warum genau dieser Stack und nicht ein anderer

Du wirst auf YouTube, Twitter und in Reddit-Threads hundert andere Stacks empfohlen bekommen. T3, Remix, SvelteKit, Astro, Laravel, Ruby on Rails, Django, Phoenix. Alle gut. Trotzdem ist der Workshop-Stack der richtige für dich, aus drei Gründen.

**Eins: maximale Verbreitung.** Next.js ist mit Abstand das meistgenutzte React-Framework. Heißt: wenn du ein Problem hast, findet Google die Antwort. KI-Coding-Tools wie Claude, ChatGPT oder Cursor sind auf Next.js am besten trainiert und liefern dir bessere Code-Vorschläge.

**Zwei: kein Vendor-Lock-in beim Code.** Dein Next.js-Projekt läuft auch ohne Vercel, auf jedem Node-Server. Supabase nutzt PostgreSQL, dieselbe Datenbank, die du auch selbst betreiben kannst. Wenn du irgendwann umziehst, verlierst du keinen Zeile Code, du wechselst nur den Hosting-Anbieter.

**Drei: ein Sprach-Stack.** Frontend, Backend und Datenbank-Abfragen sind alle in TypeScript. Du musst nicht zwischen JavaScript, Python, SQL und Bash hin und her switchen. Für einen Solo-Gründer oder ein kleines Team eine massive Zeitersparnis.

## Was du nicht brauchst (noch nicht)

Häufige Versuchungen, die dich im Workshop nur ausbremsen:

- **Eigenes Design-System** (Shadcn, Radix, MUI). Tailwind reicht für den ersten Wurf, optisches Feintuning kommt nach Product-Market-Fit.
- **State-Management-Library** (Redux, Zustand, Jotai). React Hooks plus URL-State reichen für Prototypen.
- **GraphQL.** Server Actions und Supabase-Queries sind weniger Code für dasselbe Resultat.
- **Microservices.** Du hast einen Server, das ist genug für die nächsten zwei Jahre.
- **Eigene CI-Pipeline.** Vercel deployt bei jedem Push, das ist deine Pipeline.

## Nächster Schritt

Installiere Node.js, lege ein Next.js-Projekt an, registriere dich kostenlos bei Supabase und Vercel. Dann lies `webapp-auth.md` für den Login und `webapp-deploy.md` fürs Live-Schalten.