Wie wir eine maßgeschneiderte Web-App mit Supabase und Cloudflare entwickeln

Hallo, ich bin Otsuka, CTO bei Liberogic.

Cyberangriffe auf Unternehmenswebsites und -systeme häufen sich, und vorgestern sorgte außerdem eine schwerwiegende Schwachstelle in PHP für Gesprächsstoff.

Die Web-App-Entwicklung, über die wir heute sprechen, lässt sich zwar auch als Architektur verstehen, die den Aufwand für solche Sicherheitsmaßnahmen und den Betrieb möglichst gering hält. Das Thema Sicherheit möchten wir jedoch bei anderer Gelegenheit gesondert behandeln.

Für maßgeschneiderte Web-Apps, die auf die Geschäftsprozesse eines Unternehmens zugeschnitten sind, etwa für Antrags- und Genehmigungsprozesse, Mitgliederbereiche, Portale für Geschäftspartner oder die Zeiterfassung, setzen wir häufig die Kombination aus Supabase und Cloudflare ein.

Früher mussten Datenbank, Authentifizierung, API und Dateispeicher jeweils einzeln aufgebaut und betrieben werden. Dazu gehörten Komponenten wie EC2, RDS, S3 und Cognito in AWS oder eigene Linux-Server mit selbst installiertem Webserver, Middleware und Framework.
Mit Supabase und Cloudflare lassen sich diese Grundlagen von den Diensten übernehmen, sodass man sich ganz auf die Funktionen konzentrieren kann, die die jeweilige App tatsächlich benötigt.

In diesem Beitrag stellen wir einen Überblick darüber vor, welche maßgeschneiderten Web-Apps sich mit der Kombination aus Supabase und Cloudflare umsetzen lassen.

Was ist eine maßgeschneiderte Web-App?

Unter einer "maßgeschneiderten Web-App" verstehen wir eine Webanwendung, die auf die Geschäftsprozesse und Anforderungen eines bestimmten Unternehmens zugeschnitten ist.
Typische Beispiele sind:

• Internes Antrags- und Genehmigungssystem
• Mitgliederbereich
• Portal exklusiv für Geschäftspartner
• Aufwands- und Zeiterfassung
• Projektverwaltung
• Anfragenverwaltung
• Verwaltungssystem für Filialen und Standorte
• System für Dateifreigabe und Prüfung
• Verwaltung von Umfragen und Diagnoseergebnissen
• Administrationsoberflächen für verschiedene Geschäftsprozesse

Wenn Sie uns mit einem solchen Anliegen kontaktieren, prüfen wir zunächst, ob sich Ihre Anforderungen mit einer bestehenden SaaS-Lösung oder einem Standardpaket umsetzen lassen. Bei gängigen Geschäftsprozessen ist die Einführung solcher Lösungen häufig schneller und günstiger.

Wenn man die Anforderungen jedoch konkret zusammenstellt, findet sich selten ein Produkt, das genau passt.
Oft gibt es unternehmensspezifische Freigabeprozesse, Informationen, die je nach Abteilung oder Standort unterschiedlich angezeigt werden sollen, oder notwendige Schnittstellen zu bestehenden Systemen.

Wenn das so ist, ist es in der Praxis oft die bessere Lösung für Kunden, statt den Betrieb dauerhaft an ein SaaS-Produkt anzupassen, eine maßgeschneiderte Web-App zu entwickeln, die exakt zu ihren Arbeitsabläufen passt. Diese Einschätzung treffen wir häufig.

Supabase bündelt die Datenbasis für Web-Apps

Supabase ist ein Dienst, der die Backend-Funktionen bündelt, die für eine Web-App benötigt werden.

Der Dienst gewinnt weltweit stark an Bedeutung und wird von mehr als 10 Millionen Entwicklern genutzt. Der US-amerikanische Startup-Accelerator Y Combinator hat bekanntgegeben, dass 55 % des jüngsten Batches Supabase eingesetzt haben. Damit entwickelt sich der Dienst zunehmend zur Standardwahl für das Backend neuer Services.

Diese Erfolge stammen überwiegend von Diensten mit vielen Endnutzern im B2C-Bereich. Wir setzen diesen Ansatz jedoch auch ein, weil wir der Meinung sind, dass er sich ohne Weiteres auf betriebsinterne Web-Apps übertragen lässt, also auf Anwendungen für den internen Gebrauch im Unternehmen oder für Geschäftspartner.

Zu den zentralen Funktionen gehören:

• Database (verwaltetes PostgreSQL-Datenbanksystem)
• Auth (Benutzerauthentifizierung und Anmeldung)
• Automatisch generierte API (Sobald Tabellen definiert sind, steht sofort eine REST-API zur Verfügung)
• RLS (Row Level Security: zeilenbasierte Zugriffskontrolle)
• Storage (Dateispeicher)
• Realtime (Echtzeitkommunikation)
• Edge Functions (serverlose API-Verarbeitung)

und weitere.

Für Geschäftsanwendungen lassen sich Benutzerinformationen, Projektdaten, Antragsdaten und Aktivitätsprotokolle in der Supabase-Datenbank verwalten.

Mit Supabase Auth lässt sich außerdem direkt eine Anmeldefunktion integrieren. Besonders gut passt diese Authentifizierung zu Geschäftsanwendungen, da sie die Anmeldung mit Microsoft- und Google-Konten unterstützt.

Wenn ein Unternehmen bereits Microsoft 365 oder Google Workspace nutzt, können sich Mitarbeitende mit ihren gewohnten Konten anmelden. Es müssen keine separaten App-IDs und Passwörter neu vergeben werden, und die Verwaltung von Konten bei Ein- und Austritten lässt sich in die bestehenden Abläufe integrieren.

Früher wurden Datenbank und Authentifizierung oft getrennt aufgebaut und miteinander verbunden. Mit Supabase lassen sich Daten und Authentifizierung dagegen in einer gemeinsamen Plattform zusammenführen.

Mit Row Level Security (RLS) lässt sich festlegen,

• dass Nutzende nur ihre eigenen Daten sehen.
• Nur Daten des eigenen Standorts anzeigen
• Administratoren können alles einsehen

Solche Steuerungen lassen sich auch auf der Datenbankebene umsetzen.

Bei Geschäftsanwendungen ist diese Berechtigungssteuerung besonders wichtig.

Auslieferung des Frontends mit Cloudflare

Allerdings kann Supabase allein eines nicht leisten: das Hosting der Website (des Frontends).
Datenbank und API lassen sich zwar bei Supabase betreiben, die Oberfläche, die Nutzer im Browser aufrufen, muss jedoch von einem anderen Ort ausgeliefert werden.

Die bekanntesten Auslieferungsplattformen sind Vercel und Cloudflare. Wir setzen auf Cloudflare, und zwar aus mehreren Gründen.

• DNS, CDN, WAF und die Auslieferung der Anwendung lassen sich zentral in Cloudflare verwalten
• Mit Cloudflare Workers lassen sich neben der Frontend-Auslieferung auch API-Verarbeitung und die Anbindung externer Dienste bündeln
• R2 (Speicher) und Access (Zugriffsbeschränkung) sowie weitere Zusatzdienste passen gut zu Geschäftsanwendungen
• Das Abrechnungsmodell nach übertragenem Datenvolumen ist einfach, und das Budget lässt sich gut planen.

Cloudflare wird oft vor allem mit CDN und DNS in Verbindung gebracht. Inzwischen eignet sich der Dienst jedoch auch gut als Ausführungsplattform für Web-Anwendungen.

Cloudflare aus der Perspektive einer Agentur betrachtet

In dieser Architektur übernimmt Cloudflare also die Verarbeitung der Benutzeranfragen bis zur Auslieferung von Oberflächen und APIs, während Supabase für Daten, Authentifizierung und Zugriffskontrolle im Hintergrund zuständig ist.

Supabase und Cloudflare kombinieren

Ein Beispiel für eine solche Architektur:

Eine App auf Cloudflare Workers nimmt Benutzeranfragen entgegen und liefert Oberflächen und APIs aus. Im Hintergrund übernimmt Supabase die Verwaltung von Daten und Authentifizierung.

Bei Bedarf können E-Mails über SendGrid versendet, Dateien in externen Speichern wie Box abgelegt oder Schnittstellen zu anderen Geschäftssystemen über APIs angebunden werden.

Der Vorteil dieser Architektur liegt darin, dass sie aus gängigen Standardtechnologien besteht und nicht an bestimmte Partner gebunden ist.
Alles, was eine API-Anbindung unterstützt, lässt sich frei einbinden, egal ob es sich um ein bestehendes Kernsystem oder ein bereits genutztes SaaS-Produkt handelt. Die bei Softwarepaketen häufige Einschränkung „Dieses Produkt lässt sich nur mit ○○ verbinden“ entfällt damit.

Beispiele für Geschäftsanwendungen, die sich so umsetzen lassen

Interne Antrags- und Genehmigungs-App

Eine App, in der Standorte und Sachbearbeiter Anträge erfassen, die von Vorgesetzten oder Administratoren genehmigt werden.
Je nach angemeldetem Benutzer lassen sich

• nur die eigenen Anträge anzeigen
• die Anträge des eigenen Standorts anzeigen
• alle Anträge für Administratoren anzeigen

Auch solche Steuerungen sind möglich.
Man kann sich das so vorstellen, dass Prozesse, die bisher per E-Mail und Excel abgewickelt wurden, direkt als Webanwendung umgesetzt werden.

Portal für Geschäftspartner

Für jeden Geschäftspartner wird eine eigene Log-in-ID vergeben, mit der sich

• Dokumente einsehen
• Dateien hochladen
• Fortschrittsprüfung
• Kontakt
• Einsehen von Vertragsinformationen

Sie können auch ein Portal erstellen, über das sich beispielsweise Vertragsinformationen einsehen lassen.
Auch Zugriffssteuerungen, etwa die Anpassung der angezeigten Informationen je nach Geschäftspartner, lassen sich verhältnismäßig einfach umsetzen.

Aufwands- und Zeiterfassung

Eine Web-App, in der Mitarbeitende Arbeitszeiten und Aufwände erfassen und nach Projekt oder Verantwortlichem auswerten können.
Bei Sonderregeln oder unternehmensspezifischen Auswertungsmethoden, mit denen gängige Zeiterfassungs-SaaS-Lösungen nur schwer umgehen, ist eine maßgeschneiderte Web-App oft die bessere Wahl.

Bei solchen Abläufen ist es oft mühsamer, sie an eine Standardsoftware anzupassen, als eine eigene Lösung zu entwickeln.

Standortverwaltungssystem

Ideal für Web-Apps, in denen Filialen oder Vertriebsbüros im ganzen Land Daten erfassen und die Zentrale diese gebündelt verwaltet.

Von internen Werkzeugen für wenige Nutzende bis hin zu Geschäftsanwendungen für mehrere Standorte ist vieles umsetzbar.
Supabase eignet sich nicht nur für kleine Projekte.
Je nach Architektur lässt es sich für eine breite Palette an Einsatzzwecken nutzen.

Beispiele für Anwendungen, bei deren Umsetzung wir Sie unterstützen:

Toyota Motor Corporation SNS-Verwaltungssystem "TOYOTA Social Hub" – UI/UX-Design und Systementwicklung

Kriterien für eine maßgeschneiderte Web-App statt SaaS

Wir haben bisher die Vorteile maßgeschneiderter Web-Apps vorgestellt, doch sie sind nicht immer die richtige Lösung.
Woran erkennt man also, dass sich eine eigene Entwicklung lohnt? Im Folgenden zeigen wir Anhaltspunkte, die wir aus Beratungsgesprächen mit Kunden gewonnen haben.

• Dauerhafte Behelfslösungen im Betrieb
  Freigabewege unterscheiden sich je nach Abteilung, es gibt viele Ausnahmen, und der Geschäftsprozess weicht vom Standardmodell des SaaS-Produkts ab. Diese Abweichungen lassen sich über Einstellungen nicht mehr sauber abbilden.
• Feingranulare Rechte- und Ansichtssteuerung
  Je nach Abteilung, Standort oder Geschäftspartner sollen unterschiedliche Informationen sichtbar sein. Die Rechteverwaltung der SaaS-Lösung ist dafür jedoch nicht fein genug.
• Arbeitsabläufe über mehrere Tools verteilt
  Excel, E-Mails und mehrere SaaS-Produkte werden parallel genutzt, und Daten werden täglich manuell übertragen oder kopiert.
• Viele unternehmensspezifische Felder und Auswertungsregeln
  Firmenspezifische Daten werden in die allgemeinen Felder eines SaaS-Produkts gezwängt.
• Zu viele oder zu wenige Funktionen für den Arbeitsalltag
  Ein generisches SaaS-Produkt ist oft unübersichtlich und wird im Alltag nicht genutzt, oder es fehlen genau die Funktionen, die gebraucht werden.

Wenn nur ein oder zwei Punkte zutreffen, lassen sich die Probleme oft durch Anpassungen an den SaaS-Einstellungen oder den Betriebsabläufen lösen.
Wenn jedoch mehrere Punkte zutreffen und sich täglich kleine Mehraufwände summieren, ist es aus unserer Sicht an der Zeit, eine auf den Betrieb zugeschnittene Web-App in Betracht zu ziehen.

Tatsächlich beginnen Projekte für maßgeschneiderte Web-Apps häufig mit Anfragen wie „Wir möchten die in Excel verwalteten Informationen webbasiert abbilden“, „Wir möchten die per E-Mail laufenden Anträge systematisieren“ oder „Wir möchten Prozesse, die mehrere SaaS-Produkte umfassen, in einem System bündeln“.

Klein anfangen und im Einsatz wachsen lassen

Bisher haben wir über die technische Architektur gesprochen. Abschließend möchte ich jedoch vor allem auf den Projektablauf eingehen und weniger auf die Funktionen von Supabase oder Cloudflare selbst.

"Was genau gebaut werden sollte", erschließt sich aus einer Anforderungsspezifikation oft erstaunlich wenig

Klassische Softwareentwicklung beginnt mit der Anforderungsdefinition. Dabei werden die bestehenden Geschäftsprozesse zunächst in Dokumenten erfasst und anschließend ein System entworfen, das diese Anforderungen erfüllt.

Dieser Ansatz hat jedoch eine Schwäche. Die Dokumente können die Geschäftsprozesse zwar vollständig abbilden, doch oft fehlt dabei die Frage, ob die Oberfläche tatsächlich gut bedienbar ist und ob eine Funktion wirklich benötigt wird. So sammeln sich Anforderungen an, ohne dass sie hinterfragt werden.
Gerade für Verantwortliche im Bereich DX, die selbst keine Softwareentwickler sind, ist es daher sehr schwierig, die Sinnhaftigkeit der Anforderungen allein anhand von Text und Tabellen zu beurteilen.

Bei Liberogic setzen wir deshalb nicht zuerst auf ein umfangreiches Anforderungsdokument. Stattdessen erstellen wir mit Figma, v0 und Claude Code Mockups, also klickbare Entwürfe der Benutzeroberfläche, und arbeiten anhand dieser Entwürfe gemeinsam an den Anforderungen.

Anders als bei einer reinen Textspezifikation lässt sich ein Mockup direkt ausprobieren, sodass man sofort erlebt, wie sich die Anwendung anfühlt. Dabei zeigt sich oft etwas Interessantes: Der Blick verschiebt sich von der Prüfung der Dokumente hin zur Verbesserung der Arbeitsabläufe. Typische Reaktionen sind etwa: "Mit dieser Ansicht würde sich dieser Teil der Arbeit deutlich vereinfachen" oder "Könnte man nicht auch die andere Aufgabe automatisieren?"

Bei einer individuellen Webanwendung ist gerade die Frage, was überhaupt gebaut werden sollte, besonders wichtig. Sie lässt sich nach unserer Erfahrung nicht in Dokumenten beantworten, sondern entsteht erst, wenn alle Beteiligten anhand von Mockups eine gemeinsame Vorstellung entwickeln.

Zunächst nur die Grundfunktionen umsetzen und dann live gehen

Wir alle Anforderungen vorab festlegen und das System dann in einem Zug fertigstellen, wie es beim klassischen Wasserfallmodell üblich ist, machen wir nicht. Sobald sich anhand der Mockups eine klare Richtung abzeichnet, implementieren wir zunächst die Grundfunktionen wie Anmeldung, Datenerfassung, Listenansichten und Verwaltungsbereich und gehen anschließend live.

Danach wird die Anwendung im Alltag genutzt, während Bedienbarkeit und Rückmeldungen aus der Praxis ausgewertet werden. Auf dieser Basis werden nach und nach Freigabefunktionen, E-Mail-Benachrichtigungen, Dateiverwaltung und Anbindungen an externe APIs ergänzt.
Die Kombination aus Supabase und Cloudflare passt dabei besonders gut zu diesem schrittweisen Vorgehen.

Schrittweise aufbauen, passend zu Budget und Geschäftswert

„Klein anfangen und bei Bedarf erweitern" betrifft auch das Budget. Zum Beispiel:

• Die Funktionen werden Stück für Stück entwickelt, passend zum jährlich verfügbaren Budget.
• Zunächst startet man mit einer kleinen Version, und sobald der geschäftliche Nutzen sichtbar wird, investiert man gezielt nach und erweitert die App.

So ist ein Vorgehen möglich. Es ist nicht nötig, die gesamten Entwicklungskosten im Voraus in einer Summe bereitzustellen, um eine Geschäftsanwendung zu besitzen und weiterzuentwickeln. Unserer Erfahrung nach gelingen Geschäftsanwendungen häufig besser, wenn sie im Einsatz verbessert werden, statt von Beginn an sämtliche Anforderungen vollständig festzulegen.

Fazit

Durch die Kombination von Supabase und Cloudflare lässt sich eine eigene Web-Anwendung mit Authentifizierung, Datenbank, Rechteverwaltung, API und Dateibereitstellung in einem vergleichsweise schlanken Aufbau realisieren. Vom kleinen internen Werkzeug über ein Partnerportal bis hin zu einem Geschäftssystem für mehrere Standorte lässt sich das je nach Bedarf erweitern.

Entscheidend ist jedoch weniger das Werkzeug selbst, also Supabase oder Cloudflare, sondern das Vorgehen.

• Zunächst wird mit einem Mockup eine gemeinsame Vorstellung davon geschaffen, wie die Anwendung im Alltag genutzt wird, um zu klären, was tatsächlich gebaut werden sollte.
• Nur die Grundfunktionen entwickeln und die Anwendung zügig launchen
• Im Einsatz weiterentwickeln, passend zu Budget und Geschäftswert

Früher war diese Vorgehensweise kaum praktikabel. Sowohl die Implementierung von Software als auch der Aufbau der Infrastruktur waren teuer, weshalb zuvor alles im Voraus festgelegt werden musste, bevor die Entwicklung begann.

Heute lassen sich Projekte dank moderner Technologie-Stacks wie Supabase und Cloudflare sowie KI-Agenten-gestützter Entwicklung und Prototyping in einer Form umsetzen, die dem Ideal weitaus näher kommt: Zuerst entsteht etwas Greifbares, das im Einsatz kontinuierlich weiterentwickelt wird. Genau diese Vorgehensweise beherrscht Liberogic.

"Können wir diesen Arbeitsablauf, der derzeit über Excel und E-Mails läuft, nicht in eine Webanwendung überführen?" Oder: "Wir haben eine SaaS-Lösung ausprobiert, aber sie passt nicht richtig zu unseren Prozessen." Auch in einer solchen frühen Phase sind Sie bei uns richtig. Gemeinsam entwickeln wir eine Struktur, die zu Ihrem Geschäft passt. Kontaktieren Sie uns gerne unverbindlich.