Fan Wheels
Cliente · Catálogo + Panel
Cliente
Fan Wheels
Rol
UI + Full stack
Herramientas
Next.js · React · TypeScript · Tailwind · Supabase · GSAP
Timeline
2026
Descripción
Fan Wheels vende autos a escala por Instagram, de marcas como Hot Wheels, Matchbox, Majorette, Tomica, Maisto y Greenlight. Hasta este proyecto el catálogo vivía en una plataforma genérica alquilada: servía para mostrar precios, pero no se parecía en nada a la marca y no daba lugar a crecer.
El pedido fue reemplazarla por un sitio propio con dos condiciones que marcaron todo el diseño. La primera: no hay pago online, el pedido se arma en la web y se cierra por WhatsApp, que es donde el cliente realmente vende. La segunda: el panel para cargar productos tenía que ser tan simple como el que ya usaban, porque lo usan dos personas y ninguna es técnica.
Qué hice
- Catálogo público con búsqueda por nombre, marca y serie, filtros por marca y escala, orden y paginado explícito (sin scroll infinito, pedido del cliente).
- Ficha de producto con galería, estado de disponibilidad y ficha técnica con escala, año, serie, condición del blister y stock.
- Carrito que no cobra: arma el mensaje del pedido con ítems, cantidades y total, y abre WhatsApp con todo escrito.
- Panel privado en /admin, separado del sitio público, para cargar productos, fotos, precios, banners de portada, colecciones y el carrusel de marcas.
- Portada editable desde el panel: los banners del hero, sus textos y la velocidad de la cinta de marcas se cambian sin tocar código.
- Vidrieras por sección para las líneas del negocio que no son autos, cada una con su propia entrada en la navegación.
Catálogo y filtros
Decisiones de producto
Cada auto tiene un solo precio con su moneda, cargado a mano. No hay conversión automática de cara al público: en un negocio de importados el tipo de cambio del día no puede decidir cuánto sale una pieza. El panel sí sugiere un valor con el tipo de cambio de referencia, pero solo sugiere, porque el precio que manda es el que cargó la persona.
Otra: stock cero no esconde el producto. Sigue en la vidriera con el botón deshabilitado y el motivo a la vista, sea sin stock, reservado o vendido, porque el catálogo también funciona como muestrario de lo que la tienda consigue.
Y una que salió del uso real: subirle una foto propia a un producto oculto lo publica automáticamente. La foto es lo último que se hace antes de venderlo, y el clic que faltaba se olvidaba siempre.
Ficha de producto
El pedido, sin pago online
Cómo está hecho
Next.js 16 con App Router, React 19, TypeScript y Tailwind 4, con GSAP para los reveals y el movimiento de la cinta de marcas. Los datos viven en Supabase: Postgres con RLS, Auth para las dos cuentas del panel y Storage para las fotos de producto.
El panel está protegido por proxy, que es como pasó a llamarse el middleware en Next 16. Es el único lugar que escribe cookies de sesión, y nunca se enlaza desde el sitio público. Escribir el catálogo está reservado a las cuentas de la tienda: tener sesión iniciada no alcanza, porque los clientes también pueden crearse una cuenta.
La interfaz es de vidrio sobre un fondo fijo con tres halos de color en los tonos de la marca, azul, amarillo y rojo. Suma tipografía del sistema y objetivos táctiles nunca por debajo de 44 px. Móvil primero, porque el tráfico llega de Instagram.
Vidriera
Hoy
El sitio está online con el catálogo completo cargado y es el canal al que Fan Wheels manda a sus seguidores desde Instagram. La tienda carga sus propios productos y fotos desde el panel, sin depender de mí para publicar.
Sigue en desarrollo: cuentas de cliente, opiniones y niveles de fidelidad son las piezas que estamos sumando ahora sobre la misma base.
Ver Fan Wheels
El catálogo está abierto y la tienda atiende por Instagram: