LPM

Luxe Passion Moteur is a full-stack vehicle sales platform combining a public showcase and an administration backoffice. I designed and developed the product end-to-end with Next.js App Router, from UX and API routes to storage and testing.

The public side highlights available and sold vehicles, while the backoffice provides authenticated CRUD workflows for listings, image uploads to S3, and structured form handling for reliable data processing.

The administration area was built to be practical for non-technical users: fast listing creation and editing, controlled media management, and predictable data formatting between UI and backend route handlers.

• Role: full-stack development (UI/UX, APIs, MongoDB, S3 integration, E2E testing).
• Admin workflows: create, update and delete vehicle listings.
• Advanced form: multi-image upload with preview and reordering in admin.
• Hardening: unique image naming strategy to avoid upload collisions.
• Auth layer: protected admin access with dedicated auth route and API flow.
• Delivery: iterative releases validated with end-to-end tests on key user paths.

Tech Stack

• Framework: Next.js 15 (App Router) + React 18.
• UI stack: Tailwind CSS with Mantine and shadcn components.
• Storage: MongoDB for listings, AWS S3 for images.
• Backend: App Router route handlers for admin and public endpoints.
• Email: Nodemailer integration for transactional contact flows.
• Quality: Cypress E2E tests covering admin and form workflows.

• Responsive interface for desktop and mobile.
• AWS-based image pipeline for product visuals.
• MongoDB data model to manage vehicle listings.
• Integrated contact flow for inbound leads.
• Admin dashboard with create, update and delete operations.
• Secure backoffice access with authentication.
• API route handlers in App Router to separate public and admin concerns.
• FormData parsing and coercion for arrays and numeric fields.
• E2E coverage for authentication, listing creation and upload flows.

Technical decisions

• Public/admin split: clear separation between showroom pages and internal management routes.
• FormData normalization: backend formatting for arrays and numeric coercion before persistence.
• Upload resilience: unique naming to prevent image overwrite collisions in S3.
• Reliability: Cypress scenarios used as a regression safety net during iterations.

Screenshots (desktop)

Screenshots (mobile)