CatalogoTienda

🛍️ CatalogoTienda - Sistema de E-commerce Completo

Sistema integral de catálogo de productos con autenticación avanzada, gestión de usuarios, panel de administración y sistema de temas dinámicos revolucionario.

Estado del Proyecto Versión Node.js MongoDB

📋 Tabla de Contenidos

✨ Características Principales

🎨 Sistema de Temas Dinámicos 4.0 ⭐ NUEVO ⭐

🔐 Autenticación Avanzada

🛒 E-commerce Completo

🔔 Sistema de Notificaciones Inteligentes

� Gestión de Usuarios

🎨 Sistema de Temas Revolucionario

Arquitectura del Sistema

El sistema de temas utiliza una arquitectura completamente local que elimina la dependencia de un estado global en la base de datos, permitiendo que cada usuario/dispositivo tenga su propia preferencia de tema.

┌─────────────────────────────────────────────┐
│                FRONTEND                     │
├─────────────────┬───────────────────────────┤
│   Usuario       │      Administrador        │
│  (index.html)   │   (indexAdmin.html)       │
├─────────────────┼───────────────────────────┤
│ Selector Temas  │    Editor Completo        │
│ (Preferencias)  │  (Creación/Edición)       │
├─────────────────┴───────────────────────────┤
│         tema-global.js (Universal)          │
│      Aplicación automática del tema         │
│    activo en TODAS las páginas              │
├─────────────────────────────────────────────┤
│       sweetalert-tema.js (Nuevo)            │
│    SweetAlert2 con adaptación automática    │
│           al tema seleccionado              │
├─────────────────────────────────────────────┤
│            localStorage                     │
│  ✓ temaSeleccionadoId: "tema_id"           │
│  ✓ nombreTemaSeleccionado: "Oscuro"        │
│  ✓ coloresTema: {...}                      │
└─────────────────────────────────────────────┘
                       ↕
┌─────────────────────────────────────────────┐
│               BACKEND/API                   │
├─────────────────────────────────────────────┤
│            MongoDB Atlas                    │
│         Colección: temas                    │
│                                             │
│  {                                          │
│    _id: ObjectId,                           │
│    nombre: "Oscuro",                        │
│    colores: {                               │
│      bgPrimary: "#000000",                  │
│      textPrimary: "#ffffff",                │
│      success: "#4caf50",                    │
│      ...16 variables CSS                    │
│    },                                       │
│    fechaCreacion: Date,                     │
│    fechaModificacion: Date                  │
│  }                                          │
│                                             │
│  ❌ Campo "activo" ELIMINADO                │
│     (Ahora es preferencia local)            │
└─────────────────────────────────────────────┘

Flujo de Funcionamiento

1. Inicialización Automática

// Al cargar cualquier página
tema-global.js → 
Verifica localStorage → 
Si está vacío: aplica tema "Claro" por defecto → 
Aplica variables CSS → 
Configura SweetAlert2

2. Selección de Tema (Usuario/Admin)

// Usuario selecciona tema
Comparación con localStorage → 
Si es diferente: actualiza variables CSS → 
Guarda en localStorage → 
Reconfigura SweetAlert2 → 
Emite evento 'temaAplicado'

3. Creación de Temas (Solo Admin)

// Administrador crea nuevo tema
Editor visual → 
Nombre + Colores por defecto → 
POST /api/temas → 
MongoDB → 
Recarga lista de temas → 
Abre editor para personalizar

4. Edición Visual (Solo Admin)

// Edición en tiempo real
Sliders RGB + Input HEX → 
Cambios inmediatos en CSS → 
Botón "Guardar" → 
PUT /api/temas/:id → 
MongoDB actualizado

Variables CSS Personalizables

El sistema maneja 16 variables CSS que controlan todos los aspectos visuales:

:root {
    /* Fondos principales */
    --bg-primary: #ffffff;      /* Fondo principal de la aplicación */
    --bg-secondary: #f8f9fa;    /* Fondo de secciones secundarias */
    --bg-tertiary: #e9ecef;     /* Fondo de elementos terciarios */
  
    /* Textos */
    --text-primary: #212529;    /* Texto principal (títulos, contenido) */
    --text-secondary: #6c757d;  /* Texto secundario (subtítulos, ayuda) */
    --text-accent: #007bff;     /* Texto de acento (enlaces, botones) */
  
    /* Bordes y líneas */
    --border-primary: #dee2e6;  /* Bordes principales (tarjetas, inputs) */
    --border-secondary: #ced4da; /* Bordes secundarios (divisores) */
  
    /* Sombras */
    --shadow-light: rgba(0,0,0,0.1);  /* Sombra suave (cards, hovers) */
    --shadow-medium: rgba(0,0,0,0.2); /* Sombra media (modales, dropdowns) */
  
    /* Estados y feedback */
    --success: #28a745;         /* Color para acciones exitosas */
    --warning: #ffc107;         /* Color para advertencias */
    --error: #dc3545;           /* Color para errores */
    --info: #17a2b8;            /* Color para información */
  
    /* Elementos especiales */
    --modal-bg: rgba(0,0,0,0.5); /* Fondo de modales y overlays */
    --hover-overlay: rgba(0,0,0,0.05); /* Overlay para efectos hover */
}

Características Técnicas Avanzadas

✅ Editor RGB Completo

✅ Persistencia Inteligente

✅ Integración Universal

✅ Gestión de Estados

Archivos del Sistema de Temas

Archivo Propósito Ubicación
editor-temas.js Editor visual completo (Admin) /js/
tema-global.js Aplicación universal (Todas las páginas) /js/
sweetalert-tema.js SweetAlert2 con temas dinámicos /js/
temasDB.js Gestión de base de datos de temas /js/
temasManager.js Selector de temas (Usuario) /js/
Tema.js Modelo de MongoDB /models/

🛠 Tecnologías Utilizadas

Backend

Frontend

Servicios Externos

Herramientas de Desarrollo

🚀 Configuración del Proyecto

Prerrequisitos

Instalación

  1. Clonar el repositorio 
    git clone https://github.com/tu-usuario/CatalogoTienda.git
cd CatalogoTienda
  2. Instalar dependencias 
    cd backend
npm install
  3. Configurar variables de entorno 
    cp .env.example .env

    Editar .env con tus credenciales:

    # Base de datos
MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/catalogo
   
# Google OAuth
GOOGLE_CLIENT_ID=tu_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=tu_client_secret
   
# Email
EMAIL_USER=tu_email@gmail.com
EMAIL_PASS=tu_app_password
   
# Servidor
PORT=3000
SESSION_SECRET=generar_clave_super_segura
JWT_SECRET=otra_clave_segura
  4. Configurar Google OAuth
    • Ir a Google Cloud Console
    • Crear proyecto → Habilitar Google+ API
    • Crear credenciales OAuth 2.0:
      • Origen autorizado: http://localhost:3000
      • URI de redirección: http://localhost:3000/auth/google/callback
  5. Ejecutar el proyecto 
    npm start

    La aplicación estará disponible en: http://localhost:3000

📁 Estructura del Proyecto

CatalogoTienda/
├── backend/
│   ├── models/                    # Modelos de MongoDB
│   │   ├── Tema.js               # ⭐ Modelo de temas (sin campo "activo")
│   │   ├── productos.js          # Modelo de productos
│   │   ├── perfil.js             # Modelo de usuarios
│   │   └── ...
│   ├── public/                   # Frontend estático
│   │   ├── index.html            # Página principal (usuarios)
│   │   ├── indexAdmin.html       # Panel de administración
│   │   ├── css/
│   │   │   ├── style.css         # ⭐ Estilos con variables CSS
│   │   │   └── editor-temas.css  # Estilos del editor
│   │   ├── js/
│   │   │   ├── tema-global.js    # ⭐ Sistema universal de temas
│   │   │   ├── editor-temas.js   # ⭐ Editor visual (Admin)
│   │   │   ├── sweetalert-tema.js # ⭐ SweetAlert2 con temas
│   │   │   ├── temasDB.js        # Gestión de datos de temas
│   │   │   ├── temasManager.js   # Selector de temas (Usuario)
│   │   │   ├── script.js         # Lógica principal
│   │   │   └── ...
│   │   └── img/                  # Imágenes y avatares
│   ├── data/                     # Datos iniciales JSON
│   ├── server.js                 # ⭐ Servidor principal
│   └── package.json
├── MANUAL_USUARIO.md             # ⭐ Manual para usuarios finales
├── README.md                     # Manual técnico (este archivo)
└── package.json

Archivos Críticos del Sistema de Temas

Archivo Líneas Función
tema-global.js ~150 Aplicación universal de temas
editor-temas.js ~1200 Editor visual completo
sweetalert-tema.js ~350 SweetAlert2 adaptativo
Tema.js ~45 Modelo de datos (sin “activo”)

🔌 API Endpoints

Sistema de Temas

GET    /api/temas          # Obtener todos los temas
GET    /api/temas/:id      # Obtener tema específico
POST   /api/temas          # Crear nuevo tema (Admin)
PUT    /api/temas/:id      # Actualizar tema (Admin)
DELETE /api/temas/:id      # Eliminar tema (Admin)

Autenticación

POST /api/crear-cuenta         # Registro tradicional
POST /api/iniciar-sesion       # Login tradicional
GET  /auth/google              # Iniciar OAuth Google
GET  /auth/google/callback     # Callback OAuth
POST /api/recuperar-contrasena # Solicitar reset password
POST /api/restablecer-contrasena # Confirmar reset

Productos

GET    /api/productos          # Listar productos
GET    /api/productos/:id      # Obtener producto
POST   /api/productos          # Crear producto (Admin)
PUT    /api/productos/:id      # Actualizar producto (Admin)
DELETE /api/productos/:id      # Eliminar producto (Admin)
PATCH  /api/productos/:id/disponibilidad # Cambiar estado

Gestión de Usuarios

GET  /api/usuarios             # Listar usuarios (Admin)
GET  /api/perfil               # Obtener perfil propio
PUT  /api/perfil               # Actualizar perfil
POST /api/perfil/foto          # Subir avatar
PUT  /api/usuarios/:correo/rol # Cambiar rol (Admin)

E-commerce

GET    /api/usuarios/:correo/carrito    # Obtener carrito
PUT    /api/usuarios/:correo/carrito    # Actualizar carrito
POST   /api/pagar                       # Procesar pago
GET    /api/usuarios/:correo/compras    # Historial compras

Administración

# Gestión de contenido
GET/POST/PUT/DELETE /api/sobre-nosotros
GET/POST/PUT/DELETE /api/terminos-condiciones
GET/POST/PUT/DELETE /api/categorias
GET/POST/PUT/DELETE /api/monedas
GET/POST/PUT/DELETE /api/ubicaciones
GET/POST/PUT/DELETE /api/redes-sociales

# Control de acceso
GET/POST/DELETE /api/ips           # Gestión IPs permitidas
GET/POST        /api/mensajes      # Sistema de contacto

👨‍💻 Manual de Desarrollo

Convenciones de Código

Backend (JavaScript/Node.js)

// ✅ Buenas prácticas
app.post('/api/endpoint', async (req, res) => {
    try {
        // Validar parámetros
        const { campo } = req.body;
        if (!campo) {
            return res.status(400).json({ error: 'Campo requerido' });
        }
        
        // Lógica de negocio
        const resultado = await Modelo.create({ campo });
        
        // Respuesta exitosa
        res.status(201).json(resultado);
    } catch (error) {
        console.error('Error en endpoint:', error);
        res.status(500).json({ error: 'Error interno del servidor' });
    }
});

Frontend (JavaScript ES6+)

// ✅ Gestión de APIs
async function llamarAPI(endpoint, datos = null) {
    try {
        const opciones = {
            method: datos ? 'POST' : 'GET',
            headers: { 'Content-Type': 'application/json' }
        };
        
        if (datos) opciones.body = JSON.stringify(datos);
        
        const response = await fetch(endpoint, opciones);
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error || 'Error en la petición');
        }
        
        return await response.json();
    } catch (error) {
        console.error('Error en API:', error);
        mostrarToast('error', 'Error', error.message);
        throw error;
    }
}

CSS (Variables CSS)

/* ✅ Uso de variables del tema */
.mi-componente {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    box-shadow: 0 2px 4px var(--shadow-light);
}

.mi-componente:hover {
    background-color: var(--bg-secondary);
    box-shadow: 0 4px 8px var(--shadow-medium);
}

.mi-componente.success {
    border-color: var(--success);
    color: var(--success);
}

Debugging y Troubleshooting

Problemas Comunes

Problema Síntoma Solución
Temas no se aplican Variables CSS no cambian Verificar carga de tema-global.js
SweetAlert sin tema Notificaciones con colores por defecto Verificar carga de sweetalert-tema.js
Editor no abre Click en “Editar” no responde Verificar editor-temas.js y dependencias
Tema no persiste Se pierde al recargar Verificar localStorage y tema-global.js
Google OAuth falla Error de redirect URI Verificar configuración en Google Cloud

🚀 Despliegue

Variables de Entorno Producción

NODE_ENV=production
MONGODB_URI=mongodb+srv://prod-user:secure-pass@cluster.mongodb.net/prod-db
GOOGLE_CLIENT_ID=prod_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=prod_client_secret
GOOGLE_CALLBACK_URL=https://tudominio.com/auth/google/callback
EMAIL_USER=noreply@tudominio.com
EMAIL_PASS=secure_app_password
SESSION_SECRET=clave_super_segura_64_caracteres_minimo
JWT_SECRET=otra_clave_super_segura_diferente
PORT=443

🔒 Importante: En producción, usar variables de entorno del sistema operativo, no archivos .env

Consideraciones de Producción

📊 Changelog

🆕 Versión 4.0.0 - Sistema de Temas Unificado (Junio 2025)

✨ Funcionalidades Nuevas

🔧 Mejoras Técnicas

🐛 Bugs Corregidos

Versión 3.0.0 - Sistema de Notificaciones Inteligentes (Mayo 2025)

Versión 2.0.0 - Sistema de Temas Dinámicos Original (Abril 2025)

📝 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

🤝 Contribución

Cómo Contribuir

  1. Fork del repositorio
  2. Crear rama para feature: git checkout -b feature/nueva-funcionalidad
  3. Commit cambios: git commit -m 'feat: agregar nueva funcionalidad'
  4. Push a la rama: git push origin feature/nueva-funcionalidad
  5. Crear Pull Request con descripción detallada

Estándares de Contribución

Reportar Issues

📞 Contacto

⚡ Sistema de Temas Revolucionario - Versión 4.0.0 ⚡

Una experiencia de usuario completamente personalizable con el sistema de temas más avanzado del mercado.

🛍️ ¡Gracias por usar CatalogoTienda! 🛍️

📋 Tabla de Contenidos

🎯 Descripción del Proyecto

CatalogoTienda es una plataforma completa de e-commerce construida con Node.js y MongoDB que ofrece:

👥 Para Usuarios

🔧 Para Administradores

✨ Características Principales

🔐 Autenticación Avanzada

🎨 Sistema de Temas Dinámicos

🔔 Sistema de Notificaciones Inteligentes

🛒 E-commerce Completo

🌍 Internacionalización

🛠 Tecnologías Utilizadas

Backend

Frontend

Servicios Externos

🔔 Sistema de Notificaciones Inteligentes

Arquitectura de Notificaciones

El sistema implementa una estrategia inteligente de notificaciones que mejora significativamente la experiencia del usuario:

🎯 Toast Notifications (Por Defecto)

// Ejemplo de toast automático
Swal.fire({
    toast: true,
    position: 'top-end',
    icon: 'success',
    title: 'Producto agregado al carrito',
    showConfirmButton: false,
    timer: 3000
});

🚨 Modales de Confirmación (Casos Específicos)

// Modal de confirmación crítica
const result = await Swal.fire({
    title: '¿Eliminar producto?',
    text: 'Esta acción no se puede deshacer',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Sí, eliminar',
    cancelButtonText: 'Cancelar'
});

📝 Criterios de Clasificación

Integración con Temas

📧 Personalización de Correos

Sistema de Correos Tematizados

Los correos electrónicos del sistema se adaptan automáticamente al tema visual activo:

✉️ Tipos de Correo Soportados

🎨 Características de Personalización

🔧 Implementación Técnica

// Función para obtener tema activo (backend)
async function obtenerTemaActivo() {
    try {
        const tema = await Tema.findOne({ activo: true });
        return tema ? tema.colores : null;
    } catch (error) {
        console.error('Error al obtener tema activo:', error);
        return null;
    }
}

// Aplicación en correos
const coloresTema = await obtenerTemaActivo();
const htmlCorreo = generarHTMLCorreo(datos, coloresTema);

🎨 Sistema de Temas Dinámicos

Arquitectura del Sistema

┌─────────────────────────────────────────────┐
│                Frontend                     │
│   index.html    │     indexAdmin.html       │
│ (Preferencias)  │   (Editor de Temas)       │
├─────────────────┼───────────────────────────┤
│   script.js     │    editor-temas.js        │
│ (Modal Prefs)   │  (Editor Visual)          │
├─────────────────┼───────────────────────────┤
│         tema-global.js (Universal)          │
│      (Aplicación automática en todas       │
│           las páginas)                      │
├─────────────────┼───────────────────────────┤
│      sweetalert-tema.js (Nuevo)             │
│  (SweetAlert2 con temas dinámicos)          │
├─────────────────┴───────────────────────────┤
│             localStorage                    │
│  - temaSeleccionado (ID)                   │
│  - nombreTemaSeleccionado                  │
│  - coloresTema (JSON)                      │
│  - iconicoTema                             │
└─────────────────────────────────────────────┘
                       ↕
┌─────────────────────────────────────────────┐
│                Backend                      │
├─────────────────────────────────────────────┤
│            MongoDB Atlas                    │
│         Colección: temas                    │
│                                             │
│  {                                          │
│    _id: ObjectId,                           │
│    nombre: "Tema Oscuro",                   │
│    icono: "🌙",                             │
│    colores: {                               │
│      bgPrimary: "#1a1a1a",                  │
│      textPrimary: "#ffffff",                │
│      success: "#4caf50",                    │
│      error: "#f44336",                      │
│      warning: "#ff9800",                    │
│      info: "#2196f3",                       │
│      ...                                    │
│    },                                       │
│    activo: boolean                          │
│  }                                          │
└─────────────────────────────────────────────┘

Características Principales

🎨 Editor Visual de Temas

🎯 Sistema de Variables CSS

🔄 Sincronización Automática

🎭 SweetAlert2 Integrado

Flujo de Funcionamiento

1. Creación de Temas (Admin):

// En indexAdmin.html - Editor visual
EditorTemas.crearNuevoTema() → 
API POST /api/temas → 
MongoDB → 
Renderización inmediata → 
Editor visual abierto

2. Edición de Temas (Admin):

// Editor visual con sliders RGB
EditorTemas.editarTema(id) →
Sliders RGB + Input HEX →
Previsualización en vivo →
Guardado en MongoDB →
Aplicación inmediata

3. Aplicación de Temas (Usuario/Admin):

// Aplicar tema seleccionado
EditorTemas.aplicarTema(id) →
Variables CSS actualizadas →
localStorage sincronizado →
SweetAlert2 reconfigurado →
Evento 'temaAplicado' emitido

4. Carga Automática (Todas las páginas):

// Al cargar cualquier página
tema-global.js ejecutado →
localStorage consultado →
Variables CSS aplicadas →
sweetalert-tema.js configurado →
Tema listo para usar

Configuración de SweetAlert2

Mixins Disponibles:

// Toast notifications (esquina superior derecha)
window.SwalToast.fire({
    icon: 'success',
    title: 'Operación exitosa',
    text: 'Los datos se guardaron correctamente'
});

// Modal de confirmación
const resultado = await window.SwalConfirm.fire({
    title: '¿Eliminar elemento?',
    text: 'Esta acción no se puede deshacer'
});

// Alerta simple
window.SwalAlert.fire({
    icon: 'info',
    title: 'Información',
    text: 'Datos actualizados correctamente'
});

Funciones de Utilidad:

// Toast rápido
mostrarToast('success', 'Guardado exitoso');

// Confirmación rápida
const confirmado = await mostrarConfirmacion(
    '¿Continuar?', 
    'Se aplicarán los cambios'
);

// Alerta rápida
mostrarAlerta('error', 'Error', 'No se pudo conectar al servidor');

Archivos del Sistema

Archivo Propósito Ubicación
editor-temas.js Editor visual de temas (Admin) /js/editor-temas.js
tema-global.js Aplicación automática (Universal) /js/tema-global.js
sweetalert-tema.js [NUEVO] SweetAlert2 con temas /js/sweetalert-tema.js
style.css Variables CSS y estilos SweetAlert2 /css/style.css

Variables CSS Personalizables

:root {
    /* Fondos */
    --bg-primary: #ffffff;      /* Fondo principal */
    --bg-secondary: #f8f9fa;    /* Fondo secundario */
    --bg-tertiary: #e9ecef;     /* Fondo terciario */
  
    /* Textos */
    --text-primary: #212529;    /* Texto principal */
    --text-secondary: #6c757d;  /* Texto secundario */
    --text-accent: #007bff;     /* Texto de acento */
  
    /* Bordes */
    --border-primary: #dee2e6;  /* Borde principal */
    --border-secondary: #ced4da; /* Borde secundario */
  
    /* Sombras */
    --shadow-light: rgba(0,0,0,0.1);  /* Sombra suave */
    --shadow-medium: rgba(0,0,0,0.2); /* Sombra media */
  
    /* Estados */
    --success: #28a745;         /* Color de éxito */
    --warning: #ffc107;         /* Color de advertencia */
    --error: #dc3545;           /* Color de error */
    --info: #17a2b8;            /* Color de información */
  
    /* Especiales */
    --modal-bg: rgba(0,0,0,0.5); /* Fondo de modales */
    --hover-overlay: rgba(0,0,0,0.05); /* Overlay hover */
}

🚀 Configuración del Proyecto

Prerequisitos

Instalación

  1. Clonar el repositorio

    git clone https://github.com/tu-usuario/CatalogoTienda.git
cd CatalogoTienda

  2. Instalar dependencias

    npm install
cd backend
npm install

  3. Configurar variables de entorno

    # backend/.env (usar valores propios)
MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/catalogo
JWT_SECRET=generar_clave_secreta_segura_unica
GOOGLE_CLIENT_ID=tu_google_client_id.googleusercontent.com
GOOGLE_CLIENT_SECRET=tu_google_client_secret
EMAIL_USER=tu_email@gmail.com
EMAIL_PASS=tu_app_password_gmail
PORT=3000

    ⚠️ Importante: Nunca commitear el archivo .env con credenciales reales. Usar siempre variables de entorno seguras en producción.

  4. Inicializar la base de datos

    node init-idiomas.js  # Crear monedas y ubicaciones iniciales

  5. Ejecutar el proyecto

    npm start
# o para desarrollo:
npm run dev

📁 Estructura del Proyecto

CatalogoTienda/
├── backend/
│   ├── models/           # Modelos de MongoDB
│   │   ├── productos.js
│   │   ├── perfil.js
│   │   ├── categoria.js
│   │   └── ...
│   ├── routes/           # Rutas de la API
│   │   └── routes.js
│   ├── public/           # Frontend estático
│   │   ├── index.html    # Página principal
│   │   ├── indexAdmin.html # Panel admin
│   │   ├── css/
│   │   │   ├── style.css      # Estilos principales
│   │   │   └── editor-temas.css # Estilos del editor
│   │   ├── js/
│   │   │   ├── script.js      # Lógica principal
│   │   │   ├── editor-temas.js # Editor de temas
│   │   │   ├── tema-global.js  # Sistema global
│   │   │   └── ...
│   │   └── img/          # Imágenes estáticas
│   ├── data/             # Datos iniciales
│   ├── server.js         # Servidor principal
│   ├── init-idiomas.js   # Script inicialización
│   └── package.json
├── README.md
└── package.json

Frontend

Autenticación

🚀 Configuración del Proyecto

Prerrequisitos

Instalación

  1. Clonar el repositorio

    git clone https://github.com/tu-usuario/CatalogoTienda.git
cd CatalogoTienda

  2. Instalar dependencias

    cd backend
npm install
  3. Configurar variables de entorno 
    cp .env.example .env

    Editar el archivo .env con tus credenciales reales:

    # Google OAuth
GOOGLE_CLIENT_ID=tu_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=tu_client_secret
GOOGLE_CALLBACK_URL=/auth/google/callback
   
# MongoDB
MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/database
   
# Email (para envío de correos tematizados)
EMAIL_USER=tu_email@gmail.com
EMAIL_PASS=tu_app_password_gmail
   
# Servidor
PORT=3000
SESSION_SECRET=generar_session_secret_muy_seguro
JWT_SECRET=generar_jwt_secret_seguro

    ⚠️ Seguridad: Nunca commitear archivos .env con credenciales reales. Usar variables de entorno del sistema en producción.

  4. Configurar Google OAuth

    • Ve a Google Cloud Console
    • Crea un nuevo proyecto
    • Habilita la API de Google+
    • Crea credenciales OAuth 2.0
    • Configura las URLs autorizadas:
      • Origen: http://localhost:3000
      • Redirect URI: http://localhost:3000/auth/google/callback

  5. Ejecutar el proyecto

    npm start

    El servidor se ejecutará en http://localhost:3000

� Estructura del Proyecto

CatalogoTienda/
├── backend/
│   ├── models/           # Modelos de MongoDB
│   │   ├── perfil.js    # Modelo de usuarios
│   │   ├── productos.js # Modelo de productos
│   │   ├── mensajes.js  # Modelo de mensajes/contacto
│   │   └── ...
│   ├── public/          # Archivos estáticos
│   │   ├── css/        # Estilos
│   │   ├── js/         # JavaScript del frontend
│   │   ├── img/        # Imágenes y avatares
│   │   └── productos/  # Imágenes de productos
│   ├── data/           # Archivos de configuración JSON
│   ├── routes/         # Rutas de la API
│   ├── .env.example   # Plantilla de variables de entorno
│   ├── server.js      # Servidor principal
│   └── package.json   # Dependencias
├── .gitignore
└── README.md

🔌 API Endpoints

Autenticación

POST /api/crear-cuenta         # Crear cuenta nueva
POST /api/iniciar-sesion       # Iniciar sesión tradicional
GET  /auth/google              # Iniciar OAuth con Google
GET  /auth/google/callback     # Callback de Google OAuth
GET  /api/auth/user            # Obtener usuario autenticado

Productos

GET    /api/productos          # Obtener todos los productos
GET    /api/productos/:id      # Obtener producto por ID
POST   /api/productos          # Crear nuevo producto (Admin)
PUT    /api/productos/:id      # Actualizar producto (Admin)
DELETE /api/productos/:id      # Eliminar producto (Admin)
PATCH  /api/productos/:id/disponibilidad  # Cambiar estado

Usuarios y Perfil

GET  /api/perfil               # Obtener perfil del usuario
PUT  /api/perfil               # Actualizar perfil
POST /api/perfil/foto          # Subir foto de perfil
GET  /api/usuarios             # Obtener todos los usuarios (Admin)
PUT  /api/usuarios/:correo/rol # Cambiar rol de usuario (Admin)

Carrito y Compras

GET    /api/usuarios/:correo/carrito    # Obtener carrito
PUT    /api/usuarios/:correo/carrito    # Actualizar carrito
DELETE /api/usuarios/:correo/carrito/:id # Eliminar del carrito
POST   /api/usuarios/:correo/compras    # Registrar compra
POST   /api/pagar                       # Procesar pago

Administración

GET    /api/sobre-nosotros     # Gestión de equipo
POST   /api/sobre-nosotros     # Crear/actualizar miembro
DELETE /api/sobre-nosotros/:id # Eliminar miembro

GET    /api/terminos-condiciones  # Términos y condiciones
POST   /api/terminos-condiciones  # Crear/actualizar término

GET    /api/monedas            # Gestión de monedas
POST   /api/monedas            # Crear moneda
PUT    /api/monedas/:id        # Actualizar moneda
DELETE /api/monedas/:id        # Eliminar moneda

GET    /api/categorias         # Gestión de categorías
POST   /api/categorias         # Crear categoría
PUT    /api/categorias/:id     # Actualizar categoría
DELETE /api/categorias/:id     # Eliminar categoría

🔐 Sistema de Autenticación

Autenticación Tradicional

  1. Registro: Email + contraseña con validaciones de seguridad
  2. Login: Verificación con bcrypt + rate limiting
  3. Sesiones: Manejo persistente con express-session

Google OAuth

  1. Integración: Passport.js con Google Strategy
  2. Datos: Descarga automática de avatar de Google
  3. Sincronización: Merge de cuentas existentes

Seguridad

📁 Gestión de Archivos

Configuración Multer

// Productos: /productos/
// Perfiles: /img/perfiles/
// Equipo: /img/

Tipos de archivo

Eliminación automática

🛡 Seguridad

Headers de Seguridad (Helmet)

// CSP configurado para recursos necesarios
// CORS habilitado con credenciales
// Protección XSS y clickjacking

Rate Limiting

Validaciones

👨‍💻 Manual de Desarrollador

Agregar Nueva Funcionalidad

  1. Crear modelo (si necesita base de datos)

    // backend/models/nuevoModelo.js
const mongoose = require('mongoose');

const nuevoSchema = new mongoose.Schema({
  campo: { type: String, required: true }
});

module.exports = mongoose.model('NuevoModelo', nuevoSchema);

  2. Agregar endpoints

    // En server.js o routes/
app.get('/api/nuevo-endpoint', async (req, res) => {
  try {
    // Lógica aquí
    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

  3. Frontend JavaScript

    // backend/public/js/nuevoArchivo.js
async function nuevaFuncion() {
  try {
    const response = await fetch('/api/nuevo-endpoint');
    const data = await response.json();
    // Manejar respuesta
  } catch (error) {
    console.error('Error:', error);
  }
}

Convenciones de Código

Backend

Frontend

Base de Datos

Debugging

  1. Logs del servidor

    # Ejecutar con logs detallados
DEBUG=* npm start

  2. Verificar conexión DB

    mongoose.connection.on('connected', () => {
  console.log('MongoDB conectado');
});

  3. Verificar variables de entorno

    console.log('Puerto:', process.env.PORT);
console.log('MongoDB:', process.env.MONGODB_URI ? 'Configurado' : 'No configurado');

Testing

Test manual de endpoints

# Productos
curl -X GET http://localhost:3000/api/productos

# Login
curl -X POST http://localhost:3000/api/iniciar-sesion \
  -H "Content-Type: application/json" \
  -d '{"correo":"test@test.com","contrasena":"password"}'

Verificar autenticación

  1. Login en frontend
  2. Verificar localStorage con DevTools
  3. Probar endpoints protegidos

Problemas Comunes

Error de CORS

// Verificar configuración en server.js
app.use(cors({
  origin: function (origin, callback) {
    callback(null, true);
  },
  credentials: true
}));

Error de rate limiting

// Verificar IP y reset manual si es necesario
authLimiter.store.resetKey(req.ip);

Problemas de uploads

// Verificar permisos de carpetas
// Verificar límites de multer
// Verificar tipos de archivo permitidos

🚀 Despliegue

Variables de Entorno Producción

NODE_ENV=production
MONGODB_URI=mongodb+srv://prod-user:secure-pass@cluster.mongodb.net/prod-db
GOOGLE_CLIENT_ID=prod_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=prod_client_secret
GOOGLE_CALLBACK_URL=https://tu-dominio.com/auth/google/callback
EMAIL_USER=noreply@tu-dominio.com
EMAIL_PASS=secure_app_password
SESSION_SECRET=generar_clave_super_segura_produccion
JWT_SECRET=generar_jwt_secret_seguro_produccion
PORT=443

🔒 Importante: En producción, usar variables de entorno del sistema operativo, no archivos .env

Consideraciones de Producción

Scripts de Despliegue

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "echo \"No tests specified\"",
    "prod": "NODE_ENV=production node server.js"
  }
}

📊 Changelog y Actualizaciones Recientes

🆕 Versión 3.0 - Sistema de Notificaciones Inteligentes (Diciembre 2024)

✨ Nuevas Funcionalidades

🎨 Correos Tematizados

🔧 Mejoras Técnicas

🛠 Versión 2.5 - Sistema de Temas Dinámicos (Noviembre 2024)

🎨 Editor Visual de Temas

🌍 Aplicación Universal

🔐 Versión 2.0 - Sistema de Autenticación Avanzado (Octubre 2024)

🛡 Seguridad Mejorada

📧 Sistema de Correo

🛒 Versión 1.5 - E-commerce Completo (Septiembre 2024)

💳 Sistema de Pagos

🌐 Internacionalización

🔬 Funcionalidades Técnicas Avanzadas

📈 Performance y Optimización

🛡 Seguridad Empresarial

🔄 Mantenimiento y Escalabilidad

📚 Documentación Técnica Adicional

📄 Archivos de Documentación

🔧 Archivos de Configuración Importantes

🧪 Scripts de Utilidades

💡 Tip: Revisar estos archivos para entender la implementación técnica completa de cada funcionalidad.

🤝 Contribución

Proceso de Contribución

  1. Fork del repositorio
  2. Crear rama para la feature: git checkout -b feature/nueva-funcionalidad
  3. Commit cambios: git commit -m 'Agregar nueva funcionalidad'
  4. Push a la rama: git push origin feature/nueva-funcionalidad
  5. Pull Request con descripción detallada

Estándares de Código

Reportar Bugs

  1. Issue en GitHub con:
    • Descripción del problema
    • Pasos para reproducir
    • Comportamiento esperado vs actual
    • Screenshots (si aplica)
    • Información del entorno

� Manual de Usuario

Para usuarios finales que necesitan aprender a usar el sistema, consulta el Manual de Usuario que incluye:

🚀 Guías Paso a Paso

🎨 Sistema de Temas para Usuarios

🛍️ Experiencia de Compra

❓ Solución de Problemas

📌 Nota: El manual de usuario está diseñado para personas sin conocimientos técnicos y utiliza un lenguaje claro y directo con muchas capturas de pantalla e instrucciones visuales.

�📝 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

📞 Contacto

¡Gracias por contribuir al proyecto CatalogoTienda! 🛍️