Alle Erfolgsgeschichten
Erfahrungsbasiert
Automobilhandel / Auto-AboAlmanya Featured

AutoFlat24.de

AutoFlat24.de — Full-Stack Auto-Abo-Plattform für den deutschen Markt

Projektdauer: 2025 Q1
Teamgröße: 2
Website besuchen

Ergebnisse

9
Admin-Module
3
Buchungsstufen
5
Preisdimensionen
4
Bildvarianten
6
Status-Workflow-Stufen
5
Email-Typen
Projektdauer: 2025 Q1
Teamgröße: 2
Leistungen:Full-Stack E-Commerce DevelopmentUI/UX DesignDynamic Pricing SystemAdmin Panel DevelopmentCustomer PortalGmail API + SMTP IntegrationSharp Image PipelineSEO & AI-Sichtbarkeit (CAFE)NextAuth v5 AuthenticationDSGVO-ComplianceDeployment & DevOps

Herausforderung

Der deutsche Auto-Abo-Markt wächst rasant, doch die meisten Anbieter arbeiten noch mit veralteten Prozessen: manuelle Preisberechnung, unübersichtliche Fahrzeugkataloge und zeitaufwendige Buchungsabläufe per Telefon oder E-Mail. Gleichzeitig erwarten sowohl Privatkunden (mit MwSt.) als auch Gewerbekunden (ohne MwSt.) transparente Preise.

AutoFlat24 benötigte eine moderne E-Commerce-Plattform, die den gesamten Auto-Abo-Prozess digitalisiert — von der Fahrzeugsuche über die dynamische Preiskonfiguration (Laufzeit × Kilometerpaket) bis zur vollständigen Buchung. Zusätzlich war ein umfassendes Admin-Panel zur Verwaltung des gesamten Fahrzeugbestands, der Kundenanfragen und der Geschäftsprozesse erforderlich.

Unsere Lösung

Wir haben AutoFlat24.de als moderne Full-Stack E-Commerce-Plattform von Grund auf entwickelt: Next.js 14 mit App Router, ein dynamisches Fiyat-Konfigurationssystem mit Privat/Gewerbe-Toggle, ein 3-stufiger Buchungsassistent, ein Kundenportal mit Dashboard, 9 Admin-Module für die vollständige Geschäftssteuerung, ein Dual-Email-System (Gmail API + SMTP Fallback), eine Sharp-basierte Bildverarbeitungspipeline für WebP-Optimierung und die Integration des CAFE-Frameworks für maximale KI-Sichtbarkeit.

Auto-Abo E-Commerce — Von der Fahrzeugsuche bis zur Buchung

AutoFlat24.de ist eine vollständige E-Commerce-Plattform für den deutschen Auto-Abo-Markt. Statt langwieriger Verhandlungen beim Händler können Kunden ihr Wunschfahrzeug online konfigurieren, den Preis in Echtzeit berechnen und in 3 Schritten buchen — als Privat- oder Gewerbekunde.

Dynamische Preiskonfiguration — Privat vs. Gewerbe

Das Herzstück der Plattform ist der dynamische Preiskonfigurator. Ein globaler Privat/Gewerbe-Toggle ändert sofort alle angezeigten Preise:

  • Privat: Alle Preise inklusive MwSt. — transparente Endpreise für Verbraucher
  • Gewerbe: Alle Preise exklusive MwSt. — steuerlicher Vorteil für Unternehmen

Die Preise werden dynamisch basierend auf Laufzeit (6, 12, 18, 24, 36 Monate) und Kilometerpaket (500–3.000 km/Monat) berechnet. Jede Kombination ergibt einen individuellen Monatspreis.

Fahrzeugkatalog mit Model Family Gruplama

Der Fahrzeugkatalog unter /alle-fahrzeuge bietet umfangreiche Filtermöglichkeiten:

  • Markenfilter: BMW, Mercedes, Audi, VW, Skoda und weitere
  • Typfilter: SUV, Limousine, Kombi, Elektro
  • Preisfilter: Monatliche Preisspanne
  • Kraftstofffilter: Benzin, Diesel, Elektro, Hybrid
  • Model Family Gruplama: Varyanten desselben Modells werden gruppiert mit „X Varianten verfügbar" Badge

Die Sortierung unterstützt Preis (aufsteigend/absteigend), Neuheit und Marke A-Z. Das responsive Grid zeigt 1 Spalte auf Mobil, 2 auf Tablet und 3 auf Desktop.

Fahrzeug-Detailseite mit Preiskalkulator

Jede Fahrzeugseite unter /fahrzeug/[slug] bietet:

  • Bildergalerie: Thumbnail-Navigation, Lightbox-Modus, Tastatursteuerung
  • Interaktiver Preiskalkulator: Laufzeit × km-Paket → sofortige Preisanzeige
  • Technische Daten: Motor, Verbrauch, Maße, Ausstattung
  • Varyanten: Weitere Versionen derselben Modellfamilie
  • Ähnliche Fahrzeuge: Andere Modelle derselben Marke
  • Schema.org Product Markup: Strukturierte Daten für Suchmaschinen

3-Stufen-Buchungsassistent

Der Buchungsprozess wurde auf 3 einfache Schritte reduziert:

  1. Konfiguration: Laufzeit, Kilometerpaket, Privat/Gewerbe auswählen
  2. Lieferadresse: Straße, Stadt, Postleitzahl eingeben
  3. Persönliche Daten: Name, E-Mail, Telefon + Datenschutz-Einwilligung

Jeder Schritt wird client-seitig validiert. Nach Abschluss erhalten sowohl der Admin als auch der Kunde automatische E-Mail-Benachrichtigungen.

Kundenportal

Registrierte Kunden erhalten unter /konto Zugang zu:

  • Dashboard: Aktive Abonnements, ausstehende Anfragen, km-Zähler
  • Meine Buchungen: Alle vergangenen und aktiven Buchungen
  • Benachrichtigungen: Statusänderungen, wichtige Ankündigungen
  • Profilverwaltung: Persönliche Daten und Adresse aktualisieren

Admin-Panel — 9 Module für vollständige Kontrolle

Das Admin-Panel mit Dark-Theme und DE/EN-Sprachunterstützung umfasst:

  • Dashboard: Statistik-Karten, 7-Tage-Anfragendiagramm, Schnellzugriff
  • Fahrzeugverwaltung: 4-Tab-Formular (Basis, Preise, Motor, Ausstattung), Soft-Delete mit 30-Tage-Wiederherstellung, Orphan-Management für elternlose Fahrzeuge
  • Anfragenverwaltung: 6-stufiger Status-Workflow (PENDING → CONTACTED → IN_PROGRESS → APPROVED/REJECTED → COMPLETED), Admin-Notizen, automatische E-Mail bei Statuswechsel
  • Kundenverwaltung: Registrierte Kunden, Buchungshistorie, Filterung
  • Benutzerverwaltung: ADMIN/STAFF-Rollen, Sicherheitsschutz (letzter Admin nicht löschbar)
  • Kategorien: Marken, Fahrzeugtypen, Kraftstoffarten
  • E-Mail-System: Logs, Template-Vorschau, Statusfilter (SENT/FAILED/PENDING)
  • Einstellungen: Firma, Kontakt, Öffnungszeiten, SEO, Social Media
  • CAFE Framework: BrandLock, llms.txt, Schema.org, E-E-A-T, Entity SEO

Dual-Email-System

Das E-Mail-System arbeitet mit zwei Backends für maximale Zuverlässigkeit:

  • Primär: Gmail API (OAuth2) — zuverlässige Zustellung
  • Fallback: SMTP (Nodemailer) — automatischer Rückfall bei API-Fehler

5 E-Mail-Typen werden unterstützt: Buchungsbenachrichtigung (Admin), Kundenbestätigung, Statusaktualisierung, Willkommens-E-Mail und Kontaktformular.

Sharp-Bildverarbeitungspipeline

Jedes hochgeladene Fahrzeugbild durchläuft eine automatische Sharp-Pipeline:

  • 4 Größenvarianten: xlarge (1920w), large (1200w), medium (800w), thumb (400×300)
  • WebP-Konvertierung: 85% Qualität für optimale Dateigröße
  • Automatische Alt-Texte: SEO-optimierte Bildbeschreibungen

SEO & KI-Sichtbarkeit

Die Plattform wurde mit dem CAFE-Framework für maximale Sichtbarkeit optimiert:

  • SSR: Alle Seiten server-seitig gerendert
  • Schema.org: Vehicle und Organization Markup
  • Dynamische Sitemap: Automatische URL-Generierung
  • llms.txt: Strukturierte Informationen für KI-Crawler
  • Open Graph + Twitter Cards: Social-Media-Vorschau auf allen Seiten

Technische Infrastruktur

Deployment auf DigitalOcean VPS mit Nginx (SSL, HTTP/2, gzip, 1-Jahr-Cache für statische Assets), PM2 im Cluster-Modus, UFW Firewall und Let's Encrypt SSL. Automatisches Backup-System: alle 6 Stunden (7 Tage gespeichert) + wöchentliches Full-Backup (DB + Uploads).

Technologie-Stack

Next.js 14React 19TypeScript 5Tailwind CSS 3.4Radix UIZustand 5React Hook FormZodPrisma 5PostgreSQL 16NextAuth v5SharpGmail APINodemailerLucide IconsNginxPM2DigitalOceanLet's Encrypt
Creatys hat unsere Vision einer modernen Auto-Abo-Plattform perfekt umgesetzt. Die dynamische Preisberechnung, das Kundenportal und das Admin-Panel — alles funktioniert reibungslos. Besonders das Dual-Email-System und die Sharp-Bildverarbeitung zeigen die technische Tiefe des Teams.
Emre Altınışık
Geschäftsführer, AutoFlat24

Evidenz: Erfahrungsbasiert

Alle Angaben basieren auf tatsächlichen Projektergebnissen und direkter Erfahrung.

Bereit für Ihre Erfolgsgeschichte?

Entdecken Sie, wie wir auch Ihr Unternehmen transformieren können.

Analyse starten