🛒 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

🖼️ Vista Previa

🏠 Inicio Página de inicio

🛒 Detalle de Producto

🛍️ Carrito 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.

Next Store