Lumora PortfolioAlle Projekte
Logo Richter Garten- und LandschaftsbauKundenprojekt · Garten- und Landschaftsbau, Delmenhorst

Richter Garten- und Landschaftsbau

Richter ist ein Meisterbetrieb für Garten- und Landschaftsbau aus Delmenhorst. Wir haben die Website gebaut und dazu ein komplettes Betriebssystem: eine Büro-App für Gärtnermeister Tim Richter, eine Kunden-App mit Portal, eine Mitarbeiter-App für die Baustelle und Richter Pay für die Online-Zahlung. Alle Apps greifen auf denselben Datenbestand zu. Ein angenommenes Angebot wird so zum Projekt, zur Anzahlung, zum Einsatz im Team und am Ende zur bezahlten Rechnung, ohne Excel daneben.

  • 6Bausteine
  • 7Anbindungen
  • 4Sprachen
  • 24Technologien
Übersicht der Büro-App mit Umsatz, offener Arbeit, Fälligkeiten und offenen RechnungenBeispieldaten
Startseite am Handy
  • 1.149automatische Tests in der Büro-App
  • 473Artikel aus der Excel-Preisliste übernommen
  • 3iPhone-Apps: Büro, Kunde und Mitarbeiter
  • 4Rechnungsarten: Rechnung, Abschlag, Schluss, Gutschrift
Zusammenspiel

So hängt alles zusammen.

Links die Kanäle und Eingänge, in der Mitte unsere Systeme, rechts die angebundenen Dienste. Die Linien zeigen, wohin die Daten fließen.

03Team
04Angebunden

Von uns gebautAngebundenKnoten antippen oder mit der Maus darauf zeigen, um die Verbindungen zu sehen

Ablauf

Von der Anfrage bis zum Zahlungseingang

  1. Anfrage kommt rein

    Über den Assistenten der Website, aus dem Kundenportal oder als Interessent, den ein Mitarbeiter auf der Baustelle aufnimmt.

  2. Angebot rechnen

    Tim rechnet in der Büro-App aus dem Katalog oder lässt die KI aus einer Beschreibung kalkulieren und verschickt das Angebot als PDF.

  3. Annahme im Portal

    Der Kunde nimmt das Angebot per Mail-Link oder in der Kunden-App an. Daraus entstehen Kunde, Projekt und Portalzugang.

  4. Anzahlung per Richter Pay

    Mit der Annahme entsteht die Abschlagsrechnung. Der Kunde zahlt sofort, die Zahlung wird von selbst verbucht.

  1. Einsatz auf der Baustelle

    Das Projekt steht im Einsatzplan. Das Team stempelt in der Mitarbeiter-App, dokumentiert mit Fotos und Bericht, der Kunde sieht den Stand.

  2. Schlussrechnung

    Die Büro-App erstellt die Rechnung aus dem Angebot, zieht die Anzahlung ab und schlägt den Leistungszeitraum aus den Einsatztagen vor.

  3. Zahlungseingang

    Der Kunde zahlt aus Mail oder Portal. Richter Pay hakt die Rechnung ab, schickt den Beleg und meldet Tim den Eingang aufs Handy.

01
Website

Website

Der neu gegründete Meisterbetrieb hatte keine eigene Website. Wir haben sie mit Next.js gebaut: Startseite mit animiertem Logo, sechs Leistungsseiten, Über uns und Kontakt. Anfragen laufen über einen Assistenten in drei Schritten und gehen direkt an Tim. Strukturierte Daten für Google und eine Sitemap bilden die SEO-Grundlage.

Startseite: Ihr Garten in Meisterhand
Abschnitt Persönlich vom Meister mit Zitat von Tim Richter
Seite Leistungen: alles für Ihren Garten aus einer Hand
Leistungsseite Pflasterarbeiten in Delmenhorst und Umgebung
Kontaktseite mit dem Anfrage-Assistenten in drei Schritten
Startseite am Handy
Anfrage-Assistent am Handy, Schritt 1: Worum geht es?
  • Sechs Leistungsseiten von Gartenpflege bis zur Bekämpfung des Eichenprozessionsspinners
  • Anfrage-Assistent in drei Schritten: Thema, Ort und Zeit, Kontakt
  • Prüfung jedes Schritts mit denselben Regeln wie auf dem Server
  • Spam-Schutz durch unsichtbares Feld und Mindest-Ausfüllzeit
  • Logo als Vektor nachgebaut, es wächst beim ersten Aufruf einer Sitzung auf
  • Strukturierte Daten als Handwerksbetrieb mit Einsatzgebiet
  • Sitemap und eigene Vorschaubilder für geteilte Links
  • Automatische Tests für Formular, Inhalte und Strukturdaten
Technik
  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • Bun
  • Node.js
  • E-Mail (SMTP/IMAP)
  • PM2
  • nginx
  • Cloudflare
02
Web-App und iPhone-App

Büro-App

Mit der Büro-App führt Tim den ganzen Betrieb, am Rechner wie auf dem iPhone. Angebote entstehen aus dem eigenen Katalog und werden als PDF verschickt, angenommene Angebote werden zu Projekten mit Team und Terminen. Rechnungen bekommen feste Nummernkreise, eine Freigabe-Prüfliste und ein Mahnwesen in drei Stufen. Der Posteingang sammelt alles, was aus Kunden-App, Mitarbeiter-App und Richter Pay hereinkommt.

Übersicht: Umsatz, offene Arbeit, Fälligkeiten und offene Rechnungen auf einen BlickBeispieldaten
Angebot mit neun Positionen aus dem Katalog, angenommen und als Projekt angelegtBeispieldaten
Fertiges Angebot als A4-Dokument mit Logo, Positionen und LeistungstextenBeispieldaten
Projektakte mit Team, Terminen, Angebot, Anzahlungsrechnung und erfassten StundenBeispieldaten
Rechnungsliste mit Status, Fälligkeit und offenen BeträgenBeispieldaten
Einsatzplan der Woche: welche Baustelle mit welchem TeamBeispieldaten
Termine des Tages auf der Karte von DelmenhorstBeispieldaten
Katalog mit Leistungen, Einheiten und PreisenBeispieldaten
Fuhrpark mit Kennzeichen, Status, TÜV-Fristen und KilometerständenBeispieldaten
Finanzen: Umsatz je Monat, Auftragswert nach Projekt und Top-KundenBeispieldaten
  • Kunden und Interessenten mit Dublettenabgleich und Kundenakte
  • Angebote aus dem Katalog mit Leistungstexten, Anzahlung und PDF
  • Annahme macht aus dem Interessenten einen Kunden und legt das Projekt an
  • Rechnung, Abschlag, Schlussrechnung und Gutschrift, Storno statt Löschen
  • Termine als Kalender, Liste und Karte, dazu der Einsatzplan der Woche
  • Zeitkonten und Zeitauswertung aus der Mitarbeiter-App
  • Geräte mit QR-Code, Fuhrpark mit TÜV-Fristen, Bestand mit Mindestmengen
  • Belege fotografieren, die KI liest Händler, Datum und Betrag
  • Belegmappe für den Steuerberater als ZIP mit CSV
  • Finanzen mit Umsatz je Monat, Auftragswert je Projekt und Top-Kunden
Technik
  • JavaScript
  • Node.js
  • Express
  • SQLite
  • HTML
  • CSS
  • Progressive Web App
  • Web Push
  • Puppeteer
  • OpenStreetMap
  • E-Mail (SMTP/IMAP)
  • Capacitor
  • iOS
03
KI-Assistent

Dein Gehirn

Im Bereich „Dein Gehirn“ erzählt Tim, wie er arbeitet und kalkuliert, und die KI fragt gezielt nach. Jeder Satz landet als einzelner Eintrag in einem von zehn Themengebieten und gilt erst, wenn Tim ihn bestätigt. Aus einer Beschreibung wie „200 m² Rollrasen, 15 m Hecke“ rechnet die KI mit den Preisen aus dem Katalog einen Angebotsentwurf und stellt Rückfragen, wenn eine Menge fehlt.

Dein Gehirn: Themengebiete, Gespräch mit der KI und neu gelernte EinträgeBeispieldaten
Angebot aus Text rechnen: Arbeiten beschreiben, die KI kalkuliert aus dem Katalog
  • Gespräch je Themengebiet, von Leistungen bis Unternehmertum
  • Jeder Eintrag einzeln bestätigen oder löschen
  • Angebot aus Text rechnen mit den Preisen aus dem Katalog
  • Bis zu drei Rückfragen der KI, Antworten fließen in die Rechnung ein
  • Positionen ohne sichere Menge werden mit „Menge prüfen“ markiert
  • Belege per Foto lesen lassen, Tim bestätigt mit einem Klick
  • Monatlicher Kostendeckel für die KI-Nutzung
Technik
  • OpenAIOpenAI
  • Node.js
  • SQLite
  • JavaScript
04
iPhone-App und Web-App

Kunden-App und Kundenportal

Jeder Kunde bekommt nach der Annahme seines Angebots einen Zugangscode für das Portal, im Browser oder als iPhone-App. Dort sieht er den nächsten Termin, den Stand seines Projekts mit Fotos und Berichten vom Team und alle Dokumente. Angebote nimmt er mit einem Tipp an und leistet direkt die Anzahlung. Fragen mit Foto landen im Posteingang der Büro-App, die Antwort kommt im Portal zurück.

Anmeldung mit Zugangscode: Ihr Garten im BlickBeispieldaten
Startseite mit nächstem Termin, neuer Antwort und offener RechnungBeispieldaten
Dokumente: Angebot annehmen und 30 % anzahlenBeispieldaten
Projekt mit Fortschritt, Terminen, Fotos und Bericht vom TeamBeispieldaten
Frage mit Foto an den Betrieb und Antwort aus dem BüroBeispieldaten
  • Anmeldung mit persönlichem Zugangscode
  • Nächster Termin und offene Punkte auf der Startseite
  • Projektstand in Prozent mit Terminen, Baustellenfotos und Berichten
  • Angebot annehmen und die vereinbarte Anzahlung leisten oder ablehnen
  • Rechnungen mit Skonto-Hinweis direkt bezahlen
  • Angebote, Rechnungen und Zahlungsbelege als Dokument öffnen
  • Fragen an den Betrieb, gern mit Foto aus dem Garten
  • Neues Angebot anfragen und Empfehlungslink weitergeben
Technik
  • JavaScript
  • HTML
  • CSS
  • Node.js
  • Express
  • Stripe
  • Capacitor
  • iOS
05
iPhone-App

Mitarbeiter-App

Das Team stempelt in der Mitarbeiter-App morgens ein und startet den Auftrag, an dem es arbeitet. So sieht Tim die Zeit je Baustelle, getrennt nach Arbeit und An- und Abfahrt. Auf jeder Baustelle dokumentieren die Mitarbeiter Fotos, Aufmaß, Leistungen und einen Bericht, der im Kundenportal erscheint. Kaputte Geräte melden sie mit Foto, neue Interessenten nehmen sie mit einem Knopf auf.

Zeiterfassung: Arbeitstag läuft, Pause, Gehen und Auftrag startenBeispieldaten
Baustellen der Woche mit Zeiten und DokumentationBeispieldaten
Auftrag mit Karte, Fotos vom Baustand und BerichtBeispieldaten
Meldung: Was ist kaputt? Foto aufnehmen und an Tim sendenBeispieldaten
Termine und Urlaub im MonatskalenderBeispieldaten
  • Kommen, Pause und Gehen mit Soll und Ist für Tag, Woche und Monat
  • Auftrag starten, damit die Zeit der richtigen Baustelle zugeordnet wird
  • Baustellen der Woche mit Karte, Anruf und Navigation
  • Dokumentation mit Fotos, Notiz, Aufmaß, Leistungen und Bericht
  • Schadensmeldung mit Foto direkt an Tim
  • Termine, Urlaub und Abwesenheit beantragen
  • Interessenten von der Baustelle aufnehmen, Tim ruft zurück
  • Private Notizen, die das Büro nicht sieht
Technik
  • JavaScript
  • HTML
  • CSS
  • Node.js
  • Express
  • OpenStreetMap
  • Capacitor
  • iOS
06
Zahlungssystem

Richter Pay

Richter Pay ist unser eigenes Zahlungsmodul auf Basis von Stripe, das Geld geht direkt auf Tims eigenes Stripe-Konto. Im Portal zahlt der Kunde in Richters Farben, ohne die Seite zu verlassen; aus der Rechnungsmail führt ein Bezahlknopf auf eine Bezahlseite. Bezahlt wird immer der offene Rest, berechnet auf dem Server. Jeder Eingang wird über eine signierte Meldung von Stripe verbucht, hakt die Rechnung ab und erzeugt einen Zahlungsbeleg.

Rechnung aus der Mail: Skonto-Hinweis und Knopf zum Online-BezahlenBeispieldaten
Zahlungsbeleg im Kundenportal nach der AnzahlungBeispieldaten
Abschlagsrechnung in der Büro-App, über Richter Pay per Lastschrift bezahltBeispieldaten
Einstellungen Richter Pay: Mahnwesen, Online-Zahlung und Kontoauszugstext
  • Anzahlung beim Annehmen erzeugt automatisch eine Abschlagsrechnung
  • Abschläge werden in der Schlussrechnung abgezogen
  • Karte, Lastschrift und die Bezahlverfahren des Geräts
  • Skonto bei schneller Zahlung, im Portal mit Betrag und Frist angezeigt
  • Signierte Stripe-Meldungen, jede Zahlung wird genau einmal gebucht
  • Lastschrift gilt erst als bezahlt, wenn das Geld wirklich eingegangen ist
  • Schutz vor Doppelzahlung bei zwei offenen Bezahlvorgängen
  • Überzahlung und Rückbuchung landen als Hinweis im Posteingang
  • Zahlungsbeleg für den Kunden und Push an Tim bei jedem Eingang
  • Eigener Text auf dem Kontoauszug des Kunden
Technik
  • Stripe
  • Node.js
  • Express
  • SQLite
  • JavaScript
Technik

Programmiersprachen und Technik.

Programmiersprachen
  • TypeScript
  • JavaScript
  • HTML
  • CSS
Frameworks und Bibliotheken
  • React
  • Next.js
  • Tailwind CSS
  • Bun
  • Node.js
  • Express
  • Progressive Web App
  • Puppeteer
  • Capacitor
Datenbanken
  • SQLite
Künstliche Intelligenz
  • OpenAIOpenAI
Plattformen und Betrieb
  • PM2
  • nginx
  • Cloudflare
  • iOS
  • App Store
Verbindungen

Womit alles verbunden ist.

Jede Anbindung mit dem, wofür sie im Alltag genutzt wird.

  • Stripe

    Online-Zahlung von Anzahlungen und Rechnungen, Verbuchung über signierte Meldungen

  • OpenAI

    Angebot aus Text, Rückfragen, Wissensgespräch und Belege lesen

  • E-Mail (SMTP/IMAP)

    Angebote, Rechnungen, Zugangsdaten, Zahlungsbestätigungen und Website-Anfragen

  • Web Push

    Benachrichtigung an Tim bei neuen Anfragen, Annahmen und Zahlungen

  • OpenStreetMap

    Karten für Termine und Baustellen, Adressvorschläge

  • Cloudflare

    Schutz und Auslieferung für Website, Büro-App und Portal

  • App Store

    Büro-, Kunden- und Mitarbeiter-App für das iPhone