Skip to main content / Saltar al contenido principal

Senior Store - E-Commerce de Alta Performance

Aplicación web de comercio electrónico moderna, rápida y escalable con arquitectura de vanguardia en Next.js.

Tecnologías utilizadas: Next.js 16, TypeScript, Tailwind 4, Prisma, GraphQL, Zustand

Sobre el proyecto

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).