Systeemarchitectuur & Kernpijlers
Car Market combineert een ontkoppelde Node.js & Express REST API met een razendsnelle React (Vite) Single Page Application, wat zorgt voor zoekresultaten onder één seconde en soepele verkoopprocessen.
┌─────────────────────────────────────────────────────────────────────────────┐
│ Car Market Full-Stack Architecture │
└──────────────────────────────────────┬──────────────────────────────────────┘
│
┌───────────────────────────┼───────────────────────────┐
▼ ▼ ▼
🔍 Slimme zoekmachine 📸 Media- & Dealerhub 🛡️ Beveiliging & AVG/GDPR
• Database-gekoppelde schuifregelaars • Drag & drop tot 15 foto's • Moderatie-wachtrij voor advertenties
• Merk ➔ Model cascade-selectie • Omslagfoto kiezen met SortableJS • Volledige inspectieweergave
• Voorkomen van blanco resultaatpagina's • Automatische Sharp WebP-conversie • AVG/GDPR Artikel 17 & 20
• Live voorraadtellers • YouTube & Shorts integratie • JWT & Bcrypt beveiliging
Realtime voertuigzoektocht
Onmiddellijke asynchrone meervoudige filtering zonder de pagina opnieuw te laden.
Geautomatiseerde optimalisatie
Meervoudige upload met drag-and-drop sortering en automatische WebP-compressie aan serverzijde.
Europese AVG/GDPR-naleving
JSON-gegevensexport met één klik en permanente fysieke verwijdering van accounts en mediabestanden van de server.
1. Slimme zoekmachine & Dynamische filters
De zoekmachine berekent zijn grenswaarden dynamisch uit de MySQL-database om lege zoekopdrachten te voorkomen:
- Database-gekoppelde dubbele sliders (rc-slider): Prijs-, Kilometerstand- en Bouwjaar-sliders passen zich automatisch aan de werkelijke minimum- en maximumwaarden in de voorraad aan.
- Gekoppelde Merk ➔ Model keuzemenu's:
- Geen lege zoekresultaten: Het keuzemenu toont uitsluitend merken en modellen waarvoor momenteel goedgekeurde voertuigen op voorraad zijn.
- Live voorraadbadges: Realtime teller van beschikbare auto's naast elke optie (bijv. Renault (4) ➔ Clio V (2)).
- Technische kenmerkenfilters: Filteren op voertuigcategorie (Personenauto's, Motoren, Bedrijfswagens), carrosserievorm, brandstoftype en transmissie.
- Asynchrone sortering: Direct sorteren op plaatsingsdatum, prijs oplopend/aflopend, kilometerstand of bouwjaar.
2. Gedetailleerde voertuigpagina & Multimedia-ervaring
De detailpagina (/vehicule/:slugOrId) is opgebouwd in een conversiegerichte indeling met 2 kolommen:
Interactieve mediagalerij
Integratie van YouTube-video's en Shorts op de eerste positie van de carrousel, gevolgd door haarscherpe WebP-foto's.
Overzicht technische specificaties
Cilinderinhoud (cm³), vermogen (pk), brandstofverbruik, emissienorm (Euro 1 t/m 7), chassisnummer (VIN), deuren en zitplaatsen.
Direct contact met de verkoper
Internationaal telefoonnummerformaat met directe tel:-bellink en geïntegreerd aanvraagformulier gekoppeld aan de auto.
3. Advertentiepublicatie & Beeldverwerkingspijplijn
Car Market biedt particuliere en professionele verkopers intuïtieve en snelle tools:
- Volledige voertuigtaxonomie (120 merken & 1.890+ modellen): Uitgebreide voertuigdatabase beschikbaar tijdens het aanmaken van een advertentie voor een nauwkeurige classificatie.
- Verplichte profielverificatie: Publicatie wordt tegengehouden totdat de verkoper alle verplichte profielgegevens heeft ingevuld (naam, geverifieerd telefoonnummer).
- Foto's ordenen via drag & drop (SortableJS): Upload tot 15 foto's tegelijk en sleep de miniaturen om de hoofdomslagfoto te bepalen ⭐ Omslag.
- Automatische WebP-conversie (Sharp): Server-side conversie naar het moderne .webp-formaat bij 80% compressie met automatische EXIF-oriëntatiecorrectie.
- Dashboard « Mijn advertenties »: Volledig beheerdashboard met statustabbladen (Alles, Actief, In beoordeling), directe bewerking en verwijderfuncties.
4. Kwaliteitscontrole & Beheerdersmoderatie
Om spam en misleidende advertenties tegen te gaan, beschikt het platform over een administratieve beoordelingswachtrij:
Moderatiewachtrij
Nieuwe advertenties blijven in de wachtstand totdat ze handmatig zijn goedgekeurd door een beheerder.
Volledige inspectieweergave
Speciale controlepagina (/admin/vehicule/:id) om foto's te vergroten, het VIN-nummer te valideren en verkopersgegevens te controleren.
Acties met één klik
Beveiligde API-endpoints om advertenties direct goed te keuren, te deactiveren of aan te passen.
5. Bedrijfsbeveiliging & Europese AVG/GDPR-naleving
Car Market voldoet strikt aan de Algemene Verordening Gegevensbescherming (AVG/GDPR EU 2016/679):
- Stateless JWT-authenticatie: Veilige Bearer-tokens met Bcrypt-wachtwoordhashing (minimaal 8 tekens, hoofd-/kleine letters, cijfers en speciale tekens).
- Gegevensoverdraagbaarheid (Artikel 20 AVG): Gestructureerde JSON-export van alle profiel- en advertentiegeschiedenis met één enkele klik.
- Recht op vergetelheid (Artikel 17 AVG): Permanente accountverwijdering die alle databaserijen wist en alle fysieke afbeeldingsbestanden van de server verwijdert.
6. Technische functiematrix
| Functie |
Technische implementatie |
SEO- & Prestatievoordeel |
| Dynamische schuifregelaars |
rc-slider + Prisma DB Aggregations |
Hoge betrokkenheid Vlotte filtering zonder paginaherlaad |
| Cascade-catalogus |
Prisma vehicles: { some: { isApproved: true } } |
Geen lege content Voorkomt indexering van lege zoekresultaatpagina's |
| Beeldoptimalisatie |
Sharp Node.js library to WebP 80% |
Core Web Vitals Snelle First Contentful Paint (FCP) laadtijd |
| Video-integratie |
Responsive 16:9 YouTube iframe embeds |
Sessieduur Verhoogt de gemiddelde bezoektijd op de pagina |
| URL-slugs |
slugify with unique ID suffixes |
Indexeerbaarheid Zoekmachinevriendelijke en schone URL's met relevante zoekwoorden |
| Beveiliging & Privacy |
JWT Tokens + Bcrypt + GDPR Art. 17 & 20 |
AVG-conform Volledige naleving van Europese regelgeving |
