LPM

Luxe Passion Moteur est une plateforme full-stack de vente de véhicules qui combine un site vitrine public et un backoffice d'administration. J'ai conçu et développé le produit de bout en bout avec Next.js App Router, de l'UX et des API routes jusqu'au stockage et aux tests.

La partie publique met en avant les véhicules disponibles et vendus, tandis que le backoffice fournit des workflows CRUD authentifiés, l'upload d'images vers S3 et un traitement de formulaires structuré pour fiabiliser les données.

L'espace d'administration a été pensé pour des utilisateurs non techniques: création et édition rapides des annonces, gestion média contrôlée et formatage prévisible des données entre l'UI et les route handlers backend.

• Rôle: développement full-stack (UI/UX, API, MongoDB, intégration S3, tests E2E).
• Workflows admin: création, mise à jour et suppression des annonces véhicules.
• Formulaire avancé: upload multi-images avec prévisualisation et réordonnancement côté admin.
• Hardening: stratégie de noms d'images uniques pour éviter les collisions à l'upload.
• Couche d'auth: accès admin protégé via route d'authentification et flux API dédié.
• Livraison: itérations validées par des tests end-to-end sur les parcours clés.

Technologies

• Framework: Next.js 15 (App Router) + React 18.
• UI stack: Tailwind CSS avec composants Mantine et shadcn.
• Stockage: MongoDB pour les annonces, AWS S3 pour les images.
• Backend: route handlers App Router pour les endpoints admin et public.
• Email: intégration Nodemailer pour les flux de contact transactionnels.
• Qualité: tests E2E Cypress couvrant le backoffice et les formulaires.

• Interface responsive pour desktop et mobile.
• Pipeline d'images basé sur AWS pour les visuels produits.
• Modèle de données MongoDB pour gérer les annonces véhicules.
• Flux de contact intégré pour les leads entrants.
• Dashboard admin avec opérations de création, mise à jour et suppression.
• Accès backoffice sécurisé avec authentification.
• API route handlers dans l'App Router pour séparer public et admin.
• Parsing et coercion de FormData pour les tableaux et champs numériques.
• Couverture E2E sur l'authentification, la création d'annonces et l'upload.

Décisions techniques

• Séparation public/admin: découpage clair entre pages vitrine et routes de gestion internes.
• Normalisation FormData: logique backend de formatage des tableaux et coercion numérique avant persistance.
• Résilience upload: génération de noms uniques pour éviter l'écrasement d'images sur S3.
• Fiabilité: scénarios Cypress utilisés comme filet de régression pendant les itérations.

Captures d'écran (desktop)

Captures d'écran (mobile)