E-Commerce & Portafolio Interactivo – Elena Damota Art

Plataforma web premium de e-commerce y portafolio interactivo diseñada a medida para la artista Elena Damota (Oviedo, España). El sistema combina una experiencia visual inmersiva orientada al arte con una infraestructura robusta y segura para la venta de obras originales, reproducciones firmadas (prints) y gestión de pedidos personalizados.

---

Arquitectura y Tecnologías Clave

Frontend y SSR (Next.js 16 & React)

• Cómo y dónde se usó: Implementación de rutas dinámicas y renderizado híbrido para optimizar el SEO de las galerías de arte y asegurar tiempos de carga ultra veloces en la visualización de obras de alta resolución. Uso intensivo de React Server Components (RSC) para la recuperación eficiente de datos directamente en el servidor.

Estilos y Sistema de Diseño (Tailwind CSS v4)

• Cómo y dónde se usó: Configuración CSS-first a través de @theme (sin archivo de configuración JS externo) para definir una paleta cromática minimalista y elegante (tonos crema, óxido, carbón y grafito) y tipografías personalizadas que complementan la estética artística sin restar protagonismo a las obras.

Base de Datos y Backend-as-a-Service (Supabase & Postgres)

• Cómo y dónde se usó: Gestión de la base de datos relacional para el manejo de usuarios, perfiles, productos, pedidos, valoraciones y variantes de tamaño. Implementación de políticas de seguridad a nivel de fila (Row Level Security - RLS) y autenticación. En el servidor, se utiliza el cliente de administración con bypass de RLS para flujos específicos de back-office.

Procesamiento de Pagos (Stripe API & Webhooks)

• Cómo y dónde se usó: Integración nativa de Stripe Checkout Sessions para un flujo de pago seguro e internacional, optimizado tanto para usuarios registrados como para compras rápidas de invitados (Guest Checkout). Procesamiento asíncrono del estado de los pedidos mediante un manejador de Webhooks dedicado.

Control de Acceso (Proxy Handler Chain Customizado)

• Cómo y dónde se usó: Creación de una cadena de middlewares en el servidor (proxy.ts) para interceptar las peticiones y gestionar de forma limpia la seguridad del panel de administración y las secciones privadas de perfil de usuario.

Estado del Carrito (Zustand con Persistencia)

• Cómo y dónde se usó: Gestión del estado global del carrito de compras sincronizado en tiempo real con localStorage, resolviendo la lógica de matching por variante de tamaño y número de edición para asegurar la consistencia de productos exclusivos.

Validación y Tipado Estricto (TypeScript & Zod)

• Cómo y dónde se usó: Esquemas de Zod para la validación rigurosa de datos en los formularios de pedidos personalizados y deserialización segura de las filas de la base de datos a tipos estáticos de la aplicación.

Estrategia de Testing (Vitest, MSW & Playwright)

• Cómo y dónde se usó: Cobertura de tests unitarios y de integración mediante Vitest con simulación estricta de APIs externas (Supabase y Stripe) usando Mock Service Worker (MSW). Pruebas de extremo a extremo (E2E) automatizadas con Playwright para validar completamente los flujos críticos de checkout y navegación.

---

Este proyecto destaca mi enfoque para diseñar arquitecturas de comercio electrónico de alto rendimiento, asegurando una estética impecable junto con un flujo de datos seguro, tipado y completamente testeado desde el servidor hasta el cliente.