Lumora PortfolioAlle Projekte
Logo TJ FotoboxKundenprojekt · Verleih für Fotobox und Eventdeko, Delmenhorst

TJ Fotobox

TJ Fotobox vermietet Fotoboxen, Candy Bars, XXL-Buchstaben und Eventdeko rund um Delmenhorst. Wir haben das komplette digitale Geschäft gebaut: die Website mit Konfigurator, ein Buchungssystem für Anfragen, Angebote, Verfügbarkeit und Finanzen sowie eine eigene App, in der Kunden buchen, zahlen, schreiben und ihre Eventfotos ansehen. Nach dem Zahlungseingang über Stripe entstehen Bestätigung und Rechnung ohne einen Handgriff.

  • 6Bausteine
  • 14Anbindungen
  • 3Sprachen
  • 25Technologien
Übersicht im Buchungssystem: Anfragen, offene Beträge, Umsatz, nächstes Event und Aufgaben auf einen BlickBeispieldaten
Startseite auf dem Smartphone
  • 364automatisierte Tests im Buchungssystem
  • 16Hintergrund-Motive direkt im Konfigurator wählbar
  • 24Monate bleiben Eventgalerien abrufbar, danach automatische Löschung
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.

01Kanäle
03Angebunden

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

Ablauf

Von der Anfrage bis zur Rechnung

  1. Anfrage

    Der Kunde stellt sein Event auf der Website oder in der App zusammen. Die Anfrage landet als Vorgang im Buchungssystem.

  2. Angebot

    Das System schlägt ein Angebot vor. Jessi oder Tim prüfen es und schicken es mit einem Klick raus.

  3. Buchen und zahlen

    Der Kunde bucht online und zahlt über Stripe die Anzahlung oder den Gesamtbetrag.

  1. Beleg automatisch

    Nach dem Zahlungseingang entstehen Auftragsbestätigung und Rechnung als PDF mit fortlaufender Nummer.

  2. Event

    Erinnerungen und Countdown-Pushes laufen automatisch. Am Event-Tag zeigt die App den Ablauf.

  3. Fotos und Bewertung

    Die Fotos erscheinen in der Galerie der App. Am Tag danach kommt die Bitte um eine Bewertung.

01
Website

Website mit Konfigurator

Die neue Website stellt Fotobox, Candy Bar, XXL LOVE, Stehtische und Fußball-Dart mit echten Eventfotos vor. Im Anfrageformular stellen Kunden ihr Paket selbst zusammen und sehen sofort die Kalkulation. Jede Anfrage landet als Vorgang im Buchungssystem statt im Postfach.

Startseite von tj-fotobox.de mit Fotostreifen aus echten Events
Angebotsübersicht mit Fotobox und Candy Bar
Paketseite mit den Fotobox-Paketen S, M, L und XL
Anfrageformular mit Paketwahl, Hintergrund-Motiven und Live-Kalkulation
App-Seite mit Links zu App Store und Google Play
Startseite auf dem Smartphone
Konfigurator auf dem Smartphone: Paket M und Hintergrund-Motive
  • Vier Fotobox-Pakete von S bis XL mit festen Preisen
  • Konfigurator mit Extras, Varianten und 16 Hintergrund-Motiven
  • Live-Kalkulation inklusive Fahrtkosten-Regel ab Delmenhorst
  • Anfrage geht direkt als Vorgang ins Buchungssystem
  • Eigene Seite für die Kunden-App mit Links zu App Store und Google Play
  • Galerie, Über uns und alle Rechtstexte
  • Cookie-Hinweis ohne Tracking und ohne Werbung
Technik
  • HTML
  • CSS
  • JavaScript
  • Cloudflare
02
Web-App

Buchungssystem

Jessi und Tim steuern im Buchungssystem jeden Auftrag von der Anfrage bis zum Abbau. Aus einer Anfrage wird mit wenigen Klicks ein Angebot, das Kunden online ansehen und verbindlich buchen. Die Verfügbarkeitsprüfung reserviert das Equipment und verhindert Doppelbuchungen. Mails aus dem Postfach landen automatisch beim passenden Vorgang.

Übersicht mit Kennzahlen, neuesten Anfragen, Umsatzchart und AufgabenBeispieldaten
Anfragen-Inbox mit Status je VorgangBeispieldaten
Vorgang mit Status, Event-Tag und gebuchten LeistungenBeispieldaten
Bestand mit Equipment, das für einen Termin reserviert istBeispieldaten
Online-Angebot aus Sicht des Kunden mit Wahl zwischen Anzahlung und GesamtbetragBeispieldaten
  • Anfragen-Inbox mit Status von Neu bis Abgeschlossen
  • Automatischer Angebotsentwurf aus der Anfrage
  • Online-Angebot mit Buchen-Button, Anzahlung oder Vollbetrag
  • Verfügbarkeitsprüfung und Reservierung des Bestands je Termin
  • Kalender mit Abo-Link für das Handy
  • Aufstellung mit Aufbauzeit, Crew-Notiz und Packliste
  • Eingehende Mails werden dem richtigen Vorgang zugeordnet
  • Kundenliste mit Umsatz und Events je Kunde
  • Aufgaben im Team mit Fälligkeit
  • Installierbar als App mit Push-Benachrichtigungen im Browser
Technik
  • Node.js
  • Express
  • SQLite
  • JavaScript
  • Progressive Web App
  • Web Push
03
Automatisierung

Zahlung und Buchhaltung

Kunden zahlen online über Stripe, als Anzahlung oder gleich den Gesamtbetrag. Sobald die Zahlung eingeht, erzeugt das System Auftragsbestätigung und Rechnung als PDF und verschickt sie. Rechnungsnummern laufen lückenlos pro Jahr weiter. Im Finanzbereich stehen Rechnungen, Zahlungen, Angebote und Ausgaben mit CSV-Export für die Buchhaltung.

Zahlungsstand einer Buchung mit Auftragsbestätigung und RechnungBeispieldaten
Finanzbereich mit Rechnungsliste, PDF je Rechnung und CSV-ExportBeispieldaten
Automatisch erzeugte Rechnung als PDFBeispieldaten
  • Zahlung per Karte, SEPA, Überweisung oder Klarna über Stripe
  • Anzahlung bei Buchung, Restbetrag bis zum Event
  • Auftragsbestätigung und Rechnung als PDF nach Zahlungseingang
  • Lückenlose Nummernkreise für Angebote und Rechnungen je Jahr
  • Zahlungsstand je Buchung mit Fortschrittsbalken
  • Finanzbereich mit Rechnungen, Zahlungen und Ausgaben
  • CSV-Export für die Buchhaltung
Technik
  • Stripe
  • Klarna
  • Apple Pay
  • Puppeteer
  • Node.js
04
iPhone- und Android-App

Kunden-App

Die App TJ Fotobox gibt es für iPhone und Android. Kunden stellen ihr Event mit Live-Verfügbarkeit zusammen, nehmen Angebote an und zahlen direkt in der App. Bis zum Event zählt ein Countdown herunter, danach erscheinen die Fotos in der eigenen Galerie. Preise und Produkte kommen vom Server, Änderungen brauchen kein Store-Update.

Startseite der App mit Countdown bis zum EventBeispieldaten
Buchen in der App: Datum mit Verfügbarkeit und Fotobox-PaketeBeispieldaten
Extras wie XXL LOVE, Candy Bar und Fußball-Dart zubuchenBeispieldaten
Event-Tag-Ansicht mit Ablauf und Status des AufbausBeispieldaten
Nach dem Event: Die Fotos sind da, Galerie öffnen und mit Gästen teilenBeispieldaten
Treuekarte mit Stempeln und Ideen für die nächste FeierBeispieldaten
  • Buchen mit Kalender und Live-Verfügbarkeit
  • Angebot annehmen und bezahlen, auch mit Apple Pay
  • Startseite mit Countdown, Event-Tag-Ansicht und offenen Angeboten
  • Chat direkt mit Jessi und Tim
  • Fotogalerie je Event mit Teilen-Link und QR-Code für Gäste
  • Extras mit einem Tipp nachbuchen
  • Treuekarte mit Stempeln und Rabatt ab der fünften Buchung
  • Freunde werben mit eigenem Empfehlungscode
  • Anmeldung ohne Passwort per Mail-Link oder Code
Technik
  • Capacitor
  • JavaScript
  • iOS
  • Android
  • App Store
  • Google Play
  • Firebase
  • Apple Push
  • Stripe
05
Automatisierung

Automatische Erinnerungen

Ein Zeitplaner prüft regelmäßig alle Buchungen und erledigt die Nachfassarbeit. Er erinnert an den Restbetrag, kündigt den Aufbau an, bittet nach dem Event um eine Bewertung und schickt Geburtstagsgutscheine. Pushes gehen nur zwischen 9 und 20 Uhr raus und jede Nachricht genau einmal.

  • Erinnerung an den Restbetrag mit Zahlungslink
  • Info-Mail zum Aufbau nach der ersten Zahlung
  • Countdown-Pushes 7, 3 und 1 Tag vor dem Event und am Event-Tag
  • Danke und Bitte um Bewertung am Tag nach dem Event
  • Geburtstagsgutschein über 15 % genau 30 Tage vorher
  • Hinweis vor Ablauf einer Galerie und Löschung nach 24 Monaten
  • Texte passend zum Anlass: Hochzeit, Geburtstag oder Firmenfeier
Technik
  • Node.js
  • Firebase
  • Apple Push
  • Web Push
06
Print

Flyer, Roll-up und Visitenkarte

Passend zum Auftritt haben wir die Druckmedien gestaltet und druckfertig gesetzt. Der quadratische Flyer stellt auf zehn Seiten alle Produkte und Preise vor. Roll-up und Visitenkarte führen per QR-Code zur App und zur Anfrage.

Alle zehn Seiten des Flyers
Roll-up mit Fotostreifen und App-Hinweis
Visitenkarte vorn und hinten
  • Flyer 210 × 210 mm mit zehn Seiten
  • Roll-up 85 × 200 cm für Messen und Events
  • Visitenkarte 85 × 55 mm mit QR-Code
  • QR-Codes zur App und zur Anfrage
  • Druckdaten mit Beschnitt, ohne Transparenzen
Technik
    Technik

    Programmiersprachen und Technik.

    Programmiersprachen
    • JavaScript
    • HTML
    • CSS
    Frameworks und Bibliotheken
    • Node.js
    • Express
    • Progressive Web App
    • Puppeteer
    • Capacitor
    • Vitest
    Datenbanken
    • SQLite
    • Firebase
    Plattformen und Betrieb
    • Cloudflare
    • iOS
    • Android
    • App Store
    • Google Play
    • IONOS
    • nginx
    • PM2
    Verbindungen

    Womit alles verbunden ist.

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

    • Stripe

      Zahlungen per Karte, SEPA, Überweisung und Klarna, Zahlungseingang per Webhook

    • Apple Pay

      Bezahlen in der Kunden-App

    • Firebase

      Push-Nachrichten an die Android-App

    • Apple Push

      Push-Nachrichten an die iPhone-App

    • Web Push

      Benachrichtigungen im Buchungssystem für das Team

    • Puppeteer

      Angebote, Auftragsbestätigungen und Rechnungen als PDF

    • OpenStreetMap

      Adresssuche und Route für die Fahrtkosten

    • Cloudflare

      Domain und Auslieferung von Website und App

    • App Store

      Veröffentlichung der iPhone-App

    • Google Play

      Veröffentlichung der Android-App

    • IONOS

      Mail-Postfach: eingehende Mails lesen, Mails versenden

    • nginx

      Webserver vor Buchungssystem und App

    • PM2

      Betrieb und Neustart des Servers

    • Vitest

      364 automatisierte Tests