Rechnungsmanager Tool selbst bauen: mit Emergent in vier Prompts
Das baust du
In vier Prompts baust du dir mit Emergent eine eigene Web-App für deine Rechnungen, ohne Programmierkenntnisse. Sie schreibt und verschickt Rechnungen, prüft über Stripe die Zahlungseingänge und mahnt säumige Kunden von allein. Jeder Prompt baut auf dem vorigen auf: Login und Datenmodell, Kunden und Rechnungen, Dashboard mit Stripe, Mahnwesen. Dazu kommt die 40-Euro-Regel für Firmenkunden, die zu spät zahlen.
Die App aus diesem Guide baust du mit Emergent. 👉 Hier geht's direkt zu Emergent
Was am Ende dasteht
Eine Web-App mit eigenem Login. Dahinter ein Dashboard, das dir zeigt, wie viel offen ist, wie viel überfällig und seit wann, und was in den letzten 30 Tagen reinkam.
Du legst Kunden an, stellst Rechnungen mit einzelnen Positionen zusammen, lädst sie als PDF herunter und verschickst sie. Der Kunde bekommt einen Zahlungslink. Sobald er bezahlt, springt die Rechnung von selbst auf bezahlt. Und wenn er nicht bezahlt, geht die Erinnerung automatisch raus.
Emergent öffnen und ein Projekt starten
Geh auf emergent.sh und logge dich ein. Wenn du noch kein Konto hast, klick oben rechts auf Sign up und registrier dich mit deiner E-Mail-Adresse oder deinem Google-Konto.
Nach dem Login landest du auf einer Seite mit einem großen Eingabefeld in der Mitte. Da hinein kommt gleich der erste Prompt.
Wichtig für alles, was folgt: Alle vier Prompts gehen nacheinander in denselben Chat, nicht in vier getrennte Projekte. Nur so baut Emergent jeweils auf dem auf, was vorher schon entstanden ist.
Prompt 1: Rohgerüst, Login und Datenstruktur
Füge diesen Prompt in das Eingabefeld ein und schick ihn ab. Emergent stellt dir danach ein paar Rückfragen zum Aufbau, die du bestätigst.
Was hier passiert, klingt unspektakulär, ist aber der wichtigste Teil des ganzen Builds: Emergent legt die Datenbank an und verknüpft Kunden, Rechnungen und einzelne Rechnungspositionen miteinander, damit die App später weiß, welche Rechnung zu wem gehört. Und das Login sorgt dafür, dass jeder Nutzer nur seine eigenen Daten sieht.
Baue eine Web-App namens "Marlis Invoice Chaser" für Unternehmer, um Rechnungen zu erstellen, Zahlungen zu verfolgen und säumige Kunden automatisch zu erinnern. Tech-Stack: React Frontend, Node/Express Backend, PostgreSQL Datenbank, mit Navigation (Dashboard, Kunden, Rechnungen, Einstellungen). Füge Nutzer-Authentifizierung hinzu (E-Mail/Passwort, sichere Session-Verwaltung), sodass jeder Nutzer nur seine eigenen Daten sieht. Erstelle die Datenmodelle Client (Name, E-Mail, Firma), Invoice (Kunde, Rechnungsnummer, Betrag, Fälligkeitsdatum, Status: offen/bezahlt/überfällig, erstellt am) und InvoiceItem (Beschreibung, Menge, Einzelpreis), korrekt über Relationen verknüpft.
Prompt 2: Kundenverwaltung und Rechnungsformular
Warte, bis Emergent mit dem ersten Durchlauf fertig ist, und füge dann im selben Chat den zweiten Prompt ein.
Jetzt entstehen die Oberflächen: die Seite, auf der du Kunden anlegst, und das Formular, mit dem du eine Rechnung zusammenstellst. Positionen eintragen, Menge und Preis, die Summe rechnet sich von selbst, Fälligkeitsdatum setzen, PDF erzeugen.
Wenn du am Rechnungsformat etwas ändern willst, zum Beispiel deine Steuernummer, deine Bankverbindung oder ein Logo auf der Rechnung, dann schreib das direkt mit in diesen Prompt hinein, bevor du ihn abschickst.
Baue eine Kundenseite, auf der ich Kunden anlegen, bearbeiten und löschen kann, mit einer Liste inklusive Anzahl offener Rechnungen pro Kunde. Baue außerdem ein Formular zum Erstellen neuer Rechnungen: Positionen hinzufügen, Menge, Preis, automatische Summenberechnung, Fälligkeitsdatum wählen, und die Möglichkeit, die fertige Rechnung als PDF zu generieren.
Prompt 3: Dashboard und Stripe-Anbindung
Dritter Prompt, wieder in denselben Chat. Hier kommt das Dashboard dazu, das dir offene, überfällige und bezahlte Beträge auf einen Blick zeigt, und die Stripe-Anbindung für die Bezahlung.
Der interessante Teil steckt im Webhook. Ein Webhook ist eine Rückmeldung von Stripe an deine App: Sobald ein Kunde über den Zahlungslink bezahlt, meldet Stripe das zurück, die Rechnung springt von selbst auf bezahlt und das Dashboard aktualisiert sich. Du musst nichts von Hand abhaken.
Baue ein Dashboard mit echten Daten aus der Datenbank: Gesamtbetrag offener Rechnungen, Gesamtbetrag überfälliger Rechnungen, Gesamtbetrag bezahlter Rechnungen (letzte 30 Tage), und eine Liste der 5 dringendsten überfälligen Rechnungen. Integriere Stripe im Testmodus: generiere für jede Rechnung einen Zahlungslink, und richte einen Webhook ein, der den Rechnungsstatus bei Zahlung automatisch auf "bezahlt" setzt und das Dashboard live aktualisiert.
Prompt 4: Automatisches Mahnwesen
Der letzte Bau-Prompt. Er sorgt dafür, dass die App täglich selbst nachschaut, welche Rechnungen überfällig sind, den Status umstellt und eine Erinnerung mit Zahlungslink an den Kunden schickt.
Der letzte Satz im Prompt ist der, der die Mahngebühr dazurechnet. Ohne ihn erinnert die App nur, sie erhöht den offenen Betrag aber nicht.
Baue eine automatisierte Logik, die täglich überfällige Rechnungen erkennt, deren Status aktualisiert und automatisch eine Erinnerungs-E-Mail mit Zahlungslink an den Kunden verschickt. Verbessere abschließend das UI: modernes Design, Statusfarben für offen/überfällig/bezahlt, Ladeanimationen, und eine Erfolgsmeldung bei Zahlungseingang. Berechne bei überfälligen Rechnungen automatisch eine Mahngebühr und Verzugszinsen und weise den neuen Gesamtbetrag in der Erinnerung aus.
Connectoren hinzufügen
Auf der rechten Seite deines Projekts findest du den Bereich Connectors. Füge dort beide hinzu, die diese App braucht:
- Stripe, damit die Zahlungslinks erzeugt werden und der Statuswechsel auf bezahlt bei deiner App ankommt.
- Google, damit die Rechnungen und die Erinnerungsmails rausgehen.
Du wirst dabei jeweils einmal aufgefordert, dich bei dem Dienst anzumelden und die Verbindung zu bestätigen. Erst danach laufen die Automatisierungen.
Einmal komplett durchtesten
Leg einen Testkunden an, schreib ihm eine Rechnung über einen kleinen Betrag und schick sie raus. Öffne dann den Zahlungslink und bezahle mit einer Stripe-Testkarte: Kartennummer 4242 4242 4242 4242, ein beliebiges Ablaufdatum in der Zukunft, eine beliebige dreistellige Prüfnummer.
Geh danach zurück ins Dashboard. Die Rechnung muss jetzt auf bezahlt stehen und der offene Betrag entsprechend gesunken sein. Wenn das passiert, läuft die ganze Kette: Rechnung raus, Zahlung rein, Status um, Dashboard aktuell.
Für das Mahnwesen setzt du bei einer zweiten Testrechnung das Fälligkeitsdatum auf gestern. Beim nächsten täglichen Durchlauf muss sie auf überfällig springen und die Erinnerung rausgehen.
Häufige Fragen
Emergent stellt mir nach dem ersten Prompt Rückfragen, die ich nicht verstehe. Was antworte ich?
Bestätige die Vorschläge, die Emergent selbst macht. Die Rückfragen drehen sich um technische Details, die für den weiteren Aufbau keine Rolle spielen, solange Kunden, Rechnungen und Positionen so angelegt werden, wie es im Prompt steht.
Müssen alle vier Prompts wirklich in denselben Chat?
Ja. Jeder Prompt baut auf dem auf, was vorher entstanden ist. In einem neuen Projekt fängt Emergent bei null an, und die Teile passen dann nicht zusammen.
Die Erinnerungsmails kommen beim Kunden nicht an.
Schau zuerst im Spam-Ordner des Empfängers nach. Liegt dort nichts, ist meistens der Google-Connector nicht sauber bestätigt. Geh rechts in den Connector-Bereich, entferne die Verbindung und richte sie neu ein.
Kann ich die App auch anderen anbieten?
Technisch ja, sie ist von Anfang an mehrbenutzerfähig, weil jeder Nutzer nur seine eigenen Daten sieht. Sobald du damit Geld verdienst, kommen allerdings Themen wie Auftragsverarbeitung, Datenschutzerklärung und Impressum dazu.
Danke! Magst du kurz sagen, was am meisten geholfen hat? (optional)
Danke. Was hat gefehlt? (optional)