Cursor Your Dream, Teil 1: Wie Sie von der Produktidee zum ersten Prompt wechseln

Für wen ist dieser Artikel? Gründer, die es gewohnt sind, sich auf Entwicklungsteams zu verlassen, aber deren derzeitige Ressourcen oder Budgets einige Projekte jahrelang in die Schublade gezwungen haben. Anfänger, die sich nicht sicher fühlen, die erste Version ihres Produkts zu kodieren und nicht das Budget haben, um Entwickler einzustellen. Startups, die versuchen, eine Runde zu erhöhen, nur um einen Prototyp oder MVP zu bauen. Was macht dieses Material anders? Ich bin kein Programmierer, und ich schreibe dies mit Lesern im Auge, die keinen technischen Hintergrund haben (obwohl eine technische Denkweise definitiv hilft). In den letzten sechs Monaten bin ich von keinem Code schreiben bis hin zu zwei vollwertigen Produkten gegangen. Jeder dieser Dienste umfasst 30 bis 40 Datenbanktabellen, etwa 50 Komponenten und ungefähr 100.000 Zeilen Code. Der erste Dienst integriert sich mit OpenAI, um nutzergenerierten Inhalten Sinn zu geben.Es verwendet eine Vektordatenbank, Embeddings und Operationen, die um sie herum gebaut wurden. Der zweite Service umfasst ein internes Buchhaltungssystem mit doppelter Buchhaltung, idempotent-Operationen und ein integriertes Zahlungssystem für die Verarbeitung von Online-Zahlungen. Aber dieses Material zeigt, dass es möglich ist, ein echtes Produkt zu bauen, ohne die ersten Jahre des Lernens von Programmiersprachen zu verbringen. Sie müssen sich den Code immer noch ansehen, ihn gelegentlich manuell bearbeiten und die Dinge unter Kontrolle halten – aber Sie können es tun. Introduction Einführung Die Idee der vollautomatisierten Entwicklung ist derzeit sehr beliebt: Beschreiben Sie ein Produkt in Text und erhalten Sie eine funktionierende Anwendung. Aber wenn wir ein Produkt bauen, um reale Hypothesen zu testen, sind die Erwartungen anders.Wir wollen richtige UI / UX, gute Leistung, Caching, Skalierbarkeit und die Fähigkeit für echte Entwickler, später mit diesem Code zu arbeiten. Aus meiner Erfahrung sind selbst starke Modelle wie Opus mit Backend-Logik und Datenbankstruktur ziemlich gut zurecht, aber sie kämpfen viel mehr mit Frontend-Architektur. Es gibt hier keine Magie: Wenn selbst das Opus in meinem Cursor das Frontend verwirren kann, wird das gleiche bei jedem anderen Produkt passieren, das auf LLMs gebaut wurde. In dieser Serie benutze ich einen anderen Ansatz: eine IDE mit integrierten KI-Agenten.Die KI hilft beim Schreiben von Code und Planen von Aufgaben, aber die Architektur und die Schlüsselentscheidungen bleiben unter menschlicher Kontrolle. Warum habe ich mich für Cursor entschieden? Einfach, weil ich gelesen habe, dass es auf dem beliebten VS-Code-Editor gebaut wurde. Es schien eine vernünftige Wahl zu sein. wäre schlimmer; in der Praxis wird das Ergebnis ungefähr dasselbe sein, da die Qualität der Lösung hauptsächlich vom verwendeten Modell abhängt. Die Antigravitation Die Geschichte begann im Sommer des Als ich mit Eine Idee, die mir schon fast in den Kopf kam. : a , wo Benutzer Empfehlungen basierend auf Ähnlichkeiten in ihren persönlichen Bewertungen erhalten (Restaurants, Hotels, Länder, Hobbys, im Grunde alles). 2025 DeepSeek 10 years social network of preferences Lassen Sie uns es bauen. Wir sollten Next.js verwenden. Lassen Sie uns es bauen. Wir sollten Next.js verwenden. Lassen Sie uns es bauen. Wir sollten Next.js verwenden. Drei Monate später stellte ich mich vor, das Produkt dem oberen Management eines großen Unternehmens zu präsentieren, und sie waren diejenigen, die mich bat, es zu tun. Was lustig ist, ist, dass es mir trotz 20 Jahren als Gründer in der IT noch nie passiert war. Vor kurzem brachte ich auch ein anderes lang verzögertes Projekt zum Start, eines, das seit Jahren in einem Ordner sitzt.Ich habe immer davon ausgegangen, dass es zu komplex und teuer zu bauen wäre, und das Thema selbst fühlte sich riskant genug an, dass ich kein Geld darin investieren wollte. In dieser Serie werde ich die gesamte Erfahrung teilen: echte Hinweise, Konfigurationen und Fallstricke. Aber bevor wir weitergehen, müssen wir die wichtigste Frage beantworten: Sollten Sie das auch mal ausprobieren? Sollten Sie das auch mal ausprobieren? Kurze Antwort - Wenn Sie diese Begriffe gut verstehen: yes Frontend Backend Datenbanken HTML Struktur CSS Styling JavaScript Verhalten Grundlegende React Konzepte Wenn diese Ideen für Sie schon sinnvoll sind, können Sie sich frei zum Abschnitt "Wahl eines Rahmens" bewegen. Wenn diese Ideen für Sie schon sinnvoll sind, können Sie sich frei zum Abschnitt "Wahl eines Rahmens" bewegen. Wenn diese Begriffe unbekannt klingen, ist es besser, sich einen Moment zu nehmen Was folgt, wird sich nicht wie beim Scrollen in Social Media anfühlen, aber denken Sie darüber nach: Diese Reise hat mich ungefähr gerettet Unternehmer einstellen und ein Team aufbauen. understand them now $300,000 and a couple of years of development Frontend gegen Backend In einfachen Worten, die Was der Nutzer sieht: frontend Eine Website in einem Browser Eine mobile Anwendung Browser Erweiterung jede Schnittstelle, bei der Benutzer auf Schaltflächen klicken oder Informationen lesen Die ist der Teil des Systems, der auf Servern irgendwo im Internet läuft. backend Es geht um: Datenverarbeitung Authentifizierung Geschäftslogik Kommunikation mit Datenbanken Wenn ein Benutzer auf eine Schaltfläche klickt, sendet das Frontend eine Anfrage an das Backend. Die Interaktion sieht ungefähr so aus: User → Frontend → Backend → Database → Backend → Frontend → User In der Praxis interagiert das Frontend mit dem Backend durch : spezielle URLs, an die das Frontend Anfragen sendet: API routes /api/articles /api/login /api/create-article Wenn das Frontend eine dieser Adressen anruft, führt der Server den erforderlichen Code aus: Überprüfen Sie den Benutzer Sie wollen die Datenbank Verarbeiten Sie die Daten und das Ergebnis zurückgibt. Zum Beispiel kann das Frontend eine Anfrage wie diese senden: GET /api/articles?author_id=535 Das Backend erhält diese Anfrage, holt die Artikel aus der Datenbank ab und gibt sie an das Frontend zurück. Was ist eine Datenbank? Eine Datenbank speichert die von der Anwendung verwendeten Informationen. Wenn Sie Excel oder Google Sheets verwendet haben, ist das Konzept sehr ähnlich. Jeder Tisch ist wie ein Tabellenblatt. tables Users Table id name email 1 Alice alice@example.com 2 Jack jack@example.com 1 Alice von alice@example.com 2 Jack ist von Jack@example.com Articles Table id name email 1 1 First article 2 1 Another article 3 2 Jack's article 1 1 Erster Artikel 2 1 Ein weiterer Artikel 3 2 Artikel von Jack In diesem Beispiel kann ein Benutzer mehrere Artikel erstellen. Diese einfache Struktur der bildet die Grundlage der meisten Software-Systeme.In Ihrem eigenen Dienst kann es Auch wenn es momentan so aussieht, als gäbe es nur drei. related tables 30–50 tables HTML: Struktur der Seite HTML definiert . what exists on the page Die Headings Absätze Knöpfe Bilder Containern Zum Beispiel: Hello This is a paragraph

HTML-Elemente bilden eine eingebettete Struktur, die als . DOM div ├── h1 └── p Jede Webseite in Ihrem Browser ist im Wesentlichen ein großer Baum von Elementen. CSS: Wie die Dinge aussehen Wenn HTML die Struktur definiert, . CSS defines appearance Farben Quellen Spaziergänge Layout Positionierung Zum Beispiel: /* CSS class that defines how the title looks */

.title { color: blue; font-size: 32px; } So angewendet wird:

Hello Kombination mehrerer Klassen Ein wichtiges Konzept in CSS ist, dass Elemente . multiple classes Zum Beispiel:

Submit Jede Klasse kann verschiedene Aspekte des Stylings steuern. /* base button style */ .button { border-radius: 6px; }

/* button color style */ .button-primary { background: blue; color: white; }

/* button size */ .button-large { padding: 16px 24px; } Diese Flexibilität ist mächtig, kann aber auch in großen Anwendungen verwirrend werden, wenn Stile miteinander interagieren. Warum Tailwind hilft Dies ist einer der Gründe, warum viele moderne Projekte verwenden Anstatt große CSS-Dateien zu schreiben, verwendet Tailwind vordefinierte Dienstleistungsklassen. Tailwind CSS Zum Beispiel: Submit

Jede Klasse repräsentiert eine kleine Styling-Regel. Dieser Ansatz hat einen überraschenden Vorteil bei der Arbeit mit KI-Tools wie Cursor. . Tailwind layouts much more reliably than traditional CSS Wenn Sie Cursor nicht ausdrücklich anweisen, Tailwind zu verwenden, kann es beginnen, Stile direkt in jedes Element einzubetten. Wenn Sie Cursor nicht ausdrücklich anweisen, Tailwind zu verwenden, kann es beginnen, Stile direkt in jedes Element einzubetten. Zum Beispiel:

Das funktioniert zunächst. Aber später wird es schmerzhaft, weil das Ändern des Designs erfordert, jede Komponente einzeln zu bearbeiten. Wiederverwendbare Klassen ermöglichen es Ihnen, das Design der gesamten Anwendung zu ändern, indem Sie nur ein paar geteilte Stile ändern. JavaScript und TypeScript HTML definiert Struktur, CSS definiert Aussehen. JavaScript defines behavior. Drücken oder klicken, um das Bild in voller Größe anzuzeigen JavaScript ermöglicht es der Schnittstelle, auf Benutzeraktionen zu reagieren. Zum Beispiel: // when the user clicks the button, show a message

button.addEventListener("click", () => { alert("Hello!"); }); TypeScript ist im Wesentlichen JavaScript mit zusätzlicher Typsicherheit. auf JavaScript: // a simple function that adds two numbers

function add(a, b) { return a + b; } Mit TypeScript: // the same function, but with explicit types // a and b must be numbers // the function returns a number

function add(a: number, b: number): number { return a + b; } Die meisten modernen Anwendungen verwenden TypeScript, weil es viele Fehler in größeren Systemen verhindert. Warum wir Next.js verwenden In der übrigen Reihe dieser Serie werden wir die Beispielanwendung mit Next.js ist ein Framework, das auf React gebaut wurde. React konzentriert sich auf den Aufbau von Benutzeroberflächen. Next.js Next.js fügt Dinge wie: Routen Server Rendering Feuer Endpunkte Projektstruktur Werkzeuge bauen Sie müssen Next.js internals nicht tief verstehen, aber es hilft zu verstehen, wie React-Anwendungen strukturiert sind. Sie müssen Next.js internals nicht tief verstehen, aber es hilft zu verstehen, wie React-Anwendungen strukturiert sind. Glücklicherweise sind die Kernideen sehr einfach. Sie müssen nur drei Dinge verstehen: Komponenten Props Hooks Reagieren Komponenten React-Anwendungen werden aus . components Eine Komponente ist ein wiederverwendbares Stück Schnittstelle. Beispiele sind unter anderem: Knöpfe Navigationsbars Wie Blöcke Modale Fenster Beispiele für Komponenten: // A simple React component. // It renders a button.

function Button() { return Click me } Jetzt kann sie überall wiederverwendet werden. Große Anwendungen werden . trees of components Props Props sind Inputs, die in Komponenten übertragen werden. Zum Beispiel: // A simple React component. // It renders a button and shows the text passed in props.label.

function Button(props) { return {props.label} } Die Verwendung: // The same component can be reused with different labels

Hooks Hooks ermöglichen Komponenten, den Zustand zu speichern und auf Benutzerinteraktionen zu reagieren. Zum Beispiel: // useState creates a piece of state inside the component. // "count" stores the current value. // "setCount" is the function used to update it.

const [count, setCount] = useState(0) Jetzt kann die Komponente ihren internen Zustand aktualisieren. // When the button is clicked, the count increases by 1. // The text updates automatically.

setCount(count + 1)}> Clicked {count} times Hooks machen Komponenten interaktiv. Die Zusammenfassung: Wenn Sie diese Konzepte noch nie getroffen haben, verstehe ich, wie dies fühlen könnte. But you don’t need to master all of this at a professional level. You only need to understand the basic idea. If you have a technical mindset and can grasp these concepts, the journey becomes much easier. Anstatt die KI zufällig zu bitten, etwas zu generieren, werden Sie in der Lage sein, es richtig zu führen. Die Zusammenfassung: Wenn Sie diese Konzepte noch nie getroffen haben, verstehe ich, wie dies fühlen könnte. Sie müssen nur die Grundidee verstehen.Wenn Sie eine technische Denkweise haben und diese Konzepte verstehen können, wird die Reise viel einfacher. Anstatt die KI zufällig zu bitten, etwas zu generieren, werden Sie in der Lage sein, es richtig zu führen. Bevor man vorwärts geht Stellen Sie sicher, dass Sie gründlich verstehen: Frontend gegen Backend Datenbanken als Tabellen HTML Struktur CSS-Klassen und Styling JavaScript Verhalten React Komponenten, Props und Hooks Was ist als nächstes? Bevor Sie in eine technische Spezifikation für Ihr Produkt eintauchen, beantworten Sie dies: Welchen Stapel werden Sie verwenden? Auf den ersten Blick mag dies wie eine rein technische Entscheidung erscheinen. Wenn Sie es nicht im Voraus definieren, beginnt die KI zu improvisieren, und ich würde lieber nicht einmal darüber nachdenken, wohin das führen könnte. Cursor Hier beschreibe ich den Stapel, den ich selbst benutzte.Dieses Setup hat sehr gut für mich funktioniert und kann Ihnen helfen, einige der Probleme zu vermeiden, die ich am Anfang hatte. Auswählen eines Rahmens Wenn Ihr Produkt eine Web-Schnittstelle hat (was bedeutet, dass Benutzer über einen Browser mit ihm interagieren), benötigen Sie ein Framework, das sowohl das Frontend als auch das Backend bearbeitet. Für beide Dienstleistungen, die ich gebaut habe, wählte ich , and I never regretted that decision. Next.js Ich war mit Dingen wie PHP, Laravel, JavaScript und ähnlichen Technologien vertraut, aber in diesem Fall habe ich einfach den Empfehlungen von ChatGPT gefolgt. Der Punkt ist: Selbst wenn Sie bereits einen anderen Stapel kennen, könnte dies eine gute Gelegenheit sein, etwas Neues auszuprobieren. Der Punkt ist: Selbst wenn Sie bereits einen anderen Stapel kennen, könnte dies eine gute Gelegenheit sein, etwas Neues auszuprobieren. Wenn Sie weit von der Entwicklung entfernt sind, können Sie mit dem Caching auf der Client-Seite und dem Applikationsstatusmanagement in Schwierigkeiten geraten (dies sind notwendig, wenn Sie Dinge wie Seitenwiederladungen vollständig vermeiden möchten, während ein Benutzer mit Ihrem Service interagiert). Wenn Sie weit von der Entwicklung entfernt sind, können Sie mit dem Caching auf der Client-Seite und dem Applikationsstatusmanagement in Schwierigkeiten geraten (dies sind notwendig, wenn Sie Dinge wie Seitenwiederladungen vollständig vermeiden möchten, während ein Benutzer mit Ihrem Service interagiert). Letztendlich ist diese Art von Polieren definitiv nicht erforderlich, um ein Produkt auf den Markt zu bringen. Sobald Sie Benutzer und Einnahmen haben, können Sie immer einen Frontend-Entwickler einstellen, um die Dinge weiter zu verfeinern. Wo läuft Ihr Server? Sobald der Framework ausgewählt ist, ist die nächste Frage, wo die Anwendung tatsächlich ausgeführt wird. . hosting Vercel Für mein erstes Projekt habe ich . Vercel Dies ist eine ziemlich natürliche Wahl bei der Arbeit mit Die Bereitstellung (Druck Ihrer Anwendung auf den Server) geschieht automatisch aus dem Feld, wenn Sie ausführen . Next.js git push Im Laufe der Zeit traf ich jedoch auf ein unerwartetes Problem: In einigen Regionen ist die Anwendung einfach nicht zugänglich.Daher blieb das erste Projekt auf Vercel, aber für das zweite entschied ich mich, etwas anderes zu versuchen. Fly.io Für das zweite Projekt wechselte ich Fly.io. Die Bereitstellung dort ist ein wenig komplexer als auf , aber es kann automatisiert werden. Am Ende mochte ich Fly.io sogar noch mehr. Es fühlt sich flexibler für das Skalieren an, wenn das Projekt zu wachsen beginnt. Vercel Interessanterweise hat Fly.io formell keine kostenlose Ebene, aber wenn Ihre monatliche Nutzung unter $ 5 bleibt, berechnen sie Ihnen überhaupt nichts. Choosing a Database Eine Datenbank auswählen Es gibt hier zwei Hauptansätze: Die erste Option besteht darin, Ihre eigene Datenbank auf Ihrem eigenen Server auszuführen.Dies gibt Ihnen volle Kontrolle und kann völlig kostenlos sein. Die zweite Möglichkeit besteht darin, die Datenbank als Service zu verwenden. Für beide meine Projekte habe ich den zweiten Ansatz gewählt, weil ich mich so schnell wie möglich bewegen wollte. . Supabase Supabase bietet eine verwaltete Datenbank mit zahlreichen nützlichen Tools. PostgreSQL Warum Supabase bequem war Supabase unterstützt Vektor-Speicher. Dies wurde für eines meiner Projekte wichtig, in denen Daten als Embeddings gespeichert wurden, die mit dem OpenAI-Embedding-3-small-Modell erzeugt wurden. Supabase enthält integrierte Authentifizierung. Benutzer können sich mit Anbietern wie Google, GitHub, E-Mail und anderen Anbietern anmelden. Supabase bietet auch Dateispeicher, mit dem Benutzer Bilder und andere Assets hochladen können, ohne eine separate Infrastruktur aufzubauen. Ein weiteres sehr nützliches Feature ist die Unterstützung von RPC-Funktionen.In meinem zweiten Projekt habe ich vollständig aufgehört, dem Backend zu erlauben, Datenbanktabellen direkt zu abzufragen. Supabase enthält auch leistungsstarke Sicherheitstools wie Row Level Security (RLS) Richtlinien. Supabase Drawbacks Insbesondere verhält sich Google-Login bei Benutzern, die über Safari auf dem iPhone auf die Anwendung zugreifen. Ich entdeckte dies erst nach etwa zwei Monaten der Entwicklung, und in der Praxis stellte sich heraus, dass es fast unmöglich war, es zu beheben. Der zweite Nachteil ist die Preisgestaltung. Supabase bietet technisch eine kostenlose Ebene, aber in der Praxis können Sie immer noch etwa 25–40 US-Dollar pro Monat bezahlen, auch wenn die Anwendung noch in der Entwicklung ist und keine Benutzer hat. Cursor + ChatGPT: Zwei verschiedene Rollen für mich, Es gibt andere IDE-Optionen, aber Cursor hat in meinem Fall sehr gut funktioniert.Der Wechsel zu etwas wie VS Code und die Interaktion mit einem KI-Assistent über das Terminal ist etwas, das ich persönlich nicht interessiert habe zu versuchen. Cursor is the primary development environment Die wichtigsten Nachteile von Cursor sind und . cost frequent updates An manchen Stellen erreichten meine Ausgaben Im Laufe der Zeit habe ich gelernt, diese Kosten zu kontrollieren.Heute ist eine realistische Schätzung über Wenn Sie starke Modelle aktiv verwenden. $100 per day $300 per month Cursor bietet auch ein Basis-Abonnement für rund , aber auf das billigste Modell zu verlassen, ist praktisch unmöglich, und die Grenzen für bezahlte Modelle sind ziemlich klein. $20 Warum ChatGPT immer noch wichtig ist Auch wenn Sie Cursor verwenden, empfehle ich dringend, eine Die Unterschrift. ChatGPT Plus Mein Workflow sieht in der Regel so aus: Cursor → Schreiben und Ändern von Code ChatGPT → Ideen und Architektur diskutieren Innerhalb von Cursor ist das Modell für Außerhalb von Cursor verhält sich ChatGPT eher wie ein kreativer Denkpartner. code generation and stability Eine einfache Regel: Bitten Sie ChatGPT nicht, Ihren Produktionscode zu schreiben Don’t ask ChatGPT to write your production code Das gleiche Modell innerhalb von Cursor, oder vor allem Modelle wie Opus, wird Code viel besser generieren. ChatGPT für visuelle Assets verwenden Eine weitere unerwartete Verwendung von ChatGPT war . image generation Mein zweites Projekt repräsentiert visuelle Umgebungen: digitale Parks mit Denkmälern, Wegen und dekorativen Objekten. Das erforderte eine große Anzahl von grafischen Assets. Anstatt Assets zu kaufen oder Designer für jede Iteration einzustellen, generierte ich die meisten der Visuals direkt mit ChatGPT. Da die Bildgenerierung im ChatGPT Plus-Abonnement enthalten ist, hat dies während der Entwicklung eine überraschende Menge Geld gespart und war einfach sehr praktisch. Design Werkzeuge Viele Entwickler nutzen Entwerfen Sie Schnittstellen, bevor Sie Code schreiben. Figma Cursor kann selbst vernünftige UI-Layouts generieren, und ich passt sie danach einfach manuell an. Wenn Sie jedoch lieber zuerst Schnittstellen entwerfen, kann Figma immer noch sehr nützlich sein. Google experimentiert auch mit Tools, die Designlayouts direkt in Code umwandeln. , die eine erste Implementierung aus Interface-Designs generieren kann. Google Stitch Theoretisch kannst du: Entwerfen Sie die Schnittstelle in Figma Templates mit Stitch erstellen Konvertieren Sie dann diese Vorlagen in React-Komponenten E-Mail und kleine Infrastrukturteile Die meisten Anwendungen müssen schließlich E-Mails senden. Dazu habe ich einen einfachen Dienst namens . Resend Später möchten Sie möglicherweise auch Caching mit etwas wie Aber in beiden meinen Projekten habe ich diesen Schritt verschoben. Redis Redis Wenn die Architektur richtig entworfen ist, kann Caching immer später hinzugefügt werden. Wenn die Architektur richtig entworfen ist, kann Caching immer später hinzugefügt werden. Brauchen Sie Docker? In beiden Projekten gelang es mir, völlig ohne . Docker Docker Mit Fly.io können Sie Docker verwenden, um das Projekt lokal auf Ihrer Maschine zu erstellen, aber Sie können auch die Dateien hochladen, wie sie sind und den Build auf ihren Servern laufen lassen. An einem Punkt brach etwas ab und Fly.io hörte auf, die Dateien zu holen und den Build zu starten. Der allgemeine Rat online ist entweder, die Serverregion in den Fly-Einstellungen zu ändern oder zu lokalen Builds zu wechseln (das ist, wo Docker nützlich wird). Aber ich löste es anders, indem ich eine bestimmte Flagge im Fly-Development-Befehl verwendete, so dass ich keine dieser Dinge tun musste. Sie können auch einfach Opus fragen, wie man es mit minimalem Aufwand repariert (ohne den Server zu ändern oder Docker zu installieren). Hardware ist wichtiger, als Sie denken Eine unerwartete Lektion hatte nichts mit Programmierung zu tun. Ihr Hardware-Setup ist wichtig Your hardware setup matters Cursor funktioniert viel besser, wenn Sie genug Bildschirmraum haben, um mehrere Panels gleichzeitig zu sehen. Technisch hat es funktioniert, aber es war äußerst unbequem. 13-inch tablet Wechseln Sie zu a Der Workflow wurde dramatisch verbessert. 27-inch monitor Cursor kann auch ziemlich ressourcenintensiv sein, so dass ein vernünftig leistungsstarker Computer definitiv hilft. Cursor kann auch ziemlich ressourcenintensiv sein, so dass ein vernünftig leistungsstarker Computer definitiv hilft. Betriebssystem Für den Kontext habe ich dieses gesamte Experiment auf . Windows Nichts in diesem Stapel hängt jedoch wirklich von Windows ab, mit Ausnahme der ständigen Versuche der KI, Shell-Befehle zu generieren, die (das kann mit ein paar Regeln behoben werden, die ich später beschreiben werde). && Das gleiche Setup funktioniert perfekt auf . macOS or Linux Minimal Stack Zusammenfassung Wenn wir alles vereinfachen, sieht mein Stapel ungefähr so aus: Entwickler: Next.js Datenbank: Supabase Hosting von Fly.io IDE: Cursor Chat: ChatGPT E-Mail: Weiterleiten Und es stellte sich heraus, dass es mehr als genug war, um . real working products Was kommt als nächstes Bevor Sie einen Code schreiben, müssen Sie das Produkt eindeutig beschreiben. Die meisten Menschen, die KI-Tools verwenden, springen direkt in die Codierung.Meine Erfahrung nach ist dies der schnellste Weg, um ein chaotisches System zu erstellen. Wenn Sie noch kein Produkt mit KI gebaut haben, ehrlich gesagt, ich beneide Sie.Ich erinnere mich immer noch an das Gefühl, das ich im Sommer 2025 hatte, als ich zum ersten Mal damit begann zu experimentieren. Wenn Sie noch kein Produkt mit KI gebaut haben, ehrlich gesagt, ich beneide Sie.Ich erinnere mich immer noch an das Gefühl, das ich im Sommer 2025 hatte, als ich zum ersten Mal damit begann zu experimentieren. Jetzt kann mein Rat ein bisschen seltsam klingen: Stopp für ein paar Tage. Stopp für ein paar Tage. Stopp für ein paar Tage. Nehmen Sie 3-5 Tage und widerstehen Sie der Versuchung, Cursor, Antigravity oder jede andere AI-Entwicklungsplattform sofort zu installieren. Denn die Qualität Ihres Denkens in diesem Stadium wird bestimmen, wie schmerzhaft (oder wie glatt) die nächsten Wochen oder sogar Monate der Entwicklung sein werden. Jeder kann retten . 10 minutes of thinking now hours of refactoring later Beginnen Sie mit einem Gespräch Der einfachste Weg, dies zu tun, ist, ChatGPT zu öffnen und mit Sprachingabe zu diskutieren (nicht den vollständigen Sprachgesprächsmodus, sondern den Sprach-zu-Text-Button). Just start talking. For example, explain: Was Ihr Produkt tut Wer die Nutzer sind Welches Problem löst es Welche Aktionen Nutzer durchführen Das Ziel dieses Gesprächs besteht nicht darin, Code zu generieren, sondern darin, die Struktur des zukünftigen Systems allmählich zu entdecken. Während dieser Diskussion sollten Sie ChatGPT auch mitteilen, welchen Technologie-Stack Sie verwenden möchten. For example: Nächster.js Typschrift Vermutung Tailwind Und explizit fragen ChatGPT Erklären Sie, dass Sie den Code später in Cursor schreiben werden, aber Sie möchten, dass ChatGPT beschreibt, wie es das System aufbauen würde. not to generate code Ich habe persönlich mehrere Menschen gesehen, die Monate damit verbracht haben, sich um eine Idee zu drehen, ohne jemals diese einfache Frage an die KI zu stellen. Denken Sie an Daten, nicht nur an Bildschirme Einer der wichtigsten Teile dieser Phase ist das Entwerfen des Datenmodells. Wenn Sie noch nie mit Datenbanken gearbeitet haben, stellen Sie sich das System als eine Reihe von Excel-Tabellen vor. Ask yourself questions like: Kann ein Benutzer mehrere Objekte erstellen? Gehören Objekte zu Kategorien? Können Kategorien mehrere Objekte enthalten? Gibt es Beziehungen zwischen Objekten? For example: Ein Benutzer, viele Artikel Ein Artikel → eine Kategorie ... oder vielleicht ein Artikel → mehrere Kategorien und Tags an article → many comments that load on scroll Kommentare → Reaktionen Eine weitere wichtige Frage ist Werden alle gleich sein oder werden einige Benutzer zusätzliche Privilegien haben? user roles Moderatoren Administratoren Sie können später Rollen hinzufügen, aber es ist viel einfacher, sie frühzeitig zu planen. Idealerweise sollte Ihre technische Beschreibung Folgendes enthalten: Tabellennamen (Artikel, Kommentare, Reaktionen) Spaltennamen (Benutzername, Avatar, Bio) Beziehungen zwischen den Tischen Auch wenn Sie vorhaben, das Produkt allmählich zu entwickeln, kann Ihnen eine klare Struktur von Anfang an später eine enorme Menge an Refactoring ersparen. In beiden meinen Projekten endete die Datenbank schließlich mit Hier die Struktur aus meinem zweiten Projekt: 30–40 tables Ihr Projekt wird wahrscheinlich mit einer ähnlichen Zahl enden. Aber für die anfängliche technische Spezifikation, auch ist ausreichend 10 core tables Job Quests Das schwierigste Konzept für Anfänger ist in der Regel Eine Warteschlange ist eine Tabelle, die Aufgaben anstelle von Objekten wie Benutzern oder Artikeln speichert. job queues Stellen Sie sich beispielsweise vor, nachdem ein Benutzer einen Artikel veröffentlicht hat, senden Sie ihn an einen externen Dienst zur Übersetzung oder Analyse. Sie können diesen Vorgang während der Artikelerstellung nicht sofort zuverlässig ausführen, externe Dienste können versagen oder langsam reagieren. Sie können diesen Vorgang während der Artikelerstellung nicht sofort zuverlässig ausführen, externe Dienste können versagen oder langsam reagieren. Der Artikel selbst muss sofort erstellt werden (denn das hängt nur von Ihrer Anwendung ab). Beispielsweise könnte Ihre Artikeltabelle so aussehen: id author_id picture title_en text_en title_es text_es 32 535 one.jpg Article 1 Hello 33 535 two.jpg Article 2 Next part 32 535 Das.jpg Artikel 1 Hallo 33 535 Zwei JPG Artikel 2 Nächster Teil Nach der Erstellung jedes Artikels fällt es in der Reihenfolge auf die Übersetzung von externen Diensten: id entity_type entity_id status attempts es_text_generated 1 article_text 32 processed 1 Hola 2 article_text 33 pending 0 1 article_text 32 verarbeitet 1 Hola Hallo 2 Artikel - Text 33 aufhängen 0 Wie nur die Aufgabe in der Reihenfolge ausgeführt wird, ergänzt Trigger automatisch die Informationen über den Artikel in der Haupttabelle der Artikel id author_id picture title_en text_en title_es text_es 32 535 one.jpg Article 1 Hello Hola 33 535 two.jpg Article 2 Next part 32 535 Das.jpg Artikel 1 Hallo Hola Hallo 33 535 Zwei JPG Artikel 2 Nächster Teil Warteschlangen für externe Dienste in Supabase werden in der Regel über . Edge Functions In Supabase gibt es 2 verschiedene Arten von Funktionen: und . RPC Edge Remote Procedure Anruf ist eine Funktion, die direkte Abfragen in Ihre Datenbanktabellen ersetzt. Zum Beispiel, anstatt Ihr Server eine direkte Abfrage durchzuführen, um sie abzurufen ( ) alle Artikel, die einem bestimmten Benutzer gehören ( ) ist: RPC Auswahl 535 Auswahl 535 SELECT * FROM articles WHERE author_id = 535; Ich empfehle dringend, Ihren KI-Assistent zu bitten, stattdessen eine Funktion wie diese zu erstellen: CREATE OR REPLACE FUNCTION get_user_articles(p_author_id bigint) RETURNS TABLE ( id bigint, author_id bigint, picture text, title_en text, text_en text, title_es text, text_es text ) LANGUAGE sql SET search_path = '' AS $$ SELECT id, author_id, picture, title_en, text_en, title_es, text_es FROM public.articles WHERE author_id = p_author_id ORDER BY id DESC; $$; Dann rufen Sie innerhalb Ihres Projektcodes diese Funktion einfach so an: SELECT * FROM get_user_articles(535); Um sicherzustellen, dass dieser Ansatz immer korrekt und konsistent funktioniert, fügen Sie explizite Regeln zu Ihrer technischen Spezifikation hinzu (wir werden es später besprechen): nie die Datenbank direkt vom Client abfragen; immer über Server-API-Routen gehen Verbieten Sie direkte Tabellenabfragen innerhalb der API; Wenn eine neue Datenoperation erforderlich ist und noch kein RPC vorhanden ist, erstellen Sie eine Migration mit einer neuen RPC-Funktion verwenden Sie immer SET search_path = '' innerhalb der RPC-Funktionen und verweisen Sie beim Zugriff auf Tabellen explizit auf das Schema Ich werde jetzt nicht tiefer in dieses Thema eingehen, aber diese Regeln zu befolgen, wird Ihnen später eine Menge Kopfschmerzen retten. Ich werde jetzt nicht tiefer in dieses Thema eingehen, aber diese Regeln folgen wird Sie retten . a lot of headaches later Edge functions Eine Edge Funktion läuft und wird in der Regel verwendet, um mit externen Diensten zu interagieren. outside the database Sie laufen auf und können RPC-Funktionen in Ihrer Datenbank anrufen, wenn dies erforderlich ist. JavaScript or TypeScript (Deno runtime) Das war der komplizierteste Abschnitt über die Datenbank. Vielleicht verstehst du es noch nicht vollständig und das ist völlig in Ordnung: Hierbei handelt es sich zunächst um sekundäre Details. Zweitens können Sie während Ihrer Diskussion einfach ChatGPT bitten, diesen Artikel zu finden, "Cursor Your Dream", und klären Sie alles, was Sie nicht verstehen. Drittens, wie ich in Teil 1 erwähnt habe, ist Cursor sehr gut im Aufbau von Datenbanken und Backend-Architektur. Denken Sie an Komponenten Wenn Sie bereits eine Vorstellung von der Schnittstelle haben, können Sie sie in Bezug auf Komponenten beschreiben. Zum Beispiel: Artikel Komponente Benutzerprofil Komponente Modale Fenster Navigationselemente Eine Artikelkomponente kann mehrere Modi haben: View Mode für Leser Edit Mode für Autoren Moderationsmodus für Admin Wenn Sie im Voraus über Komponenten nachdenken, werden KI-Tools später viel sauberen Code generieren. Eine wichtige Regel für das Styling Bitten Sie ChatGPT, eine Anweisung in die Spezifikation aufzunehmen, die Verwenden Sie stattdessen die richtigen CSS-Klassen, beispielsweise über Tailwind. Cursor should not use inline CSS styles In einem meiner Projekte habe ich vergessen, das zu erwähnen. Infolgedessen verstreute sich die Styling-Logik auf Dutzende von Komponenten, und die Reinigung später war schmerzhaft. Eine kritisch wichtige Anmerkung zur Authentifizierung: Wenn Sie Supabase verwenden möchten, geben Sie an, dass JWT-Token von Ihrer Anwendung generiert werden sollten, nicht vom Standard-Supabase-Authentifizierungssystem. If you’re new to authentication systems, this may sound strange. But this small detail can prevent serious problems later, especially when users sign in through . Safari on iPhone Eine kritisch wichtige Anmerkung zur Authentifizierung: Wenn Sie Supabase verwenden möchten, geben Sie an, dass JWT-Token von Ihrer Anwendung generiert werden sollten, nicht vom Standard-Supabase-Authentifizierungssystem. Wenn Sie neu bei den Authentifizierungssystemen sind, mag dies seltsam klingen, aber dieses kleine Detail kann später ernsthafte Probleme verhindern, insbesondere wenn sich Benutzer über Safari auf dem iPhone anmelden. Fallstudie (von meinem zweiten Projekt) Um das konkreter zu machen, lasst mich euch zeigen, wie dieser Prozess für mein zweites Projekt tatsächlich funktionierte.“ » » Ehrenamt Ehrenamt Der erste Prompt Hier der erste Brief, der die Diskussion begann. Seit vielen Jahren habe ich die Idee, ein digitales Denkmal zu bauen. Es könnte eine Plattform sein, auf der eine Gruppe von Benutzern Landschaftskarten erstellen, andere Denkmäler platzieren und andere Angebote hinterlassen - wie Blumen oder Kommentare. Ich denke, es könnte eine bahnbrechende Idee sein, denn so etwas scheint nicht zu existieren. Aber ich mache mir Sorgen um rechtliche Fragen.Was wäre, wenn jemand zum Beispiel ein Denkmal für eine lebende Person errichtet oder ein Denkmal für jemanden wie Michael Jackson errichtet – könnte das zu rechtlichen Problemen im Zusammenhang mit der Verwendung des Namens führen? Technisch kann ich es mir als eine Website mit einer isometrischen Karte vorstellen, auf der Denkmäler platziert sind. Idealerweise sollten wir einen guten Motor finden, anstatt alles von Grund auf zu bauen. Seit vielen Jahren habe ich die Idee, ein digitales Denkmal zu bauen. Es könnte eine Plattform sein, auf der eine Gruppe von Benutzern Landschaftskarten erstellen, andere Denkmäler platzieren und andere Angebote hinterlassen - wie Blumen oder Kommentare. Ich denke, es könnte eine bahnbrechende Idee sein, denn so etwas scheint nicht zu existieren. Aber ich mache mir Sorgen um rechtliche Fragen.Was wäre, wenn jemand zum Beispiel ein Denkmal für eine lebende Person errichtet oder ein Denkmal für jemanden wie Michael Jackson errichtet – könnte das zu rechtlichen Problemen im Zusammenhang mit der Verwendung des Namens führen? Technisch kann ich es mir als eine Website mit einer isometrischen Karte vorstellen, auf der Denkmäler platziert sind. Isometrische Karte Idealerweise sollten wir einen guten Motor finden, anstatt alles von Grund auf zu bauen. In dieser Phase war der Anruf gar nicht technisch, es war einfach ein Ausgangspunkt für die Diskussion. ChatGPT Response (abgekürzt) Ihr Konzept ist einem digitalen Speicherraum näher, in dem Menschen durch symbolische Aktionen interagieren: Besuche, Kommentare, Angebote. Das rechtliche Problem, das Sie erwähnt haben – das Erstellen eines Denkmals für eine lebende Person – existiert. Allerdings verwalten Plattformen dieses Risiko in der Regel durch Produktdesign, nicht durch vollständiges Verbot. - Beschwerde- und Takedown-Systeme - klare Regeln für Benutzergenerierte Inhalte - Rahmenung von Denkmälern für asymbolische Räume, nicht faktische Behauptungen über den Tod Technisch gesehen ist es für eine isometrische Karte im Web in der Regel am besten, ein vorhandenes Rendering-Framework zu verwenden. Phaser für interaktive Ziegelszenen – PixiJS für flexible Web-Rendering und UI-Integration Wenn Sie später echte 3D-Monumente wollen, können Sie auf Three.js wechseln, aber für einen MVP ist ein 2D-Fliesen-basierter Ansatz in der Regel viel schneller. Ihr Konzept ist einem digitalen Speicherraum näher, in dem Menschen durch symbolische Aktionen interagieren: Besuche, Kommentare, Angebote. Der digitale Speicherraum Das rechtliche Problem, das Sie erwähnt haben – das Erstellen eines Denkmals für eine lebende Person – existiert. Allerdings verwalten Plattformen dieses Risiko in der Regel durch Produktdesign, nicht durch vollständiges Verbot. Produktdesign - Beschwerde- und Takedown-Systeme - klare Regeln für Benutzergenerierte Inhalte - Rahmenung von Denkmälern für asymbolische Räume, nicht faktische Behauptungen über den Tod Symbolische Räume Technisch gesehen ist es für eine isometrische Karte im Web in der Regel am besten, ein vorhandenes Rendering-Framework zu verwenden. Phaser für interaktive Ziegelszenen – PixiJS für flexible Web-Rendering und UI-Integration Phaser Pixel Wenn Sie später echte 3D-Monumente wollen, können Sie auf Three.js wechseln, aber für einen MVP ist ein 2D-Fliesen-basierter Ansatz in der Regel viel schneller. Zwei.js Danach ging die Diskussion weiter. Meine nachfolgenden Nachrichten Ich bin sehr zufrieden mit Pseudo-3D. Auf einer Ebene erstellen Benutzer eine Karte: Sie wählen ihre Größe als Gitter und füllen sie mit Gras, Wegen und anderen Elementen durch einen visuellen Editor. Auf einer anderen Ebene platzieren Benutzer Denkmäler, die verschiedene Zahlen von Fliesen wie 1, 2 oder 4 einnehmen können. Es gibt auch eine dritte Art von Benutzer: Sie erstellen keine Karten oder Denkmäler, sie hinterlassen einfach Angebote wie Blumen. Jede Karte sollte eine eigene URL haben. Ich bin sehr zufrieden mit Pseudo-3D. Pseudo 3D Auf einer Ebene erstellen Benutzer eine Karte: Sie wählen ihre Größe als Gitter und füllen sie mit Gras, Wegen und anderen Elementen durch einen visuellen Editor. Auf einer anderen Ebene platzieren Benutzer Denkmäler, die verschiedene Zahlen von Fliesen wie 1, 2 oder 4 einnehmen können. Es gibt auch eine dritte Art von Benutzer: Sie erstellen keine Karten oder Denkmäler, sie hinterlassen einfach Angebote wie Blumen. Jede Karte sollte eine eigene URL haben. Ich möchte auch, dass der Karteninhaber einen Prozentsatz der Einkäufe in seiner Karte erhält. Zum Beispiel, wenn jemand dort ein Denkmal kauft, könnte ich 20% der Einnahmen mit dem Karteninhaber teilen. Wenn jemand Blumen an einem Denkmal hinterlässt, gehen fast 20% an den Denkmalbesitzer und weitere 20% an den Kartenbesitzer. Ich möchte auch, dass der Karteninhaber einen Prozentsatz der Einkäufe in seiner Karte erhält. Zum Beispiel, wenn jemand dort ein Denkmal kauft, könnte ich 20% der Einnahmen mit dem Karteninhaber teilen. Wenn jemand Blumen an einem Denkmal hinterlässt, gehen fast 20% an den Denkmalbesitzer und weitere 20% an den Kartenbesitzer. Ich denke daran, das Projekt mit Next.js + Supabase zu bauen. Welche Pseudo-3D-Engine wäre am besten? Ich denke daran, das Projekt mit Next.js + Supabase zu bauen. Welche Pseudo-3D-Engine wäre am besten? Nächster.js + Supabase Erweitern Sie nun die technische Beschreibung, sammeln Sie alles in einem einzigen Dokument und fügen Sie eine Einführung hinzu, die das Problem und das Produkt erklärt. Erweitern Sie nun die technische Beschreibung, sammeln Sie alles in einem einzigen Dokument und fügen Sie eine Einführung hinzu, die das Problem und das Produkt erklärt. Markdown (.md) File with the Spec Nach mehreren Gesprächen war die technische Spezifikation bereit. Dasselbe wird für Sie geschehen. Stellen Sie sicher, dass Sie die endgültige Spezifikation im Markdown-Format generieren und in eine Textdatei kopieren. Sie werden diese Datei auf jeden Fall in späteren Stadien benötigen. .md Aber anstatt es direkt an Cursor zu senden, fragen Sie sich: Welcher Teil des Produkts ist Ihnen am wichtigsten oder am repräsentativsten? Dies ist wichtig, weil Ihre erste Anfrage für Cursor von der technischen Spezifikation abweichen kann. Für mich war dieser Teil der Also beschloss ich, nur das zuerst zu erstellen (ohne Authentifizierung, eine Datenbank oder ein Backend). map editor mechanics Mein letzter Anruf zu ChatGPT Schreiben Sie einen Anruf für Cursor, wo das Hauptziel es ist, einen Karteneditor zu erstellen. Für jetzt sollte es ohne Authentifizierung und ohne Supabase funktionieren. Auch wenn die Karte noch nicht gespeichert werden kann, ist das in Ordnung. Das Hauptziel ist es, die Mechanik der Karte zu spüren, bevor das gesamte Produkt gebaut wird. Idealerweise sollte dies eine Komponente sein, die später in ein vollständiges System integriert werden kann. Schreiben Sie einen Anruf für Cursor, wo das Hauptziel es ist, einen Karteneditor zu erstellen. Für jetzt sollte es ohne Authentifizierung und ohne Supabase funktionieren. Auch wenn die Karte noch nicht gespeichert werden kann, ist das in Ordnung. Karte Editor Das Hauptziel ist es, die Mechanik der Karte zu spüren, bevor das gesamte Produkt gebaut wird. Idealerweise sollte dies eine Komponente sein, die später in ein vollständiges System integriert werden kann. ChatGPT Antwort Unten ist die Dies führte schließlich zum Arbeiten des Prototyps in Cursor. final instruction Sie sind Senior Frontend / Game Engineer. Wir bauen nur einen Prototyp eines Karteneditor (isometrische Pseudo-3D) als isolierte Komponente, um die Kern-Interaktionsmechanik zu erforschen. Strenge Einschränkungen Keine Authentifizierung. Keine Supabase, Datenbank, Stripe oder irgendwelche Backend-Komponenten. Keine zusätzlichen Produktbildschirme. Das Ziel ist nur die interaktive Mechanik der Bearbeitung der Karte, Slots und Monumentlage. Ausgangsformat Implementieren Sie dies als eigenständige React-Komponente (React + TypeScript), die später in eine Next.js-Anwendung integriert werden kann. Die Komponente muss: *— lokalen Zustand beibehalten*— eine öffentliche API (Props / Callbacks) aufdecken Technologien — React + TypeScript — PixiJS + pixi-viewport Das Kernproduktmodell (Wichtig) Wenn eine Karte erstellt wird, definiert der Eigentümer SLOTS – rechteckige Bereiche auf dem Gitter, in denen andere Benutzer später Denkmäler platzieren können. In diesem Prototyp implementieren wir beide: — der Slot-Editor — Monument Placement Alle Daten werden lokal gespeichert. Entitäten (in der Erinnerung) Grid — NxM Fliesen (Gras, Pfad) Slot — Rechteck definiert als x, y, w, hkind: monumentid Monument besetzt genau einen SlotEigenschaften: Größe(1x1х1х2х2х2)SlotRotation(optional)id Prototypenfunktionalität (Editor MVP) Generieren Sie eine NxM-Karte (Standard: 20 × 20). Isometrische Projektion. Überwachung der Kamera: - Pan (Drachen) – Zoom (3 feste Zoomebenen) Werkzeuge Paint grass – Paint path – Slot-Tool (Slot erstellen / löschen, Rechteckgrößen: 1×1, 1×2, 2×2) – Platzmonument (Monumente können nur auf einem vorhandenen Slot der entsprechenden Größe platziert werden) – Eraser (Entfernt Monument oder Slot je nachdem, was unter dem Cursor ist) Regeln - Wege können nicht mit Slots bedeckt werden. - Slots können sich nicht kreuzen. - Ein Denkmal kann nur in einen Aphree-Slot der entsprechenden Größe platziert werden. - Slots und Monumente dürfen sich niemals überlappen. Selektion Wenn Sie auf einen Slot oder ein Denkmal klicken, wählen Sie ihn aus (Highlight mit einem Rahmen). Ein kleines Infopaneel (React div) erscheint rechts und zeigt: - Typ - Koordinaten - Größe - ID Export/Import Status (JSON und In-Memory) JSON → exportiert den aktuellen Zustand in einen Textbereich. Die Schaltfläche JSON → loads state from textarea. UX Details Die Toolbar oben oder links enthält: — Werkzeugwahl — Slot-Size-Selektor (1×1 / 1×2 / 2×2) — Export / Import-Tasten Der Cursor-Modus sollte deutlich sichtbar sein (Label zeigt das aktuelle Tool) Architektonische Anforderungen (wichtig für zukünftige Skalierung) Separates Modell (Gitter / Slots / Denkmäler) vom Renderer (Pixi Schichten). Erstellen Sie Pixi Application und viewport nur einmal. Erstellen Sie sie nicht bei jeder Änderung des Zustands. Verwenden Sie UseEffect mit der richtigen Reinigung: — App zerstören — Zuhörer entfernen — Animationsrahmen stornieren Speichern Sie Pixi-Objekte nicht im React-Zustand. Handhaben Sie die Containergröße korrekt mit ResizeObserver. Fügen Sie Zeigerereignisse einmal an den Viewport/Bühne an und entfernen Sie sie bei Unmount. Verwenden Sie Tiefsortierung für isometrische Darstellung (z. B. x + y oder y), damit sich Objekte richtig überlappen. Aufgabe Zuerst schlagen Sie eine minimale Dateistruktur vor: MapEditor.tsxmodel.tsisoMath.tsrender.ts Dann implementieren Sie einen minimalen Arbeitsprototyp (TypeScript), damit ich die Komponente in ein leeres React / Next.js-Projekt einfügen kann und sofort sehen kann, wie der Editor arbeitet. Am Ende eine kurze Liste von „Dingen zu verbessern später“ (maximal 8 Elemente). Fügen Sie nicht mehr hinzu als oben angegeben. Sie sind Senior Frontend / Game Engineer. Senior Frontend / Spieleingenieur Wir bauen nur einen Prototyp eines Karteneditor (isometrische Pseudo-3D) als isolierte Komponente, um die Kern-Interaktionsmechanik zu erforschen. Nur ein Prototyp eines Karteneditor Strenge Einschränkungen Strenge Einschränkungen Keine Authentifizierung. Keine Supabase, Datenbank, Stripe oder irgendwelche Backend-Komponenten. Keine zusätzlichen Produktbildschirme. Das Ziel ist nur die interaktive Mechanik der Bearbeitung der Karte, Slots und Monumentlage. Ausgangsformat Ausgangsformat Implementieren Sie dies als eigenständige React-Komponente (React + TypeScript), die später in eine Next.js-Anwendung integriert werden kann. Selbstständige React Komponente Die Komponente muss: *— beibehalten ** lokalen Zustand * — eine öffentliche API (Props / Callbacks) aussetzen Öffentliches Feuer Technologien Technologien — React + TypeScript — PixiJS + pixi-viewport Das Kernproduktmodell (Wichtig) Das Kernproduktmodell (Wichtig) Wenn eine Karte erstellt wird, definiert der Eigentümer SLOTS – rechteckige Bereiche auf dem Gitter, in denen andere Benutzer später Denkmäler platzieren können. Slots In diesem Prototyp implementieren wir beide: In diesem Prototyp implementieren wir beide: — der Slot-Editor — Monument Placement Alle Daten werden lokal gespeichert. Entitäten (in der Erinnerung) Entitäten (in der Erinnerung) Grid — NxM Fliesen (Gras, Pfad) Slot — Rechteck definiert als x, y, w, h kind: monument id Monument besetzt genau einen SlotEigenschaften: (1 x 1 x 2 x 2 x 2) (Optional ist das size slotId rotation id Prototypenfunktionalität (Editor MVP) Prototypenfunktionalität (Editor MVP) Generieren Sie eine NxM-Karte (Standard: 20 × 20). Isometrische Projektion. 20 × 20 Überwachung der Kamera: Überwachung der Kamera: - Pan (Drachen) – Zoom (3 feste Zoomebenen) Werkzeuge Werkzeuge Paint grass – Paint path – Slot-Tool (Slot erstellen / löschen, Rechteckgrößen: 1×1, 1×2, 2×2) – Platzmonument (Monumente können nur auf einem vorhandenen Slot der entsprechenden Größe platziert werden) – Eraser (Entfernt Monument oder Slot je nachdem, was unter dem Cursor ist) Regeln Regeln - Wege können nicht mit Slots bedeckt werden. - Slots können sich nicht kreuzen. - Ein Denkmal kann nur in einen Aphree-Slot der entsprechenden Größe platziert werden. - Slots und Monumente dürfen sich niemals überlappen. Kostenloser Slot für Matching Size Selektion Selektion Wenn Sie auf einen Slot oder ein Denkmal klicken, wählen Sie ihn aus (Highlight mit einem Rahmen). Ein kleines Infopaneel (React div) erscheint rechts und zeigt: - Typ - Koordinaten - Größe - ID Export/Import Status (JSON und In-Memory) Export/Import Status (JSON und In-Memory) JSON → exportiert den aktuellen Zustand in einen Textbereich. Export von JSON Die Schaltfläche JSON → loads state from textarea. JSON importieren UX Details UX Details Die Toolbar oben oder links enthält: — Werkzeugwahl — Slot-Size-Selektor (1×1 / 1×2 / 2×2) — Export / Import-Tasten Der Cursor-Modus sollte deutlich sichtbar sein (Label zeigt das aktuelle Tool) Architektonische Anforderungen (wichtig für zukünftige Skalierung) Architektonische Anforderungen (wichtig für zukünftige Skalierung) Separates Modell (Gitter / Slots / Denkmäler) vom Renderer (Pixi Schichten). Modell Renderer Erstellen Sie Pixi Application und viewport nur einmal. Erstellen Sie sie nicht bei jeder Änderung des Zustands. Pixi Application und Viewport nur einmal Mit der richtigen Reinigung: Benutze useEffect — App zerstören — Zuhörer entfernen — Animationsrahmen stornieren Speichern Sie Pixi-Objekte nicht im React-Zustand. Refs Handhaben Sie die Containergröße korrekt mit ResizeObserver. ResizeBeobachter Fügen Sie Zeigerereignisse einmal an den Viewport/Bühne an und entfernen Sie sie bei Unmount. einmal Verwenden Sie Tiefsortierung für isometrische Darstellung (z. B. x + y oder y), damit sich Objekte richtig überlappen. Tiefe Sortierung Aufgabe Aufgabe Zuerst schlagen Sie eine minimale Dateistruktur vor: mapEditor.tsx model.ts isoMath.ts render.ts Dann implementieren Sie einen minimalen Arbeitsprototyp (TypeScript), damit ich die Komponente in ein leeres React / Next.js-Projekt einfügen kann und sofort sehen kann, wie der Editor arbeitet. Minimal funktionierender Prototyp (TypeScript) Am Ende eine kurze Liste von „Dingen zu verbessern später“ (maximal 8 Elemente). „Was später zu verbessern ist“ Fügen Sie nicht mehr hinzu als oben angegeben. Hinzufügen Sie nicht mehr als das, was oben angegeben ist. Keine Eile zum nächsten Schritt Deine Aufgabe jetzt ist es, über deine Idee nachzudenken. diskutieren. verfeinern. Aus meiner Erfahrung ist es auch wichtig, sich auf die — die Mindestversion des Produkts, die noch ausreicht, damit ein Benutzer versteht, was das Produkt ist und welches Kernproblem es löst. MVP Zwei erfolgreiche Startups in meinem Leben begannen eigentlich als nichts anderes als Demos, sogar einfache Präsentationen. , und testen Sie sie auf dem realen Verkehr viel schneller. real products instead of demos Sie sollten nicht nur über das Produkt selbst nachdenken, sondern auch über die . path to market Mehrere meiner Projekte stagnierten genau an dem Punkt, an dem ich keine gute Antwort auf grundlegende Fragen hatte. Fragen zu stellen. go-to-market Bevor Sie also den Code schreiben, versuchen Sie, zwei Dinge zu klären: Was das Produkt ist Wie er seine ersten Nutzer erreicht. Am Ende sollten Sie Dokumente two Zwei Die erste ist die Dieses Dokument wird in der Wurzel Ihres Projekts leben und wird während der Entwicklung kontinuierlich von der KI gelesen und aktualisiert. full technical specification Die zweite ist die - die Aufforderung, die Sie an Cursor als Ihre erste Aufgabe senden werden. Und das wird nur der Anfang sein. . first working prompt hundreds of prompts like this Nächste Im nächsten Artikel (in Kürze) werden wir schließlich zum technischen Teil übergehen: Cursor installieren und den ersten echten Arbeitscode generieren. Und das ist, wo alles wird beide . very exciting and a little chaotic