El proyecto simula una tienda de ropa exclusiva integrando flujos complejos de autenticación, persistencia de datos en la nube, pasarela de pagos y testing automatizado.
Stack Tecnológico & Arquitectura
Frontend: Next.js 15+ (App Router) aprovechando Server Components (RSC) para cargas asíncronas inmediatas y SEO optimizado.
Estilos: Tailwind CSS con un diseño minimalista, responsivo y animaciones fluidas.
Base de Datos: Aiven (PostgreSQL) para garantizar persistencia robusta del historial de compras y perfiles.
API Layer: GraphQL local mediante peticiones fetch nativas, optimizando la transferencia de datos.
Estado Global: Zustand para el manejo del carrito de compras en memoria en tiempo real.
Autenticación: NextAuth.js integrado con Google OAuth y sesiones en base de datos.
Pasarela de Pagos: Mercado Pago SDK integrado dinámicamente mediante Webhooks y Query Params.
Características Principales
Buscador Sincronizado en URL: Filtrado instantáneo del catálogo mediante Query Params (?search=...).
Skeleton Loader Premium: Pantallas de carga animadas (animate-pulse) dentro de bloques <Suspense />.
Lista de Deseos (Wishlist): Persistencia independiente de productos favoritos por usuario.
Historial de Órdenes Dinámico: Sección exclusiva ('Mis Compras') protegida por NextAuth.
QA & Testing Automation (Playwright)
El repositorio incluye una suite completa de pruebas End-to-End (E2E) diseñada bajo el patrón de arquitectura Page Object Model (POM).
Mantenibilidad: Separación estricta de selectores y flujos lógicos en clases independientes.
Agnóstico al Entorno: Configuración dinámica para ejecutar tests en localhost o producción.
Interceptación de Rutas: Simulación de flujos mediante mockeo de respuestas API (page.route).