BG Importados

Datos rápidos

• Rol: marca, diseño y desarrollo full stack.
• Cliente: un vendedor de vehículos eléctricos (monopatines y similares).
• Manual de marca: versión 1.1, del 23-09-2026.
• Stack: Next.js, React, TypeScript, Tailwind CSS, Supabase y Zod.

El problema

El cliente necesitaba una vidriera propia: una marca, un catálogo con fichas de producto y una forma de cargar productos sin pedirme ayuda cada vez. Antes de diseñar nada, había que resolver qué se le vende a la gente.

Cómo lo encaré

Empecé por la marca, antes del código. Armé un manual de marca desde cero:

• El hallazgo: quien compra no está comprando un vehículo, está comprando dejar de gastar en moverse. Un trabajador que paga colectivo o nafta todos los días tiene un gasto fijo que nunca termina. Todo el mensaje sale de ahí.
• Diferenciales reales, no de marketing: trato directo y honesto, financiación que se arma con cada cliente y precio de importación directa.
• Tono de voz en primera persona, y una regla: la web no promete lo que el negocio no hace. Como no hay un esquema de financiación fijo, el sitio dice que la opción existe e invita a consultar, sin inventar cuotas.

Qué construí

• Catálogo con fichas de producto, preguntas frecuentes y contacto.
• Panel de administración con login y rol de administrador, para que el cliente cargue y publique productos por su cuenta.
• Datos estructurados en los productos e imagen para compartir con la marca, para que el catálogo se vea bien en buscadores y en redes.
• Seguridad por capas:
  • Un middleware protege la navegación al panel.
  • Cada acción del servidor valida la sesión contra Supabase antes de ejecutarse, porque el middleware solo no protege esos endpoints.
  • La base aplica RLS: solo lee productos publicados y solo el administrador escribe. Lo probé con la clave pública y confirmé que no lee productos ocultos.
  • Zod valida todo lo que entra, y las imágenes solo pueden apuntar al almacenamiento del propio proyecto.
  • Los errores de la base no llegan al cliente, para no mostrar nombres de columnas ni tablas.

Resultados

Qué	Dato
Marca	Manual completo: propuesta, público, diferenciales, valores y tono
Permisos	Probados con la clave pública: solo lee lo publicado
Subidas de archivos	El servidor genera el nombre, sin SVG
Cabeceras de seguridad	CSP, HSTS y las demás configuradas

Lo que dejé pendiente, y está anotado: un límite de intentos de login (hay que activarlo en Supabase con CAPTCHA) y una política de contenido más estricta, que hoy permite scripts en línea porque Next.js los necesita.

Qué aprendí

• Empezar por qué se vende, no por cómo se ve. El manual de marca ordenó todas las decisiones de diseño y de texto.
• Las acciones del servidor son endpoints. Proteger solo las rutas no alcanza.
• No simular una protección que no existe. Preferí dejar el límite de intentos pendiente y documentado antes que ponerlo en memoria, donde cada instancia tendría el suyo.