Ein Kölner Dienstleistungsunternehmen verwaltete Angebote, Kundendaten, Zahlungsstände und interne Notizen über mehrere Excel-Dateien. Durch die Ablösung mit einer maßgeschneiderten Web-App spart das Team nun 65 % Zeit ein.
Kurzantwort
Die Ablösung einer manuellen Excel-Datenpflege durch eine moderne, cloudbasierte Web-App (z. B. auf Basis von Next.js, Supabase und Stripe) eliminiert Versionskonflikte und manuelle Fehler bei Angebotserstellung und Buchhaltung. In der Praxis führt dies zu einer drastischen Effizienzsteigerung — im Fall unseres Kölner Kunden zu 65 % Zeitersparnis bei der Angebotserstellung und 0 % Datenkonflikten bei vollständiger Rollen- und Rechteverwaltung.
Ausgangslage
Ein Kölner Dienstleistungsunternehmen verwaltete Angebote, Kundendaten, Zahlungsstände und interne Notizen über mehrere Excel-Dateien. Anfangs war diese Lösung ausreichend, mit wachsender Kundenzahl wurde sie jedoch zunehmend problematisch.
Mehrere Mitarbeiter arbeiteten teilweise gleichzeitig an unterschiedlichen Versionen derselben Datei. Dadurch kam es zu überschriebenen Daten, fehlerhaften Angeboten, doppelten Kundeneinträgen und unklaren Zuständigkeiten. Besonders kritisch war, dass die Angebotserstellung manuell erfolgte: Preise mussten kopiert, Kundendaten übertragen und PDFs einzeln erstellt werden.
Das führte nicht nur zu Zeitverlust, sondern auch zu einem hohen Fehlerrisiko im Kundenkontakt.
Ziel des Projekts
Ziel war es, die Excel-Struktur vollständig durch eine sichere, skalierbare Web-App zu ersetzen. Die neue Lösung sollte Kundendaten zentral speichern, Angebote automatisch erstellen, PDF-Dokumente generieren und Zahlungen digital abwickeln.
Gleichzeitig sollte das System einfach genug bleiben, damit Mitarbeiter ohne technische Vorkenntnisse damit arbeiten können.
Technischer Stack
Frontend
Für die Benutzeroberfläche wäre ein moderner Web-App-Stack sinnvoll:
- Next.js mit React und TypeScript: Damit kann eine schnelle, wartbare und SEO-freundliche Webanwendung gebaut werden. TypeScript reduziert Fehler im Code und macht das Projekt langfristig besser wartbar.
- Tailwind CSS oder shadcn/ui: Für ein sauberes, responsives Interface mit wiederverwendbaren UI-Komponenten. Gerade bei internen Tools ist wichtig, dass Formulare, Tabellen, Filter und Dashboards übersichtlich bleiben.
Backend & Datenbank
- Supabase als Backend-Plattform: Supabase eignet sich sehr gut für solche Projekte, weil mehrere wichtige Backend-Bausteine direkt kombiniert werden:
- PostgreSQL-Datenbank für Kunden, Angebote, Preise und Zahlungen
- Supabase Auth für Login und Rollenrechte
- Row Level Security (RLS) für sicheren Zugriff je nach Mitarbeiterrolle
- Supabase Storage für PDF-Angebote, Anhänge und Kundendokumente
- Supabase Edge Functions für serverseitige Logik, etwa PDF-Erstellung oder Stripe-Webhooks
Die Datenstruktur könnte zum Beispiel aus Tabellen wie customers, offers, offer_items, payments, users, roles und documents bestehen.
PDF-Erstellung
Für die automatische Angebotserstellung könnte man je nach Anforderung verschiedene Technologien einsetzen:
- React-PDF für strukturierte Angebots-PDFs direkt aus React-Komponenten.
- Puppeteer für pixelgenaue PDF-Erstellung aus HTML-Templates.
Der Vorteil: Mitarbeiter geben nur noch Kundendaten und Leistungen ein. Das System erzeugt automatisch ein professionelles PDF mit Logo, Leistungspositionen, Preisen, Steuern, Zahlungsbedingungen und Angebotsnummer.
Zahlungsintegration
- Stripe Checkout und Stripe Webhooks: Stripe könnte genutzt werden, um Zahlungen direkt aus dem Angebot heraus zu ermöglichen. Der Kunde erhält einen Zahlungslink, kann per Karte oder anderen Zahlungsmethoden bezahlen und der Zahlungsstatus wird automatisch in der Web-App aktualisiert. Über Stripe-Webhooks kann Supabase automatisch erkennen, ob eine Zahlung erfolgreich war, fehlgeschlagen ist oder noch offen ist.
Authentifizierung & Rechteverwaltung
Über Supabase Auth könnten unterschiedliche Benutzerrollen eingerichtet werden:
- Admin
- Vertrieb
- Buchhaltung
- Support
- Nur-Lesen-Zugriff
Mit Row Level Security (RLS) wird sichergestellt, dass Nutzer nur auf Daten zugreifen können, für die sie berechtigt sind.
Umsetzung
Im ersten Schritt wurden die bestehenden Excel-Prozesse analysiert. Dabei wurde geprüft, welche Spalten wirklich benötigt werden, welche Daten doppelt gepflegt werden und welche Abläufe automatisiert werden können.
Anschließend wurde die Datenstruktur in PostgreSQL sauber modelliert. Statt unübersichtlicher Excel-Tabellen entstand eine relationale Datenbank mit klaren Verknüpfungen zwischen Kunden, Angeboten, Leistungen und Zahlungen.
Die Web-App erhielt ein Dashboard, über das Mitarbeiter neue Kunden anlegen, bestehende Kunden suchen, Angebote erstellen und den Status einzelner Vorgänge einsehen können.
Ein typischer Ablauf sieht danach so aus:
1. Mitarbeiter legt einen Kunden an. 2. Leistungen werden aus einer vordefinierten Preisliste ausgewählt. 3. Das System berechnet automatisch Summen, Steuern und Rabatte. 4. Das Angebot wird als PDF generiert. 5. Der Kunde erhält einen Zahlungslink über Stripe. 6. Der Zahlungsstatus wird automatisch zurück in das System geschrieben.
Dadurch entfällt das manuelle Kopieren zwischen Excel, Word, PDF-Export und Zahlungsabgleich.
Ergebnis
Die Angebotserstellung wurde deutlich beschleunigt. Statt mehrere Dateien zu öffnen, Daten manuell zu kopieren und PDFs einzeln erstellt werden, läuft der Prozess zentral über eine Web-App.
Messbare Ergebnisse:
- 65 % weniger Zeitaufwand bei der Angebotserstellung
- 0 % Datenkonflikte durch zentrale Datenbank statt Excel-Versionen
- Schnellere Zahlungsabwicklung durch Stripe-Integration
- Weniger manuelle Fehler bei Kundendaten und Preisberechnung
- Bessere Skalierbarkeit für wachsende Teams
Aus einem fehleranfälligen Excel-Prozess entstand eine individuelle Web-App, die den tatsächlichen Arbeitsablauf des Unternehmens abbildet.
Passende nächste Schritte
Vertiefen Sie das Thema mit den wichtigsten Service- und Projektseiten.
Websites & Landingpages
Erfahren Sie, wie wir verkaufsstarke Premium-Websites und Webanwendungen in Köln entwickeln.
KI & Automatisierung
Optimieren Sie Ihre internen Prozesse durch smarte Workflow-Automatisierung und KI-Integration.
Über uns
Lernen Sie unser Team in Köln kennen und erfahren Sie, wie wir Sie bei der Digitalisierung unterstützen.
