Architettura di Sistema & Pilastri Principali
Car Market unisce un'API REST disaccoppiata in Node.js ed Express con una Single Page Application reattiva in React (Vite), offrendo ricerche con filtri istantanei e processi di vendita fluidi.
┌─────────────────────────────────────────────────────────────────────────────┐
│ Car Market Full-Stack Architecture │
└──────────────────────────────────────┬──────────────────────────────────────┘
│
┌───────────────────────────┼───────────────────────────┐
▼ ▼ ▼
🔍 Motore di Ricerca Intelligente 📸 Hub Media & Spazio Venditore 🛡️ Sicurezza, Moderazione & GDPR
• Slider collegati al Database • Drag & Drop fino a 15 foto • Coda di approvazione annunci
• Selezione a cascata Marca ➔ Modello • Selezione foto di copertina SortableJS • Ispezione completa dell'annuncio
• Prevenzione di pagine senza risultati • Conversione WebP automatica (Sharp) • GDPR Articoli 17 & 20
• Conteggio stock in tempo reale • Integrazione video YouTube & Shorts • Sicurezza JWT & Bcrypt
Ricerca in Tempo Reale
Filtro multicriterio asincrono e immediato senza ricaricare la pagina.
Ottimizzazione Automatica
Caricamento multiplo delle immagini con riordinamento drag-and-drop e compressione WebP lato server.
Conformità GDPR Europea
Esportazione dei dati in JSON in un click e cancellazione fisica definitiva di account e file multimediali.
1. Motore di Ricerca Intelligente & Filtri Dinamici
Il motore di ricerca calcola dinamicamente i propri limiti dal database MySQL per evitare ricerche a vuoto:
- Doppi slider collegati al DB (rc-slider): Gli slider di Prezzo, Chilometraggio e Anno si adattano automaticamente ai valori minimi e massimi reali presenti nello stock.
- Menu a discesa a cascata Marca ➔ Modello:
- Nessun risultato vuoto: Il menu a tendina mostra solo marche e modelli per cui è presente almeno un veicolo attivo e approvato in magazzino.
- Badge di conteggio in tempo reale: Indicatore live del numero di annunci disponibili accanto a ciascuna opzione (es: Renault (4) ➔ Clio V (2)).
- Filtri di attributi tecnici: Filtra per categoria di veicolo (Auto, Moto, Veicoli commerciali), carrozzeria (Berlina, SUV, Station wagon, Coupé, ecc.), alimentazione e cambio.
- Ordinamento Asincrono: Ordinamento istantaneo per data di inserimento, prezzo crescente/decrescente, chilometraggio o anno.
2. Scheda Veicolo Dettagliata & Esperienza Multimediale
La pagina di dettaglio del veicolo (/vehicule/:slugOrId) è organizzata in un layout a 2 colonne orientato alle conversioni:
Galleria Multimediale Interattiva
Integrazione di video YouTube e Shorts in prima posizione nel carosello, seguiti da fotografie WebP in alta risoluzione.
Griglia delle Specifiche Tecniche
Cilindrata (cm³), potenza (CV), consumi, normativa antinquinamento (da Euro 1 a Euro 7), telaio VIN, numero di porte e posti.
Contatto Diretto con il Venditore
Formattazione internazionale del numero con link di chiamata diretto tel: e modulo di richiesta integrato nella scheda.
3. Pubblicazione Annunci & Pipeline di Elaborazione Immagini
Car Market mette a disposizione di privati e professionisti strumenti semplici ed efficienti:
- Tassonomia Automobilistica Completa (120 Marche & 1.890+ Modelli): Catalogo completo disponibile al momento della pubblicazione per una categorizzazione impeccabile.
- Verifica Obbligatoria del Profilo: Pubblicazione bloccata finché il profilo del venditore non è completo (nome, cognome, numero di telefono verificato).
- Riordinamento Immagini Drag & Drop (SortableJS): Carica fino a 15 foto contemporaneamente e trascina le anteprime per impostare l'immagine di copertina ⭐ Copertina.
- Conversione WebP Automatica (Sharp): Conversione lato server nel moderno formato .webp all'80% di compressione con correzione dell'orientamento EXIF.
- Pannello « I miei annunci »: Dashboard completa con schede di stato (Tutti, Online, In attesa), modifica istantanea e cancellazione.
4. Controllo Qualità & Moderazione Amministratore
Per mantenere un catalogo affidabile ed eliminare le frodi, la piattaforma include una coda di moderazione:
Coda di Moderazione
Gli annunci pubblicati dagli utenti restano in sospeso finché non vengono validati da un amministratore.
Vista di Ispezione Completa
Pagina dedicata (/admin/vehicule/:id) per ingrandire le foto, verificare il VIN e controllare le informazioni del venditore.
Azioni in un Click
Endpoint protetti per approvare, rifiutare/disattivare o modificare direttamente l'annuncio.
5. Sicurezza & Conformità GDPR Europea
Car Market applica scrupolosamente le normative del Regolamento Generale sulla Protezione dei Dati (GDPR UE 2016/679):
- Autenticazione Stateless JWT: Token di sicurezza Bearer con hashing delle password tramite Bcrypt (minimo 8 caratteri con lettere maiuscole/minuscole, numeri e simboli speciali).
- Portabilità dei Dati (Articolo 20 GDPR): Esportazione JSON strutturata in un solo click con tutte le informazioni del profilo e lo storico degli annunci dell'account.
- Diritto all'Oblio (Articolo 17 GDPR): Cancellazione definitiva dell'account con rimozione completa dal database e cancellazione fisica delle immagini dal server.
6. Matrice delle Funzionalità Tecniche
| Funzionalità |
Implementazione Tecnica |
Vantaggio SEO & Performance |
| Slider Dinamici |
rc-slider + Prisma DB Aggregations |
Alto Coinvolgimento Filtro fluido senza ricaricamento della pagina |
| Cascata Intelligente |
Prisma vehicles: { some: { isApproved: true } } |
Nessun Contenuto Vuoto Evita l'indicizzazione di pagine di ricerca senza risultati |
| Ottimizzazione Immagini |
Sharp Node.js library to WebP 80% |
Core Web Vitals Caricamento istantaneo del First Contentful Paint (FCP) |
| Integrazione Video |
Responsive 16:9 YouTube iframe embeds |
Tempo di Permanenza Aumenta la durata media delle sessioni dei visitatori |
| Slug degli URL |
slugify with unique ID suffixes |
Indicizzazione SEO URL semantici ricchi di parole chiave per Google |
| Sicurezza & Privacy |
JWT Tokens + Bcrypt + GDPR Art. 17 & 20 |
Conformità GDPR Rispetto rigoroso delle normative europee |
Esplora la Piattaforma Live
Metti alla prova i filtri di ricerca, l'interfaccia di gestione e il design responsive.
Visita l'Applicazione Live ↗
