Eine Schritt-für-Schritt-Übung, mit der du deine erste eigene App baust, lokal auf deinem Rechner, allein mit Sprache. Du sagst der KI in normalen Worten, was du willst, sie richtet ein, du schaust zu und verstehst nebenbei, wie die Teile zusammenspielen. Kein Programmier-Vorwissen nötig.
Einen Rechner, einen der Editoren von oben, und eine kleine Idee, was die App zeigen soll. Es reicht eine einzige Liste, die du im Blick behalten willst. Wenn dir nichts einfällt, nimm eine simple Notiz-Liste als Übung.
Richte mir ein leeres Projekt mit React und Tailwind ein, das lokal läuft. Ich habe noch nichts installiert. Führ mich Schritt für Schritt durch und erklär jeden Schritt einfach.
Das ist dein Fundament: ein sauberes, leeres Projekt, auf dem alles Weitere aufbaut.
Starte das jetzt auf einem kleinen Server. Ich will die App im Browser auf localhost sehen. Sag mir genau, was ich eingeben muss und unter welcher Adresse ich sie öffne.
Localhost ist deine App auf deinem eigenen Rechner. Nur du siehst sie, ideal zum Ausprobieren.
Einfach und lokal: Markdown
Die Daten sollen erstmal einfach als Markdown-Dateien liegen, kein Server, keine Datenbank. Zeig mir, wo ich sie ablege und wie die App sie liest.
Echte Datenbank, lokal: SQLite
Ich will eine echte Datenbank, aber komplett lokal auf meinem Rechner. Richte mir SQLite ein, eine einzelne Datei. Sag mir, was ich dafür zusätzlich brauche, und halte es so einfach wie möglich.
Cloud, fürs Live-Gehen: Supabase
Ich brauche eine Datenbank, die auch online funktioniert, wenn ich die App teile. Richte mir Supabase ein und verbinde es mit der App. Erklär mir bei jedem Schritt, was ich in Supabase klicken muss.
Drei Wege, dieselbe Idee, von einfach zu echt. Markdown ist der schnellste, komplett lokale Start. SQLite ist eine echte Datenbank, auch lokal, braucht aber einen kleinen Extra-Teil. Supabase liegt in der Cloud und ist der Weg, wenn die App online mit anderen laufen soll. Fang mit Markdown an, wechsle später.
Bau mir ein kleines, ruhiges Interface mit React und Tailwind, das diese Daten anzeigt. Klar und aufgeräumt, kein Schnickschnack.
Jetzt wird es sichtbar. Sag der KI, was du sehen willst, und schau live auf localhost zu, wie es entsteht.
Richte mir Git im Projekt ein, damit ich Stände speichere und zurück kann. Erklär mir, wie ich einen neuen Stand sichere. Wenn ich später ein Backup online will, zeig mir GitHub.
Git speichert deine Stände lokal, du kannst jederzeit zurück. GitHub ist nur Git in der Cloud, das brauchst du erst als Backup oder wenn du teilst und deployst.
Deploy das über Vercel, ich will eine öffentliche URL, die ich teilen kann. Führ mich durch die Verbindung von GitHub zu Vercel.
Vercel macht aus deinem lokalen Stand eine echte Web-Adresse. Einmal verbunden, geht jeder neue Stand automatisch live.
Ich mache morgen weiter. Sag mir Schritt für Schritt, wie ich das Projekt wieder öffne und den localhost neu starte.
Der Trick, an dem die meisten hängen bleiben: ins Projekt wechseln, Dev-Server neu starten, fertig. Einmal gemacht, machst du es im Schlaf.
Erklär mir das einfacher, ohne Fachbegriffe.
Zeig mir genau den Befehl, den ich eingeben soll.
Ich hänge bei diesem Schritt fest, was mache ich jetzt genau?
Geh einen Schritt zurück und mach kleinere Schritte.
Nächster Schritt
App läuft? Jetzt bau dir eigene, wiederverwendbare AI-Skills darauf.
Warum das Ganze
Wer einmal selbst eine App lokal aufsetzt, versteht, was hinter den Tools steckt, und ist nicht mehr auf fertige Baukästen angewiesen. Du behältst die Kontrolle über dein Ergebnis und kannst es später mit echten Werkzeugen füllen.
| Baustein | Wofür |
|---|---|
| Lokale App | Dein Projekt auf deinem Rechner, hier entsteht alles. |
| Frontend | Die Oberfläche, die du und andere sehen und bedienen. |
| Server | Nimmt Anfragen an und liefert Daten, das Hinterzimmer. |
| Datenbank | Hält deine Daten geordnet und wiederauffindbar. |
| Git | Speichert Versionsstände, du kannst zurück. Geht auch rein lokal. |
| GitHub | Git in der Cloud: Backup und Team-Ort. Optional, kein Muss. |
| Vercel | Macht aus dem Projekt eine öffentliche Web-Adresse. |
| Was | Lokal (dein Rechner) | Cloud (im Netz) |
|---|---|---|
| Wo es läuft | localhost | Vercel |
| Daten | Markdown oder SQLite | Supabase |
| Versionen | Git im Projektordner | GitHub |
| Wer es sieht | nur du | jeder mit dem Link |
Das hier ist deine Werkstatt: eine laufende App, die du deployen kannst. Im nächsten Schritt füllst du sie mit echten Tools und den passenden Prompts. Genau das zeigt das Handbuch.