Una plataforma de comercio electrónico robusta, escalable y estructurada bajo una arquitectura cliente-servidor.
Link de la paginaEl proyecto está construido como un Monorepo separando lógicamente el Frontend del Backend, desplegados en infraestructuras independientes para maximizar rendimiento y seguridad.
| Categoría | Tecnología / Herramienta | Rol en el Proyecto | Despliegue / Hosting |
|---|---|---|---|
| Frontend | HTML5, CSS3, Vanilla JS | Interfaz de usuario, peticiones fetch, manipulación del DOM. |
☁️ Vercel |
| Backend | Node.js, Express.js | Lógica de negocio, API RESTful, Middlewares. | ☁️ Render |
| Base de Datos | MySQL | Almacenamiento relacional, transacciones, integridad referencial. | ☁️ TiDB Cloud (Serverless) |
| Paquete | Versión | Propósito Principal |
|---|---|---|
bcrypt |
^6.0.0 |
Hashing y salting de contraseñas para protección de datos confidenciales. |
jsonwebtoken |
^9.0.3 |
Generación y validación estricta de tokens de acceso (JWT). |
mysql2 |
^3.22.3 |
Cliente de conexión MySQL basado en promesas con soporte obligatorio SSL. |
cors |
^2.8.6 |
Control de acceso HTTP (Cross-Origin Resource Sharing) para la API. |
dotenv |
^17.4.2 |
Gestión segura de variables de entorno y secretos de producción. |
El sistema maneja dos tipos de roles, protegidos y validados criptográficamente mediante JSON Web Tokens (JWT).
- Autenticación: Registro de nuevos clientes e inicio de sesión seguro.
- Catálogo Dinámico: Visualización de productos en tiempo real consultando la base de datos.
- Carrito de Compras: Sistema persistente para agregar y gestionar productos previo a la compra.
- Checkout y Pedidos: Creación de órdenes con descuento automático y transaccional del inventario (Stock).
- Historial: Consulta de pedidos anteriores realizados por el cliente logueado.
- Acceso Privilegiado: Autenticación y generación de token exclusivo de nivel administrador.
- Auditoría de Usuarios: Endpoint para recuperar y visualizar todos los clientes registrados.
- Gestión de Inventario (CRUD): - Recuperar todos los productos del sistema.
- Agregar productos nuevos al catálogo.
- Modificar productos existentes mediante método PUT.
La experiencia de usuario (UX) y la interfaz (UI) se desarrollaron bajo principios de rendimiento y escalabilidad visual:
- Arquitectura Modular CSS: Hojas de estilo separadas por contexto (
global.css,catalog.css,cart.css,auth.css,checkout.css,orders.css) para un mantenimiento óptimo. - Diseño Responsivo: Adaptación fluida a dispositivos móviles, tablets y pantallas de escritorio.
- Feedback Visual: Respuestas dinámicas e inmediatas ante interacciones del usuario.
- Zero Frameworks: Interfaz construida de forma nativa sin librerías pesadas para asegurar tiempos de carga casi instantáneos en el navegador.
proyecto_e-commerce
┣ backend/
┃ ┣ controllers/ # Lógica de negocio (auth, orders, products, clients)
┃ ┣ middlewares/ # Validadores de seguridad (verifyToken, verifyAdmin)
┃ ┣ models/ # Configuración y pool de conexión a la BD
┃ ┣ routes/ # Definición de endpoints de la API
┃ ┗ app.js # Entry point del servidor Express
┣ frontend/
┃ ┣ assets/images/ # Recursos gráficos
┃ ┣ css/ # Estilos modulares
┃ ┣ js/services/ # Lógica centralizada de peticiones (api.js)
┃ ┗ *.html # Vistas de la aplicación web
┣ .gitignore
┗ package.json| Método | Endpoint | Descripción | Requiere Token | Rol Mínimo |
|---|---|---|---|---|
POST |
/api/auth/register |
Registra un nuevo cliente | ❌ | Público |
POST |
/api/auth/login |
Inicia sesión (Cliente/Admin) | ❌ | Público |
GET |
/api/products |
Obtiene el catálogo de productos | ✅ | Cliente / Admin |
POST |
/api/orders |
Crea un nuevo pedido | ✅ | Cliente |
GET |
/api/orders |
Obtiene el historial del usuario | ✅ | Cliente |
GET |
/api/clients |
Obtiene la lista completa de clientes | ✅ | Admin |
POST |
/api/products |
Crea un producto nuevo en BD | ✅ | Admin |
PUT |
/api/products/:id |
Modifica un producto existente | ✅ | Admin |
Proyecto desarrollado por: