Deine erste App bauen

🔄 Kurzer Rueckblick: In der letzten Lektion hast du vier Prompting-Techniken gelernt: Spezifitaet, Context Layering, schrittweises Prompting und Research-Plan-Implement. Jetzt setzt du sie alle ein.

Theorie ist durch. Jetzt wird gebaut.

Diese Lektion fuehrt dich durch den Bau einer kompletten Web-Anwendung — vom Konzept zum funktionierenden Produkt — mit jeder Prompting-Technik aus der vorherigen Lektion.

Die Build-Reihenfolge

Jedes Vibe-Coding-Projekt folgt dieser Abfolge:

1. Konzept  → Was baust du? Fuer wen?
2. Layout   → Navigation, Seiten, Gesamtstruktur
3. Kern     → Hauptfeature (die eine Sache die die App tut)
4. Support  → Sekundaere Features (Auth, Einstellungen, Suche)
5. Polish   → Styling, Responsive Design, Animationen
6. Deploy   → Online stellen

Ueberspringe keine Schritte. Features vor dem Layout bauen heisst das Layout spaeter nochmal bauen. Polishing vor Features heisst nach Aenderungen nochmal polishen.

Schritt 1: Das Konzept definieren

Bevor du irgendeinen Prompt schreibst, beantworte drei Fragen:

• Was tut die App? (Ein Satz)
• Wer benutzt sie? (Konkrete Person, nicht “alle”)
• Was ist die minimale Version? (Streich alles was nicht essenziell ist)

Beispiel: “Ein Lesezeichen-Manager fuer Webentwickler der URLs mit Tags speichert und nach Tags durchsuchen laesst.”

Schritt 2: Das Layout bauen

Dein erster Prompt sollte die gesamte Struktur festlegen:

Baue eine Lesezeichen-Manager-App mit diesem Layout:

HEADER:
- App-Name "DevMarks" links
- Suchleiste in der Mitte
- "+ Lesezeichen"-Button rechts

SIDEBAR (links):
- Tag-Filterliste die alle Tags zeigt
- Klick auf einen Tag filtert die Lesezeichen

HAUPTBEREICH:
- Grid aus Lesezeichen-Karten
- Jede Karte zeigt: Titel, URL (gekuerzt), Tags als farbige Badges,
  Hinzufuegedatum
- Klick auf eine Karte oeffnet die URL in neuem Tab

MOBIL:
- Sidebar wird zum Hamburger-Menue
- Karten stapeln sich vertikal
- Suchleiste wandert unter den Header

Nutze ein sauberes, minimales Design mit weissem Hintergrund und
dezenten grauen Rahmen.

Testen. Browser-Groesse aendern. Funktioniert das mobile Layout? Fixe Probleme bevor du weitergehst.

Committen. Wenn du Cursor oder Claude Code mit Git nutzt: Committe dieses funktionierende Layout. Es ist dein sauberer Checkpoint.

✅ Quick Check: Du hast das Layout gebaut aber die Sidebar klappt auf Mobil nicht ein. Solltest du das jetzt fixen oder zu Features weitergehen? (Antwort: Jetzt fixen. Layout-Probleme potenzieren sich — jedes Feature das du auf einem kaputten Layout baust erzeugt mehr Arbeit spaeter. Erst das Fundament reparieren, dann darauf bauen.)

Schritt 3: Das Kern-Feature bauen

Das Kern-Feature ist die eine Sache die deine App koennen muss. Fuer einen Lesezeichen-Manager: Lesezeichen hinzufuegen und anzeigen.

Fuege die Moeglichkeit hinzu neue Lesezeichen zu erstellen:

Wenn der Nutzer "+ Lesezeichen" klickt:
1. Zeige ein Modal mit Feldern: URL, Titel, Tags (kommagetrennt)
2. Wenn eine URL eingefuegt wird, hole automatisch den Seitentitel
3. Tags sollen als farbige Badges im Eingabefeld erscheinen
4. Speichern-Button fuegt das Lesezeichen zum Grid hinzu
5. Abbrechen-Button schliesst das Modal

Speichere Lesezeichen im localStorage des Browsers.
Zeige sie als Karten im Hauptgrid, sortiert nach Datum (neueste zuerst).

Testen. 5-6 Lesezeichen hinzufuegen. Bleiben sie nach einem Page-Reload erhalten? Werden die Tags korrekt angezeigt?

Schritt 4: Support-Features hinzufuegen

Ein Feature pro Prompt. Zwischen jedem testen:

Feature: Tag-Filterung

Wenn der Nutzer auf einen Tag in der Sidebar klickt, filtere das
Hauptgrid um nur Lesezeichen mit diesem Tag zu zeigen. Markiere den
aktiven Tag. Fuege eine "Alle"-Option oben hinzu um alles zu zeigen.
Zeige die Lesezeichen-Anzahl neben jedem Tag.

Feature: Suche

Die Suchleiste im Header soll Lesezeichen in Echtzeit filtern waehrend
der Nutzer tippt. Durchsuche Titel, URL und Tags. Zeige "Keine Ergebnisse"
mit einem Vorschlag die Suche zu loeschen wenn nichts passt.

Jedes Feature bekommt seinen eigenen Prompt, seinen eigenen Test und (mit Git) seinen eigenen Commit.

Schritt 5: Polish

Erst wenn alles funktioniert:

Polishe den Lesezeichen-Manager:
- Fuege eine sanfte Einblend-Animation hinzu wenn neue Karten erscheinen
- Hover-Effekte auf Karten (dezenter Schatten + leichtes Anheben)
- Verbessere das Farbschema: Indigo fuer primaere Aktionen,
  Warmgrau fuer Hintergruende
- Leerer Zustand: Wenn es keine Lesezeichen gibt, zeige eine
  freundliche Nachricht mit "Fuege dein erstes Lesezeichen hinzu"-Button
- Alle Transitionen 200ms

Die Build-Zeitleiste

Fuer eine einfache App wie diesen Lesezeichen-Manager:

Das ist die Power von Vibe Coding. Die App ist nicht weniger funktional — sie wird schneller gebaut weil KI die Implementierung uebernimmt waehrend du die Entscheidungen triffst.

Key Takeaways

• Folge der Build-Reihenfolge: Layout → Kern → Support → Polish → Deploy
• Ein Feature pro Prompt — zwischen jedem testen
• Erstelle Git-Checkpoints bevor du jedes neue Feature hinzufuegst
• Fixe Layout-Probleme bevor du Features darauf baust
• Polish kommt zuletzt — einfach hinzuzufuegen und stoerend zu debuggen
• Die meisten Vibe-Coding-Tools bieten One-Click-Deployment

Up Next

In der naechsten Lektion lernst du KI-generierten Code zu debuggen — denn Dinge werden kaputtgehen, und schnelles Fixen ist was Vibe Coding wirklich produktiv macht.