Polieren und auslieferbereit machen
Aus funktionierendem Code ein fertiges Produkt machen
⏱ ca. ~9 Min
01 · Lesen
Dein Spiel läuft. Zwei Spieler finden einander, spielen in Echtzeit Tic-Tac-Toe, und Disconnects werden sauber behandelt. Aber funktionierend und fertig sind nicht dasselbe.
Ein fertiges Projekt hat ein sauberes UI, ein README, das erklärt, was es ist, keine Debug-Logs im Code und eine ordentliche Git-Historie. Das ist der Unterschied zwischen einem Side-Project und einem Portfolio-Stück — etwas, das du tatsächlich einer anderen Entwicklerin, einem anderen Entwickler oder einer Recruiterin zeigen würdest.
In dieser Lektion geht es um die letzten 10 Prozent, die die ersten 90 Prozent zum Glänzen bringen.
Kernpunkte
- Funktionierender Code und fertiger Code sind nicht dasselbe
- Polieren heißt: sauberes UI, README, keine Debug-Logs, ordentliches Git
- Das README ist das Erste, was jemand von deinem Projekt sieht
- Genau das trennt ein Side-Project von einem Portfolio-Stück
02 · Prompt-Vorlage
Bitte Claude, das Spiel optisch zu polieren. Gib konkretes Feedback zu allem, was sich grob anfühlt.
Verbessere das UI des Tic-Tac-Toe-Spiels. Anforderungen: (1) Wenn Symbole in den Zellen erscheinen, soll es eine sanfte Übergangs-Animation geben. (2) Wenn jemand gewinnt, hebe die drei Gewinnzellen mit einer anderen Hintergrundfarbe hervor. (3) Füge einen visuellen Hinweis ein, wer dran ist — zum Beispiel den Status-Text pulsieren lassen oder die Farbe auf das Symbol des aktuellen Spielers ändern. (4) Während der Suche nach einem Gegner soll der Find-Game-Button deaktiviert sein und ein Loading-Spinner oder eine Animation erscheinen. (5) Sorg dafür, dass das Spiel auch auf dem Handy gut aussieht — das Brett soll auf kleinen Bildschirmen automatisch skalieren.
03 · Prompt-Vorlage
Jedes Projekt braucht ein README. Bitte Claude, eines zu schreiben, das erklärt, was das Projekt ist, wie man es startet und welche Technologien dahinterstecken.
Bau mir eine README.md für mein Tic-Tac-Toe-Projekt. Inhalt: (1) Titel und ein Einzeiler. (2) Ein Abschnitt 'How to Play' mit dem Spielablauf (Gegner finden, abwechselnd ziehen, Sieg/Unentschieden). (3) Ein Abschnitt 'Tech Stack' mit Node.js, Express, Socket.io und reinem HTML/CSS/JS. (4) Ein Abschnitt 'Run Locally' mit den Schritten: klonen, npm install, node server.js, localhost:3000 öffnen. (5) Ein Abschnitt 'How It Works' mit einer kurzen Erklärung der Client-Server-Architektur und der WebSocket-Kommunikation. Bitte halt es knapp — niemand liest ein 500-Zeilen-README.
04 · Checkliste
Geh diese Auslieferungs-Checkliste durch. Jeder Punkt unterscheidet ein Hobby-Projekt von einem professionellen.
- Alle Debug-console.log-Statements entfernt (nur die Connect-/Disconnect-Logs in server.js bleiben)
- Das Spiel-UI sieht sauber aus — keine überlappenden Elemente, kaputten Layouts oder Platzhalter-Texte
- Das README erklärt, was das Projekt ist und wie man es startet
- Eine .gitignore-Datei angelegt, die node_modules/ ausschließt
- Keine hartcodierten localhost-URLs im Code — mit relativen Pfaden läuft es auch deployed
- Nach allen Polish-Änderungen den gesamten Spielablauf noch einmal getestet
05 · Echte Übung
Initialisiere ein Git-Repository, mach den ersten Commit und push zu GitHub. Das ist der Workflow, den du in Level 4 gelernt hast.
06 · Quiz
Warum solltest du vor dem Ausliefern die Debug-console.log-Statements entfernen?
- Sie verlangsamen den Server spürbar
- Sie geben internen Zustand für alle preis, die die DevTools öffnen, machen die Server-Logs unruhig und erschweren das Finden echter Probleme
- JavaScript erlaubt im Production-Modus keine console.log
- Socket.io kollidiert mit console.log
07 · Ausfüllen
Die _____ -Datei sagt anderen Entwicklerinnen und Entwicklern, was dein Projekt ist, wie man es installiert und wie man es startet.
Andere Lektionen aus diesem Kapitel
⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.
※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.