1. 01 · Übersicht
  2. 02 · Flow
  3. 03 · Inventar
  4. 04 · Mobile
  5. 05 · Output
  6. 06 · Entscheidungen
  7. 07 · Ablauf
  8. 08 · Messbar
  9. 09 · Weitere
Case Study · App & SaaS · 2025

Verleih-App
RAD Elster.

Eine eigene Anwendung, die den Fahrradverleih komplett ohne Excel-Tabelle und Telefon-Pingpong betreibt: Inventur, Preise, Kalender, Online-Anfrage von der Marketing-Site, automatischer Leihvertrag mit SEPA-QR-Code zum Bezahlen — alles in einer PWA, die der Mitarbeiter im Laden auf dem Handy bedient.

Live Seit 2025 PWA · iOS & Android Anfrage-Anbindung an radelster.de Auto-PDF mit SEPA-QR Web-Push
verleih.radelster.de
Touchpoint · Kunde Wizard-Formular auf radelster.de — Zeitraum, Bike, Größe, Daten
Touchpoint · Mitarbeiter PWA auf dem Handy — Push, Freigabe, Kalender, Inventar
Output · Automatisiert Leihvertrag-PDF mit SEPA-QR per Mail an den Kunden

Von der Anfrage bis zur Quittung — in einer Linie.

Der ganze Weg vom Browserfenster eines Kurgastes bis zur PDF-Quittung mit SEPA-QR-Code läuft in sieben Stationen. Keine Excel-Tabelle, kein Mail-Hin-und-Her, keine manuelle Vertragspflege. Der Mitarbeiter im Laden tippt einmal auf „Freigeben" — der Rest geschieht automatisch.

01 Wizard auf radelster.de Browser · Static
02 Vercel Edge Proxy Secret-Handler
03 Neon Postgres Anfrage gespeichert
04 Web-Push an Admin ~1.5 s Latenz
05 Freigabe in PWA 1 Tap
06 PDF + SEPA-QR pdf-lib · qrcode
07 Bestätigungs-Mail Resend · ~2 s
Warum so
Die Marketing-Site auf radelster.de kennt das API-Secret nicht — ein Vercel Edge Proxy hängt das Token serverseitig an und reicht den Request weiter zur PWA auf verleih.radelster.de. Damit ist die öffentliche Webseite frei von Geheimnissen und die App-Datenbank trotzdem geschützt. Der Push trifft den Mitarbeiter im Laden auf dem Handy, eine kurze Freigabe genügt — danach läuft alles ohne weitere Berührung durch.

Eine Quelle für
Preise und Bestand.

Vorher: Excel auf einem Rechner im Laden, Whiteboard für den Kalender, Preisliste auf der Webseite per Hand pflegen. Drei Stände, die fast nie zusammenpassten.

Jetzt: Bikes, Größen, Tagespreise, Wochenend-Tarife, Wochen-Tarife und Verfügbarkeit liegen in einer Datenbank. Die App ist die Pflegezentrale, die Marketing-Site liest passiv den Bestand. Wer im Inventar einen Preis ändert, ändert ihn überall.

verleih.radelster.de/inventar/raeder
Admin
Räder 4 Modelle · 11 Räder
Centurion E-Fire City R650iE-Bike Tourenrad
XS S M L
35 € / 69 € / 199 €
Cube AMS Zero 99 TeamlinePremium MTB
S M L
55 € / 109 € / Anfr.
Bio-Bike TourTourenrad ohne Motor
S M L
25 € / 45 € / 149 €
Rennradauf Anfrage
S M
Auf Anfrage
11 Räder im Bestand
3 Aktuell verliehen
8 Sofort verfügbar

Die App lebt auf dem Handy.

Im Laden steht kein Bildschirm, an dem jemand wartet — der Mitarbeiter ist zwischen Werkstatt, Verkaufsfläche und Verleih unterwegs. Die App ist deshalb keine Web-Oberfläche, die mobil auch funktioniert, sondern eine PWA, die wie eine native App installiert wird: Home-Icon, Push, offline-fähig, kein Browser-Chrome.

09:42
RAD Elster Verleih jetzt
Neue Anfrage
M. Novák · Fr–So · Centurion E-City M · 69 €

Anfragen

3 neu
M. Novák Neu
Fr–So · E-City M · 69 € vor 12 s
K. Schreiber Neu
Sa–So · MTB S · 109 € vor 4 min
P. Hájek Freigegeben
Mo–Mo · Bio-Tour L · 149 € vor 1 h
L. Werner Wartet
Sa–So · E-City L · 69 € vor 3 h
Screen 01 Push & Anfrage-Liste Push trifft den Mitarbeiter sofort. Aus der Liste heraus geht ein Tap zur Freigabe.
09:43

Belegung

Mai
Mai 2026 E-City Tour
MoDiMiDoFrSaSo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Teil Voll Frei
14 Tage belegt
67 % Auslastung Mai
Screen 02 Kalender & Auslastung Pro Modell sichtbar, welche Tage frei sind. Wochenend-Bookings werden auf einen Blick erkennbar.
09:44

Freigabe

#A-241
M. NovákKarlovy Vary
Fr 17.5. – So 19.5.Wochenende
Centurion E-CityGröße M
Summe 69 €
#A-241
Leihvertrag
SEPA
Ablehnen Freigeben
Screen 03 Freigabe in einem Tap Bestätigen löst PDF-Erzeugung, SEPA-QR-Generierung und Mail-Versand aus. Kein weiterer Klick nötig.

Ein Vertrag, der sich
selbst bezahlt.

Sobald der Mitarbeiter eine Anfrage freigibt, generiert die App im selben Atemzug zwei PDFs: den Leihvertrag mit allen Mietdaten und die geltenden AGB. Beides geht per Mail an den Kunden. Eingebettet im Vertrag: ein SEPA-Überweisungs-QR-Code mit Empfänger, Betrag und Verwendungszweck — der Kunde scannt mit seiner Banking-App, Zahlung sitzt.

Keine Zahlungsanbieter-Gebühren, keine Online-Payment-Integration, keine Stripe-Conversion-Fees. Eine Überweisung, die in Sekunden anstößt.

2 PDFs pro Buchung
~3 s Render + Mail
0 € Zahlungsgebühr
DokumentAGB
Allgemeine Geschäftsbedingungen
Mietbedingungen
§ 1 Vertragsgegenstand
§ 2 Mietdauer
§ 3 Pflichten
§ 4 Versicherunginkl.
Anfrage#A-241
Leihvertrag & Zahlungs-QR
Mieter
NameM. Novák
StadtKarlovy Vary
Mietobjekt
ModellCenturion E-City M
ZeitraumFr 17.05. – So 19.05.
TarifWochenende
SEPA-Überweisung DE12 ... · BIC ... · RAD Elster GmbH
69,00 €

Vier Entscheidungen, die wir bewusst anders getroffen haben.

Bei jedem App-Projekt gibt es Stellen, an denen der bequeme Weg nicht der richtige ist. Hier sind die vier, an denen wir gegen die gängige Vorlage entschieden haben — mit klarem Grund.

01

PWA statt nativer App

Eine native iOS- und Android-App hätte App-Store-Reviews, Update-Zyklen und doppelte Codebases bedeutet — für einen Use-Case, der pro Tag eine Handvoll Bedienungen sieht. Die PWA installiert sich vom Home-Bildschirm wie eine native App, kann Push empfangen, läuft offline-fähig und ist über die Webseite aktualisiert, sobald der Mitarbeiter sie startet.

Sofort updatebar
02

Web-Push statt SMS oder Mail

SMS-Gateways kosten pro Nachricht, Mails verschwinden in der App im Postfach. Web-Push trifft den Bildschirm sofort, sobald die Anfrage in der Datenbank landet — und kostet nichts. Erfordert einmal das Erlauben der Benachrichtigungen durch den Mitarbeiter, danach ist es das schnellste Signal, das wir im Browser bekommen.

~1.5 s Latenz
03

SEPA-QR statt Zahlungsanbieter

Stripe, PayPal & Co. wären 2 % der Mieteinnahmen wert gewesen — ohne dass der Verleih sie braucht. Stattdessen rendert die App in den Leihvertrag einen normierten SEPA-Überweisungs-QR-Code mit Empfänger, Betrag und Verwendungszweck. Banking-App-Scan, Bestätigung, Geld trifft das Konto — keine Gebühren, kein zusätzlicher Account, kein Compliance-Overhead.

0 € Transaktionskosten
04

Edge Proxy statt Browser-Secret

Das Formular auf radelster.de könnte direkt mit der App-API sprechen — dann läge der API-Schlüssel im Browser-JavaScript für jeden Crawler offen. Stattdessen geht der Submit erst an eine Vercel Edge Function auf radelster.de, die das Secret server-seitig anhängt und an verleih.radelster.de weiterreicht. Frontend bleibt geheimnisfrei, die App-DB bleibt geschützt.

Secret auf Server

Vom Whiteboard zur Live-App.

Begonnen 2025, in vier Phasen gebaut — jede Phase endete mit etwas Funktionierendem statt monatelanger Spec-Phase. Die letzte Phase im Mai 2026 verdrahtete die App mit der neuen Marketing-Site auf Vercel.

Phase 01

Datenmodell & Domain-Sprache

Bikes, Größen, Tagespreise, Wochenend-Tarife, Anfragen, Mieter — die Begriffe der Branche eins zu eins in die Datenbank gebracht. Neon Postgres mit Drizzle, ein Schema, das spätere Erweiterungen (Zubehör, Mehrfach-Buchungen) ohne Bruch verträgt.

NeonDrizzleNext.js
Frühjahr 2025
Phase 02

Admin-PWA & Push-Pipeline

Inventar pflegen, Anfragen lesen, freigeben oder ablehnen — auf dem Handy. Push-Notifications über Web-Push, Service-Worker für Offline-Empfang, Add-to-Home-Screen für den nativen Feel. Magic-Link-Login plus Passkey, weil iOS Cookies nach sieben Tagen droppt.

Service WorkerWeb-PushPasskeyIndexedDB
Sommer 2025
Phase 03

PDF, SEPA-QR und Mail-Versand

pdf-lib für den Leihvertrag, qrcode für den SEPA-Überweisungs-QR, Resend für den Mailversand. Eine Freigabe rendert beide PDFs, baut die Mail mit Anhang und schickt sie raus — alles in einer einzigen Server-Action, in unter drei Sekunden.

pdf-libqrcodeResend
Herbst 2025
Phase 04

Anbindung an radelster.de

Die neue Static-Marketing-Site auf Vercel bekam einen Edge-Function-Proxy, der das API-Secret server-seitig an die App-Domain weiterreicht. Inventar-Sync von Datenbank zur Marketing-Site, damit der Kunde im Wizard immer den aktuellen Bestand sieht. Live-Schaltung der Submit-Pipeline.

Vercel EdgeCORSInventory-Sync
Mai 2026 · Live

Was die App im Hintergrund leistet.

Da die Admin-App nicht öffentlich indexiert ist, ist klassisches SEO hier nebensächlich. Was zählt: dass eine Anfrage im Laden sofort ankommt, der Leihvertrag schnell beim Kunden ist und die Pipeline still durchläuft. Hier die Zahlen aus dem Live-Betrieb seit Mai 2026.

~1.5s
Push-Latenz
Vom Submit auf radelster.de bis zur Notification auf dem Handy des Mitarbeiters.
~3s
PDF + Mail-Versand
Freigabe-Tap → Leihvertrag-PDF + AGB-PDF gerendert → Resend-Mail rausgeschickt.
98/100
Lighthouse PWA
Installierbar, offline-fähig, Service-Worker korrekt registriert, Manifest valide.
0
Laufende Kosten
Vercel Hobby-Tier, Neon Free-Tier, Resend Free-Tier. Erst bei höherem Volumen entstehen Kosten.
Live im Betrieb seit Mai 2026 Marketing-Site radelster.de und Verleih-App verleih.radelster.de laufen produktiv. Eingehende Buchungen werden ohne manuellen Eingriff durch die Pipeline geführt — Inventur, Kalender und Preisliste pflegt der Laden selbst direkt in der App.
Next.js 16 TypeScript Neon Postgres Drizzle ORM Vercel Edge Web-Push API Service Worker Passkeys IndexedDB pdf-lib qrcode (SEPA) Resend PWA · Add-to-Home Static-Site radelster.de
— Verleih ohne Zettel, ohne Excel, ohne Anruf
Eine Anfrage. Ein Tap. Ein PDF. Bezahlt.
verleih.radelster.de