Claude Code für Einsteiger: So entwickelst du deine erste Web-App

In diesem Artikel entwickeln wir zusammen eine komplette Web-App, und zwar ein Kundenportal mit echtem Login, echter Datenbank und einem Download-Bereich für Dateien. Am Ende ist das Ganze unter einer echten Domain live im Internet erreichbar. Eine einzige Zeile Code musst du dafür nicht selbst schreiben.

Der Artikel richtet sich an absolute Einsteiger. Ich erkläre jeden Baustein so, dass du ihn ohne Vorwissen nachvollziehen kannst.

Was wir entwickeln: ein Kundenportal

Stell dir vor, du führst eine Designagentur. Deine Kunden fragen ständig per E-Mail nach: Wie weit ist mein Projekt? Wann kommt das Logo? Könnt ihr mir die Dateien nochmal schicken?

Dieses Problem haben viele Dienstleister. Genau dafür entwickeln wir ein Kundenportal mit zwei Rollen:

Kunden können:

• ausschließlich ihre eigenen Projekte und Dateien sehen
• den Projektfortschritt verfolgen (Fortschrittsbalken, aktuelle Phase)
• Dateien herunterladen, kommentieren und final freigeben
• ihre eigenen Profildaten verwalten

Du als Admin kannst:

• alle Projekte sehen, neue anlegen und Kunden zuordnen
• Fortschritt und Projektphase pflegen
• Dateien zu einem Projekt hochladen
• Kommentare und Freigaben deiner Kunden einsehen

Die Bausteine: Woraus besteht so eine App?

Bevor wir loslegen, lass uns kurz durchgehen, aus welchen Teilen die App besteht und welche Tools wir dafür brauchen.

1. Coding Agent: Claude Code

Claude Code übernimmt das komplette Programmieren. Er richtet sowohl die Benutzeroberfläche als auch das Backend mit Datenbank und Login ein. Wir bedienen das Ganze über die Claude Desktop App, die du dir auf claude.ai herunterladen kannst.

Du kannst übrigens auch andere Coding Agents nutzen, zum Beispiel Codex von OpenAI. Das Vorgehen ist im Prinzip dasselbe.

2. Frontend: Next.js

Das Frontend ist die Benutzeroberfläche, in der sich deine Nutzer später bewegen. Wir verwenden dafür Next.js. Das ist eines der verbreitetsten Frameworks, sprich: ein Baukasten für Benutzeroberflächen. Es ist kostenlos und wird auch von sehr großen Firmen eingesetzt.

3. Backend: Supabase

Damit die Daten aus deiner App irgendwo gespeichert werden, brauchst du ein Backend. Wir nutzen Supabase, weil es gleich mehrere Themen abdeckt:

• Datenbank: Hier werden deine Daten strukturiert abgelegt.
• Authentifizierung: Nutzer können sich registrieren und einloggen.
• File Storage: Hier landen hochgeladene Dateien wie Bilder, Logos oder Dokumente.

4. Code-Speicher: GitHub

Claude Code entwickelt erstmal lokal auf deinem Rechner. Alle Code-Dateien landen also in einem Ordner bei dir. Damit wir die App später auf einem Server bereitstellen können, laden wir den Code zu GitHub hoch.

GitHub ist das Standardwerkzeug von Entwicklern. Im Team ist es der zentrale Ablageort für den Code. Für dich ist vor allem ein Punkt wichtig: die Versionskontrolle. Du erstellst während der Entwicklung immer wieder Speicherstände, zu denen du jederzeit zurückkannst. Wenn Claude Code sich mal in einer Fehlerschleife verrennt, gehst du einfach zu einem alten Stand zurück.

5. Hosting: Node.js-Hosting bei Hostinger

Damit deine Nutzer die App im Internet aufrufen können, brauchst du einen Webserver. Ich nutze dafür ein Node.js-Hosting bei Hostinger. Wichtig ist vor allem, dass dein Hosting Node.js unterstützt (das braucht Next.js) und sich mit GitHub verbinden lässt.

So spielt alles zusammen

• Claude Code entwickelt die App.
• Die App besteht aus Next.js (Oberfläche) und Supabase (Backend). Next.js ruft die Daten aus Supabase ab und zeigt sie an.
• Den aktuellen Stand speichern wir regelmäßig auf GitHub.
• Hostinger holt sich den Code von GitHub und stellt die App im Internet bereit.

Schritt 1: Claude Desktop App vorbereiten

Öffne die Claude Desktop App und wechsle oben in den Tab Code. Bevor du den ersten Prompt schreibst, bereiten wir noch ein paar Dinge vor.

Connectors einrichten

Claude hat sogenannte Connectors. Damit verknüpfst du externe Systeme, mit denen Claude dann arbeiten kann. Du findest sie im Menü unter Anpassen → Konnektoren → Hinzufügen → Connectors durchsuchen.

Wir richten zwei Connectors ein:

Context7: Stellt aktuelle Dokumentation zu allen möglichen Frameworks bereit. Claude wurde irgendwann in der Vergangenheit trainiert, sein Wissen über Supabase kann also veraltet sein. Über Context7 schaut er in der aktuellen Doku nach. Die Registrierung ist kostenlos.

Supabase: Damit kann Claude dein Backend direkt einrichten, also Tabellen, Login, Dateispeicher und Sicherheitsregeln. Vorher brauchst du einen (kostenlosen) Supabase-Account. Beim Verbinden wählst du die Organisation aus, die du in Supabase angelegt hast.

Projektordner, Modell und Modus

1. Projektordner anlegen: Klick auf das Ordner-Symbol und erstelle einen neuen Ordner für das Projekt. Hier landen alle Code-Dateien. Claude hat nur Zugriff auf diesen Ordner.
2. Modell wählen: Ich arbeite fast immer mit dem stärksten allgemein verfügbaren Opus-Modell. Den Denkaufwand lasse ich auf hoch.
3. Planmodus aktivieren: Stell den Modus unten links von Manuell auf Plan. So sprichst du mit Claude erst über deine Idee, bevor er loslegt. Er stellt dir Rückfragen, um deine Anforderungen besser zu verstehen.

Schritt 2: Der erste Prompt

Hier ist der Prompt, den ich für das Kundenportal verwendet habe. Du kannst ihn als Vorlage nehmen und an deinen Anwendungsfall anpassen:

Entwickle ein Kundenportal für meine Designagentur "Sprogis Media Design Agency"
mit Next.js und Supabase als Backend.

Rollen: Admin (ich) und Kunde. Beide loggen sich mit E-Mail und Passwort ein (Supabase Auth).

Kunden-Features:
- Kunden sehen ausschließlich ihre eigenen Projekte und Dateien
- Dashboard pro Projekt mit Fortschrittsbalken und aktueller Phase
- Download-Bereich; Kunden können Assets kommentieren und final freigeben
- Profilseite zum Verwalten der eigenen Daten

Admin-Features:
- Alle Projekte sehen, neue Projekte anlegen und einem Kunden zuordnen
- Fortschritt und aktuelle Phase pro Projekt pflegen
- Dateien/Assets zu einem Projekt hochladen
- Kommentare und Freigabestatus der Kunden einsehen

Technik:
- Nutze den verbundenen Context7-Connector, um aktuelle Dokumentation abzurufen
- Nutze den Supabase-Connector, um Tabellen, Authentifizierung, Storage und Security Policies einzurichten
- Alle Secrets ausschließlich über Umgebungsvariablen
- Lege einen Admin-Account und einen Testkunden mit Beispielprojekt an
- Kein Zahlungs- oder Rechnungsmodul

Design: Orientiere dich am angehängten Screenshot (Farben und Schriften als Inspiration).

Stell Rückfragen, falls Anforderungen unklar sind, damit wir ein gemeinsames Verständnis der App haben.

Zwei Dinge sind dabei wichtig:

• Lass dir Rückfragen stellen. Sonst entwickelt Claude Dinge, die du gar nicht wolltest.
• Gib Design-Referenzen mit. Ich habe mir auf Dribbble ein Design als Inspiration für Farben und Schriften rausgesucht und den Screenshot einfach angehängt. Claude kann genauso gut mit Designsystemen oder Brand Guides arbeiten.

Rückfragen und Plan

Claude kam bei mir direkt mit ein paar Fragen zurück, zum Beispiel:

• Soll ein neues Supabase-Projekt angelegt werden? → Ja.
• Wie bekommen Kunden ihre Login-Daten? → Der Admin legt Kunden im Portal an.
• Wie läuft das Hosting? → Hostinger mit Node.js.

Danach erstellt Claude einen Plan mit Datenmodell (Tabellen für Profile, Projekte, Assets, Kommentare), Sicherheitsregeln, App-Struktur, Design und Umsetzungsschritten.

Ein Begriff, der dir dort begegnen wird: RLS Policies (Row Level Security). Das sind Regeln in der Datenbank, die sicherstellen, dass jeder Nutzer nur seine eigenen Daten sieht und nicht die von anderen Kunden.

Wenn dir etwas am Plan nicht passt, kannst du Stellen markieren und kommentieren. Claude überarbeitet sie dann. Passt alles, klickst du auf Akzeptieren und wählst den Auto-Modus. Dann holt sich Claude unkritische Berechtigungen selbst und fragt nur bei kritischen Schritten nach. Da er ohnehin nur Zugriff auf deinen Projektordner hat, ist das für mich in Ordnung.

Schritt 3: Claude entwickelt und testet die App

Bei mir hat Claude rund 38 Minuten gearbeitet. Das Interessante dabei: Er hat die App zwischendurch auf einem lokalen Webserver gestartet und sie im integrierten Browser selbst durchgetestet. Er hat sich als Admin und als Testkunde eingeloggt, Projekte angelegt und sogar geprüft, ob ein eingeloggter Kunde auf die Daten anderer Kunden zugreifen kann. Konnte er nicht, die Sicherheitsregeln haben also gegriffen.

Claude testet die Funktionalität also schon, bevor du die erste Version überhaupt zu Gesicht bekommst.

Die App lokal ausprobieren

Starte die Vorschau über den Play-Button oder bitte Claude einfach, die App zu starten. Im Browser erreichst du sie unter localhost:3000.

Als Admin siehst du dein Dashboard mit allen Projekten und Kunden. Ich habe ein neues Projekt angelegt („Rebranding 2026"), einem Kunden zugeordnet, Phase und Fortschritt gesetzt und eine Datei hochgeladen. Als Kunde konnte ich die Datei dann herunterladen, kommentieren und freigeben.

Designmäßig war das Ergebnis noch nicht ganz mein Fall. Das lässt sich aber mit ein, zwei weiteren Prompts schnell anpassen.

Was tun bei Fehlermeldungen?

Beim ersten Datei-Upload kam bei mir eine Fehlermeldung. Das ist ganz normal und passiert dir garantiert auch. Mein Vorgehen:

1. Den kompletten Text der Fehlermeldung markieren und kopieren.
2. In Claude Code einfügen, zum Beispiel: „Der Upload von Assets schlägt fehl mit folgender Fehlermeldung: …"
3. Claude behebt den Fehler und testet anschließend selbst, ob der Fix funktioniert.

Ein Blick in die Datenbank

In Supabase siehst du, was im Hintergrund passiert: Unter Database liegen die Tabellen (Profile, Projekte, Assets, Kommentare), unter Storage die hochgeladenen Dateien. Du musst hier nichts anfassen, aber es hilft, einmal gesehen zu haben, wo deine Daten liegen.

Schritt 4: Claude ein Gedächtnis geben mit /init

Wenn du eine neue Session startest, fängt Claude bei null an. Er kennt deine App erstmal nicht und muss sich alles neu anschauen.

Dafür gibt es die Datei CLAUDE.md im Projektordner. Sie wird beim Start jeder neuen Session automatisch in Claudes Kontext geladen. Mit dem Befehl

/init

dokumentiert Claude alles Wichtige zu deinem Projekt in dieser Datei, fachlich wie technisch. In der nächsten Session weiß er dann direkt, worum es geht.

/init ist einer von knapp 90 eingebauten Befehlen. Welche ich sonst noch jeden Tag nutze, zeige ich dir in Claude Code Befehle: Diese 6 Slash Commands nutze ich jeden Tag.

Schritt 5: Code auf GitHub speichern

Bisher liegt alles nur lokal auf deinem Rechner. Jetzt speichern wir den Code auf GitHub, als Backup und als Grundlage für das Hosting.

1. Erstelle einen kostenlosen Account auf GitHub.
2. Lege ein neues Repository an (quasi ein Projektordner in der Cloud), z. B. „kundenportal".
3. Stell die Sichtbarkeit auf Private, damit nur du den Code sehen kannst.
4. Kopiere die Adresse des Repositorys und gib sie Claude mit: „Ich habe ein neues GitHub-Repository angelegt und möchte, dass du dieses Projekt darin speicherst."

Du kannst das Repository übrigens auch direkt von Claude anlegen lassen. Ich finde es aber sinnvoll, die GitHub-Oberfläche einmal selbst gesehen zu haben.

Falls Claude Code noch nicht mit GitHub verbunden ist, führt er dich durch die Anmeldung. Danach fragt er, ob er einen Commit erstellen darf. Ein Commit ist ein Speicherstand. Jeder Commit ist ein Punkt, zu dem du später zurückkehren kannst.

Wichtig: Deine API-Keys bleiben lokal

Claude lädt die Datei .env.local bewusst nicht zu GitHub hoch. Darin liegen die API-Keys, also die Zugangsdaten, mit denen deine App mit Supabase kommuniziert. Die sind sensibel und gehören nicht in einen Cloud-Speicher. Wir hinterlegen sie gleich separat beim Hosting.

Schritt 6: Die App live bringen

Jetzt kommt der Schritt, mit dem deine App für alle erreichbar wird.

Entscheidend ist hier die GitHub-Integration: Das Hosting ist direkt mit deinem Repository verbunden. Jedes Mal, wenn du mit Claude Code eine Änderung entwickelst und sie zu GitHub hochlädst, wird die App automatisch neu veröffentlicht. Du musst dafür nichts weiter tun.

App mit GitHub verbinden

1. Im Hostinger-Dashboard unter Websites → Website hinzufügen wählst du Web-App mit GitHub.
2. Für den Anfang reicht eine temporäre Domain. Deine eigene Domain kannst du später verbinden.
3. Verbinde einmalig deinen GitHub-Account und wähle dein Repository aus.
4. Die Konfiguration ist vorausgefüllt. Klick auf Bereitstellen. Hostinger lädt den Code und baut die App.

Supabase verbinden

Im Dashboard klickst du bei Datenbank auf Verbinden, wählst Supabase, gibst Hostinger Zugriff auf deine Organisation und wählst die bestehende Datenbank aus. Die Einrichtung der Tabellen hat Claude ja schon erledigt.

Typischer Stolperstein: Namen der Umgebungsvariablen

Bei mir kam nach dem ersten Deployment ein Internal Server Error. Die Ursache: Die Umgebungsvariablen hatten bei Hostinger andere Namen als in meiner lokalen .env.local.

Die Lösung: Vergleiche die Namen und passe sie bei Hostinger an. In meinem Fall:

• SUPABASE_URL → NEXT_PUBLIC_SUPABASE_URL
• Der Anon-Key → NEXT_PUBLIC_SUPABASE_ANON_KEY

Allgemein gilt: Schau dir bei Fehlern die Laufzeitprotokolle im Hosting an und gib den Fehler an Claude weiter. Er sagt dir dann, was zu tun ist.

Service Role Key für das Anlegen von Kunden

Damit du als Admin neue Kundenaccounts anlegen kannst, braucht die App eine spezielle Berechtigung in Supabase, den Service Role Key. Den kann Claude nicht für dich erstellen. Er hat aber schon einen Platzhalter in der .env.local vorbereitet und dir Bescheid gesagt.

1. In Supabase unter Project Settings → API Keys den Secret Key kopieren.
2. Bei Hostinger als Umgebungsvariable SUPABASE_SERVICE_ROLE_KEY hinzufügen.
3. Änderungen anwenden. Die App wird neu gebaut.

Danach konnte ich im Live-Portal Kunden anlegen, und der neue Nutzer tauchte direkt in Supabase unter Authentication auf.

Schritt 7: Änderungen gehen automatisch live

Zum Abschluss habe ich Claude gebeten: „Kannst du bitte einen Light Mode in die App einarbeiten?"

Danach nur noch:

Führe einen Commit für alle Änderungen durch und push das Ganze zu GitHub.

Im Hostinger-Dashboard unter Einsätze siehst du, dass der neue Commit direkt übernommen wurde. Ein paar Sekunden später war der Light Mode in der Live-App verfügbar.

Das ist der Workflow, mit dem du ab jetzt arbeitest: lokal mit Claude entwickeln → zu GitHub pushen → Hostinger veröffentlicht automatisch.

Ehrliche Einordnung: Wann dieser Ansatz an seine Grenzen kommt

Dieses Vorgehen ist super, wenn du für dich oder dein Team eine kleine App mit klar begrenztem Umfang entwickeln willst.

Wenn dein Projekt größer wird, wirst du aber irgendwann typische Probleme feststellen:

• Claude macht Änderungen an Stellen, an denen er sie nicht machen soll.
• Er wird insgesamt unzuverlässiger.
• Du landest immer wieder in Fehlerschleifen, aus denen er nicht mehr herauskommt.

Das sind klassische Anzeichen dafür, dass dein Projekt zu groß und unübersichtlich geworden ist und keine nachhaltige Struktur hat. Wenn du Anwendungen entwickeln willst, die du an Kunden verkaufst, würde ich weg vom sogenannten Vibe Coding hin zu einem AI-Engineering-Ansatz gehen. Dabei arbeitest du mit einem System, das einen professionellen Entwicklungs-Workflow durchläuft.