19 de mayo de 2026

Visión general

QMP Cars es un concesionario de autos premium de segunda mano que necesitaba dos cosas a la vez: una tienda que hiciera que un inventario seleccionado a mano se sintiera tan cuidado como los propios autos, y una administración tan simple que el concesionario pudiera gestionar todo el catálogo sin tocar nunca una línea de código. Diseñé y construí ambas, de extremo a extremo. El sitio público apuesta por una estética serena, editorial, al estilo Apple: un hero de video a pantalla completa, mucho espacio en blanco y un movimiento que guía en lugar de decorar. Detrás se encuentra un panel respaldado por Supabase donde cada anuncio, foto y precio lo gestiona el concesionario directamente.

Dirección de UI

• Primera impresión cinematográfica: un hero de video a pantalla completa con reproducción automática y un parallax atado al scroll con GSAP, y un texto que vende la sensación ("Gedreven door passie") antes de vender una ficha técnica.
• Calma editorial: una paleta contenida en blanco y negro, tipografía grande y mucho aire para que sean los autos —y no el cromado de la interfaz— los que sostengan la página.
• Movimiento con intención: scroll suave con Lenis, animaciones de entrada con Motion y una sección "Onze aanpak" con scroll fijado que revela el enfoque del concesionario a medida que avanzas. Todo respeta prefers-reduced-motion.
• Flujo de la tienda: un hero de video, una declaración de filosofía, la sección de enfoque, una franja de autos destacados y una llamada a la acción oscura: un único scroll que lleva al comprador del ambiente al inventario y al contacto.

Funciones clave

• Inventario filtrable con ordenamiento por más recientes, precio y año, y filtros por marca y tipo de combustible, gestionado del lado del servidor para que los anuncios sigan siendo rápidos y amigables con el SEO.
• Páginas de detalle ricas: desglose completo de especificaciones (kilometraje, potencia, tracción, matriculación, VIN, equipamiento) y una galería de fotos con lightbox clicable.
• Ciclo de vida del anuncio: cada auto tiene un estado —borrador, disponible, reservado, vendido— para que el público solo vea lo que debe ser público.
• Administración de autogestión: un panel "Aanbod beheren" amigable para el concesionario, para crear, editar y eliminar anuncios sin ningún desarrollador de por medio.
• Galerías de fotos reordenables arrastrando, con subida directa de imágenes a Supabase Storage y una única imagen principal garantizada por auto.
• Inicio de sesión de administrador único y compartido: la cantidad justa de autenticación para un concesionario pequeño, sin la carga de gestionar usuarios.

Arquitectura

• Lectura pública, escritura autenticada, impuesta en la base de datos con Row Level Security de Postgres: cualquiera puede leer los anuncios publicados; solo el concesionario autenticado puede modificarlos. La seguridad vive en la capa de datos, no solo en la interfaz.
• Obtención de datos servidor-primero mediante React Server Components y server actions: la tienda se renderiza en el servidor y la administración muta a través de acciones tipadas.
• Capa de datos tipada: un único módulo cars envuelve cada consulta (listado, destacados, por slug, vistas de admin) y resuelve las rutas de Supabase Storage a URLs públicas de imagen en un solo lugar.
• Un esquema que modela el dominio: enums restringidos para tipo de combustible, transmisión, tipo de carrocería y tracción; una tabla car_images con una restricción de unicidad que garantiza exactamente una foto principal por auto; marcas de tiempo autoactualizadas mediante un trigger.

Tecnologías utilizadas

• Framework: Next.js 16 (App Router, React Server Components, server actions), React 19, TypeScript.
• Estilos y UI: Tailwind CSS v4, shadcn/ui sobre primitivas de Base UI, class-variance-authority, lucide-react.
• Movimiento: GSAP con ScrollTrigger para el parallax y el scroll fijado, Lenis para el scroll suave, Motion para las animaciones de entrada.
• Backend: Supabase — Postgres con Row Level Security, Auth (manejo de sesión SSR con @supabase/ssr) y Storage para las fotos de autos con políticas de lectura pública / escritura autenticada.

Retos y aprendizajes

• Dos productos en uno: una tienda optimizada para la emoción y una administración optimizada para la velocidad de entrada de datos son problemas de diseño opuestos. Mantener ambos en un mismo código con un lenguaje de diseño compartido —sin que la administración se sintiera como una idea de último momento— fue la tensión de diseño central.
• La seguridad donde corresponde: bajar el control de acceso a las políticas de RLS, en lugar de protegerlo solo en la app, significa que una página mal configurada no puede filtrar anuncios en borrador. La regla de "exactamente una imagen principal por auto" vive como una restricción de base de datos, no como un bit esperanzado de código de cliente.
• Movimiento que no estorba: el hero cinematográfico y las secciones de scroll fijado tenían que sentirse premium en una máquina rápida y aun así ser serenos (y seguros para reduced-motion) en todas partes.

Resultado

Una plataforma de concesionario completa donde el front-end de calidad showroom y el back office de autogestión son el mismo producto. El concesionario añade un auto, sube y ordena sus fotos, lo pone en vivo, y la tienda lo refleja al instante, sin intervención de ingeniería.