← Înapoi la proiecte Aplicație Web · Automobil

Car Market Node.js

O piață auto cu căutare, filtrare și anunțuri detaliate.

Car Market Node.js
PROIECT

Proiectul

Car Market este o aplicație web construită în jurul unui catalog de vehicule, cu căutare, filtrare și pagini detaliate ale vehiculelor. Demonstrează o arhitectură modernă, cu design responsiv și navigare intuitivă.

Arhitectura Sistemului & Pilarii de Bază

Car Market combină o API REST Node.js & Express decuplată cu o aplicație de o singură pagină React (Vite) asincronă și de mare viteză pentru a oferi timpuri de căutare sub secundă și fluxuri de lucru netede pentru vânzători.

┌─────────────────────────────────────────────────────────────────────────────┐
│                    Car Market Full-Stack Architecture                       │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │
           ┌───────────────────────────┼───────────────────────────┐
           ▼                           ▼                           ▼
  🔍 Motor de Căutare Inteligent       📸 Hub Media & Vânzători       🛡️ Încredere, Siguranță & GDPR
  • Glisoare DB cu cărări duale      • Drag & Drop 15 poze      • Moderare bazată pe coadă
  • Cascadă Brand ➔ Model      • Selectare copertă SortableJS   • Inspecția anunțului Full-res
  • Prevenirea rezultatelor zero      • WebP Automatizat (Sharp)        • GDPR Art. 17 & 20
  • Numărări de stoc în timp real      • YouTube & Shorts embed       • Securitate JWT & Bcrypt
            

Descoperire în Timp Real

Filtrare instantanee asincronă a vehiculelor cu mai multe criterii fără reîncărcări complete de pagină.

Optimizare Automatizată

Încărcări de mai multe imagini cu sortare drag-and-drop pe partea client și compresie WebP pe server.

Conformitate GDPR Europeană

Exporturi JSON de portabilitate a datelor integrate și ștergere de cont cu curățare fizică a discului.

1. Motor de Căutare Inteligent & Filtrare Dinamică

Motorul de căutare al pieței utilizează limite legate de bază de date pentru a oferi rafinament instant al interogărilor și pentru a elimina căile de căutare moarte:

  • Glisoare Duale legate de Bază de Date (rc-slider): Glisoarele de preț, kilometraj și an calculează automat limitele lor din valorile vehiculelor reale cele mai mici și cele mai mari stocate în baza de date MySQL.
  • Selectoare inteligente de Cascadă Brand ➔ Model:
    • Prevenirea Rezultatelor Zero: Filtrul de căutare public afșișează doar mărcile și modelele care au în prezent vehicule active, aprobate în stoc.
    • Insigne de Numărăre a Inventarului în Timp Real: Contor instantaneu afșișat alături de fiecare opțiune (ex. Renault (4) ➔ Clio V (2)).
  • Filtre de Atribute Tehnice: Filtrează după categorie vehicul (Automobile, Motociclete, Comercial), tip caroserie (Sedan, SUV, Break, Coupé, Decapotabil, 4x4), tipuri combustibil (Benzină, Motorină, Hibrid, Electric, GPL, Hidrogen) și transmisie (Manual, Automat).
  • Sortare Asincronă: Sortarea anunțurilor instantaneu după cele mai noi adiții, preț crescător/descrescător, kilometraj sau anul modelului.

2. Fisa Produsului Vehicul Detaliat & Experiența Multimedia

Vizualizarea detaliată a vehiculului (/vehicule/:slugOrId) este organizată într-o dispunere cu 2 coloane de înaltă conversie:

Galerie Media Interactivă

Videoclipuri YouTube integrate și Shorts în poziția caroselului primar, urmate de fotografii WebP de înaltă rezoluție cu indicatori de miniaturi.

Grilă Specificații Tehnice

Capacitate motor (cm³), putere (hp), consum combustibil, normă poluare (Euro 1 la Euro 7), numărul VIN al șasiului, numărul de uși și locuri.

Card Vânzător Direct & Apel

Formatare telefon internațională (ex. +33 6 12 34 56 78) cu trigger de apel nativ tel: și formular de contact de investigare pe pagină.

3. Publicarea Anunțului Vânzătorului & Conducta de Procesare a Imagini

Car Market echipează vânzătorii privatși și professionali cu instrumente intuitive și optimizare automată a activelor:

  • Taksonomie Automobilistică Completă (120 Mărci & 1,890+ Modele): Catalog complet disponibil înd crearea anunțului, asigurând categorizare precisă.
  • Verificare Portii Profil: Limitează publicarea anunțului până când vânzătorul și-a completat profilul (prenume, nume, număr de telefon verificat).
  • Reordonare Imagine Drag & Drop (SortableJS): Încărcați până la 15 imagini simultan și trageți miniaturi pentru a alege fotografia de copertă principală ⭐ Copertă.
  • Conversie Automată WebP Sharp: Fisierele JPEG, PNG sau HEIC de intrare sunt convertite pe server în formatul modern .webp la compresie 80% cu corecție de orientare EXIF.
  • "Mes Annonces" (Anunțurile Mele) Workspace: Tablou de bord dedicat cu file de stare (Toate, Live / En ligne, Sub Revizuire / En attente), declanșatoare de editare inline și instrumente de ștergere.

4. Asigurarea Calitații & Tabloul de Bord Moderare Admin

Pentru a elimina spam, anunțuri frauduloase și fotografii de calitate scăzută, platforma implementează o coadă de revizuire administrativă:

Coada de Moderare

Anunțurile postate de utilizatorii standard sunt ținute într-o coadă de așteptare până la aprobarea de către un administrator.

Vizualizare Inspecție Completă

Pagină de inspecție dedicată (/admin/vehicule/:id) care permite administratorilor să măriști toate fotografiile, să verifice validitatea VIN, să revizuiesc specificaiile tehnice și să inspecte informaiile vânzătorului.

Acțiuni cu Un Clic

Puncte finale API protejate pentru a aproba și publica, a respinge / dezactiva sau a edita anunțuri direct.

5. Securitate de Nivel Enterprise & Conformitate GDPR Europeană

Car Market respectă strict standardele General Data Protection Regulation (EU 2016/679) europene:

  • Autentificare Stateless JWT: Securitate token Bearer cu criptare Bcrypt password (minim 8 caractere, litere mixte, cifre și caractere speciale).
  • Portabilitate Datelor (Articolul GDPR 20): Export instant cu un singur clic (/api/gdpr/export) livrând un fișier JSON structurat cu toate metadatele profilului utilizatorului și istoricul vehiculelor.
  • Dreptul la Ștergere / "Dreptul de a fi Uitat" (Articolul GDPR 17): Ștergerea permanentă a contului cu un singur clic care curăță datele utilizatorului și șterge toate fișierele imagine fizice din stocajul serverului.

6. Matrice Caracterîstici Tehnice

Caracterîstcă Implementare Tehnică Avantaj SEO & Performanță
Glisoare Dinamice rc-slider + Prisma DB Aggregations Angajament înalt Filtrare sub-secundă fără reîncărcări de pagină
Cascadă de Catalog Inteligent Prisma vehicles: { some: { isApproved: true } } Fără Conținut Subire Previne paginile de căutare cu rezultat zero
Optimizare Imagine Sharp Node.js library to WebP 80% Core Web Vitals înaltă First Contentful Paint (FCP) rapid
Integrare Video Responsive 16:9 YouTube iframe embeds Dwell Time Crește durata medie a ses iunii vizitatorului
URL Slugs slugify with unique ID suffixes Crawlability Keyword-rich, clean URLs for Google indexing
Security & Privacy JWT Tokens + Bcrypt + GDPR Art. 17 & 20 Trust & Compliance Full European regulatory adherence

Explore the Live Platform

Test live search filters, vehicle listings, and responsive UI.

Visit Live Application ↗