Next Store

Una aplicación de e-commerce moderna y completa construida con Next.js (App Router), TypeScript y Tailwind CSS. Next Store ofrece una experiencia de compra fluida con carrito persistente, autenticación de usuarios, reseñas de productos, resúmenes de reseñas con IA y un panel de administración robusto. La plataforma utiliza tecnologías escalables como Zustand para el estado, Prisma con Neon para la base de datos y Resend para verificación y notificaciones por email.

Tabla de Contenidos

• Next Store
  • Tabla de Contenidos
  • Vista Previa
  • Funcionalidades
    • Tienda
    • Usuario & Admin
    • UI/UX
  • Stack Tecnológico
    • Núcleo
    • Estilos & UI
    • Estado & Datos
    • Autenticación & Autorización
    • Media & IA
    • Comunicación & Automatización
    • Experiencia Dev
  • Estructura del Proyecto
  • Buenas Prácticas

Vista Previa

Inicio

Detalle de Producto

Carrito

Modo Claro

Funcionalidades

Tienda

• Navegación de productos por categoría
• Páginas de detalle de producto
• Agregar productos al carrito
• Carrito con estado persistente
• Generar pedidos

Usuario & Admin

• Autenticación de usuarios y roles
• Perfil de usuario e historial de pedidos
• Reseñas de productos por usuarios
• Resumen de reseñas generado por IA
• Sección admin para gestionar pedidos, usuarios, productos y slider principal

UI/UX

• Cambiador de tema (claro/oscuro/sistema)
• Layout responsivo
• UI basada en componentes

Stack Tecnológico

Núcleo

• Framework: Next.js (App Router)
• Lenguaje: TypeScript

Estilos & UI

• Estilos: Tailwind CSS
• Iconos: react-icons (Io5)
• Animaciones: Framer Motion

Estado & Datos

• Gestión de Estado: Zustand
• ORM: Prisma
• Base de Datos: Neon (PostgreSQL)
• Validación de Formularios: Zod, React Hook Form

Autenticación & Autorización

• Auth: NextAuth.js

Media & IA

• Imágenes: Cloudinary
• Resúmenes IA: Anthropic Claude

Comunicación & Automatización

• Email: Resend (verificación y notificaciones)
• Tareas programadas: Vercel Cron

Experiencia Dev

• Linting/Formato: ESLint, Prettier, prettier-plugin-tailwindcss
• Gestión de Entorno: dotenv

Estructura del Proyecto

src/
  actions/                  # Acciones del servidor (lógica, DB, API, etc.)
  app/                      # Directorio app de Next.js (rutas, layouts, endpoints)
    (auth)/                 # Páginas de auth (login, registro)
    (shop)/                 # Páginas de tienda (carrito, categoría, checkout, producto, etc.)
    api/                    # Rutas API (auth, cron, upload, etc.)
  components/               # Componentes reutilizables de UI y features
  config/                   # Configuración global (fuentes, etc.)
  lib/                      # Utilidades y adaptadores
    adapters/               # p.ej., bcrypt
    db/                     # Prisma client, schema, seed, migraciones, datos
    utils/                  # Funciones utilitarias (formato, etc.)
  store/                    # Stores Zustand (carrito, tema, UI, dirección)
  types/                    # Tipos TypeScript (producto, usuario, etc.)

Buenas Prácticas

• Responsabilidad Única: Cada módulo, componente y función hace una sola cosa bien.
• Nombres Claros: Nombres descriptivos para archivos, funciones y variables.
• Diseño Modular: Código organizado por feature y responsabilidad para mantenibilidad y escalabilidad.
• Validación & Seguridad: Toda entrada de usuario es validada (Zod) y acciones sensibles requieren autenticación.
• Async/Await: Todas las operaciones asíncronas usan async/await para claridad y manejo de errores.
• Variables de Entorno: Secretos y configuración gestionados por variables de entorno.
• Manejo de Errores: Todas las acciones y rutas API gestionan errores y dan feedback útil.
• Sin Sobre-ingeniería: Solo se implementan las features y abstracciones necesarias (principio YAGNI).
• Estilo Consistente: Tailwind CSS para una UI moderna y unificada.
• Cleanup Automatizado: Tareas programadas (Vercel Cron) para limpiar usuarios/newsletters no verificados.