Car Market Node.js

Systemarchitektur & Kernpfeiler

Car Market kombiniert eine entkoppelte Node.js & Express REST-API mit einer asynchronen, schnellen React (Vite) Single-Page-Application für Filtersuchen unter einer Sekunde und reibungslose Händlerabläufe.

┌─────────────────────────────────────────────────────────────────────────────┐
│                    Car Market Full-Stack Architecture                       │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │
           ┌───────────────────────────┼───────────────────────────┐
           ▼                           ▼                           ▼
  🔍 Intelligente Suchmaschine       📸 Medien- & Händler-Hub       🛡️ Sicherheit & DSGVO
  • Datenbankbasierte Schieberegler      • Drag & Drop für bis zu 15 Fotos      • Freigabe-Warteschlange
  • Marke ➔ Modell Kaskade      • SortableJS Titelbild-Auswahl   • Vollständige Inseratsprüfung
  • Vermeidung von Null-Ergebnissen      • Automatische WebP-Konvertierung (Sharp)        • DSGVO Art. 17 & 20
  • Echtzeit-Bestandsanzeige      • YouTube & Shorts Einbindung       • JWT & Bcrypt Sicherheit
            

1. Intelligente Suchmaschine & Dynamische Filter

Die Suchmaschine berechnet Grenzwerte dynamisch aus der MySQL-Datenbank, um Fehlersuchen zu vermeiden:

• Datenbankgebundene Zwei-Wege-Schieberegler (rc-slider): Preis-, Kilometer- und Baujahr-Schieberegler passen sich automatisch den realen Minimal- und Maximalwerten im Fahrzeugbestand an.
• Kaskadierende Dropdowns Marke ➔ Modell:
  • Keine leeren Ergebnisseiten: Filterlisten zeigen nur Marken und Modelle an, für die aktuell mindestens ein freigegebenes Fahrzeug verfügbar ist.
  • Live-Bestandszähler: Echtzeit-Anzeige der verfügbaren Inserate neben jeder Option (z. B. Renault (4) ➔ Clio V (2)).
• Technische Ausstattungsfilter: Filterung nach Fahrzeugkategorie (PKW, Motorrad, Nutzfahrzeug), Aufbauform (Limousine, SUV, Kombi, Coupé usw.), Kraftstoffart und Getriebe.
• Asynchrone Sortierung: Sofortige Sortierung nach Einstelldatum, Preis aufsteigend/absteigend, Kilometerstand oder Baujahr.

2. Detaillierte Fahrzeugseite & Multimedia-Erlebnis

Die Detailansicht (/vehicule/:slugOrId) ist in einem konversionsstarken 2-Spalten-Layout aufgebaut:

3. Inseratserstellung & Bildverarbeitungs-Pipeline

Car Market stellt privaten und gewerblichen Anbietern intuitive Verwaltungswerkzeuge bereit:

• Vollständige Fahrzeugtaxonomie (120 Marken & 1.890+ Modelle): Umfassender Katalog bei der Inseratserstellung für eine exakte Kategorisierung.
• Profil-Voraussetzungsprüfung: Inserate können erst nach vollständiger Profilangabe (Vorname, Nachname, verifizierte Telefonnummer) veröffentlicht werden.
• Bilder-Neuanordnung per Drag & Drop (SortableJS): Gleichzeitiger Upload von bis zu 15 Bildern mit Drag-and-Drop-Festlegung des Titelbildes ⭐ Titelbild.
• Automatische WebP-Konvertierung (Sharp): Serverseitige Konvertierung in das moderne .webp-Format bei 80 % Kompression inklusive EXIF-Ausrichtungskorrektur.
• Bereich „Meine Inserate“: Vollwertiges Dashboard mit Statusreitern (Alle, Online, In Prüfung), Direktbearbeitung und Löschfunktion.

4. Qualitätssicherung & Administrator-Moderation

Zur Vermeidung von Spam und betrügerischen Angeboten verfügt die Plattform über eine Moderationsschleife:

5. Sicherheit & Europäische DSGVO-Konformität

Car Market setzt die Richtlinien der Datenschutz-Grundverordnung (DSGVO EU 2016/679) strikt um:

• Stateless JWT-Authentifizierung: Sichere Bearer-Tokens mit Bcrypt-Passworthashing (mindestens 8 Zeichen, Groß-/Kleinbuchstaben, Ziffern und Sonderzeichen).
• Recht auf Datenübertragbarkeit (Art. 20 DSGVO): Ein-Klick-Export aller Nutzerprofildaten und Inseratshistorien als strukturierte JSON-Datei.
• Recht auf Löschung (Art. 17 DSGVO): Dauerhafte Kontolöschung inklusive Bereinigung der Datenbank und physischer Löschung aller Bilddateien auf dem Server.

6. Technische Funktionsmatrix