E-commerce Slicko

Slicko es una tienda online de calzado diseñada para ofrecer una experiencia completa de compra y gestión. Incluye catálogo de productos, carrito, pagos con Stripe, administración de pedidos y autenticación de usuarios en una arquitectura moderna React + Express + MySQL.

Tabla de contenidos

• Descripción general
• Funcionalidades principales
• Tecnologías
• Frontend
• Backend
• Despliegue
• Contribuciones y siguientes pasos

Descripción general

Slicko combina una interfaz SPA con un backend REST en Node.js para ofrecer una tienda online de calzado completa. Los usuarios pueden registrarse, navegar productos, comentar, agregar ítems al carrito y pagar con Stripe. Los administradores pueden gestionar productos, pedidos y usuarios desde el panel.

Funcionalidades principales

• Registro e inicio de sesión de usuarios con JWT
• CRUD completo de productos y panel administrativo
• Carrito de compras con cálculo automático de subtotal
• Checkout con Stripe y flujo de pago seguro
• Gestión de pedidos y paneles de control
• Carga de imágenes vía Cloudinary o URLs externas

Tecnologías

• Frontend: React, Vite, React Router, Axios
• Backend: Node.js, Express, bcrypt, jsonwebtoken, express-validator
• Almacenamiento: Cloudinary para imágenes (opcional)
• Base de datos: MySQL (mysql2/promise)
• Pagos: Stripe

Frontend

Descripción del frontend

El frontend de Slicko es una SPA construida con React y Vite. Administra la navegación de usuario, el catálogo de productos, el carrito, los formularios de autenticación y la experiencia visual.

Estructura Frontend

Frontend/
├── package.json                 # Dependencias y scripts del proyecto
├── vite.config.js               # Configuración de compilación Vite
├── index.html                   # Entrada HTML de la app
└── src/
    ├── main.jsx                 # Punto de entrada de la aplicación React
    ├── App.jsx                  # Componente raíz de la aplicación
    ├── assets/                  # Imágenes, iconos, wallpapers, fuentes
    ├── components/              # Componentes reutilizables comunes
    ├── pages/                   # Páginas principales (Home, Products, Auth, Admin...)
    ├── Styles/                  # Archivos CSS y estilos globales
    └── utils/                   # Utilidades pequeñas (por ejemplo formatTime.js)

Variables de entorno Frontend

Crear un archivo .env en Frontend/ si se requiere exponer variables públicas.

Variables esperadas:

• VITE_STRIPE_KEY

Instalación y ejecución del frontend

cd Frontend
npm install
npm run dev

---

Backend

Descripción del backend

El backend de Slicko es una API REST en Express que gestiona autenticación JWT, productos, carrito, pedidos, comentarios, administración, Stripe, email y recuperación de contraseña.

Arquitectura Backend

El backend usa un punto de entrada central en Backend/src/index.js.

Client
  |
  v
Backend/src/index.js (middlewares globales)
  - CORS
  - express.json
  - JWT Authentication (en rutas protegidas)
  - File Upload (Multer en rutas de producto)
  |
  ├─ /api/admin         --> Routes --> Controller --> Model --> Database
  ├─ /api/usuarios      --> Routes --> Controller --> Model --> Database
  ├─ /api/productos     --> Routes --> Controller --> Model --> Database
  ├─ /api/cart          --> Routes --> Controller --> Model --> Database
  ├─ /api/comment       --> Routes --> Controller --> Model --> Database
  ├─ /api/orders        --> Routes --> Controller --> Model --> Database
  ├─ /api/dashboard     --> Routes --> Controller --> Model --> Database
  ├─ /api/stripe        --> Routes --> Controller --> Payment Service
  ├─ /api/email         --> Routes --> Controller --> Email Service
  └─ /api/recoverpassword --> Routes --> Controller --> Model --> Database

• Backend/src/routes/ define los endpoints y delegan en los controladores.
• Backend/src/controllers/ contiene la lógica de cada ruta.
• Backend/src/models/ agrupa las consultas y la interacción con la base de datos.
• Backend/src/config/ contiene la configuración de DB, Stripe, Cloudinary y Multer.
• Los middleware de autenticación JWT se aplican en rutas que requieren usuario/admin.

Estructura Backend

Backend/
├── package.json                 # Dependencias y scripts del backend
└── src/
    ├── index.js                 # Punto de entrada de la API Express
    ├── config/                  # Módulos de configuración
    │   ├── db.js                # Conexión MySQL
    │   ├── cloudinary.js        # Configuración de Cloudinary
    │   ├── multer.js            # Configuración de uploads con Multer
    │   └── stripe.js            # Configuración de Stripe
    ├── controllers/             # Controladores y lógica de rutas
    ├── models/                  # Modelos y consultas a la base de datos
    ├── middlewares/             # Autenticación (JWT), validaciones y errores
    └── routes/                  # Definición de rutas Express
├── uploads/                     # Subidas locales (opcional)
└── .env                         # Variables de entorno (no se debe versionar)

Variables de entorno Backend

Crear un archivo .env en Backend/ con los nombres de variables necesarios para la aplicación.

Variables esperadas:

• PORT
• DB_HOST
• DB_USER
• DB_PASSWORD
• DB_NAME
• JWT_SECRET
• STRIPE_SECRET_KEY
• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET

Instalación y ejecución del backend

cd Backend
npm install
npm run dev
npm start

Base de datos

• Crear la base de datos MySQL.
• Aplicar migraciones o ejecutar scripts de seeds si están disponibles.
• La conexión se configura en Backend/src/config/db.js.

API Endpoints

Administración

Login administrador

POST /api/admin/login

Obtener administradores

GET /api/admin/users
Authorization: Bearer TOKEN

Crear administrador

POST /api/admin/newAdmin
Authorization: Bearer TOKEN

Actualizar administrador

PUT /api/admin/updateAdmin
Authorization: Bearer TOKEN

Eliminar administrador

DELETE /api/admin/deleteAdmin
Authorization: Bearer TOKEN

Usuarios

Registro

POST /api/usuarios/register
Content-Type: application/json

Login

POST /api/usuarios/login
Content-Type: application/json

Obtener perfil

GET /api/usuarios
Authorization: Bearer TOKEN

Actualizar perfil

PUT /api/usuarios/update
Authorization: Bearer TOKEN
Content-Type: application/json

Eliminar cuenta

DELETE /api/usuarios/delete
Authorization: Bearer TOKEN

Productos

Listar productos

GET /api/productos

Ver producto

GET /api/productos/:producto_id

Crear producto

POST /api/productos/createProduct
Authorization: Bearer TOKEN

Subir imagen de producto

POST /api/productos/upload-image
Authorization: Bearer TOKEN
Content-Type: multipart/form-data

Actualizar producto

PUT /api/productos/update/:producto_id
Authorization: Bearer TOKEN

Eliminar producto

DELETE /api/productos/delete/:producto_id
Authorization: Bearer TOKEN

Carrito

Obtener carrito

GET /api/cart
Authorization: Bearer TOKEN

Agregar producto

POST /api/cart
Authorization: Bearer TOKEN
Content-Type: application/json

Actualizar carrito

PUT /api/cart
Authorization: Bearer TOKEN
Content-Type: application/json

Eliminar item del carrito

DELETE /api/cart
Authorization: Bearer TOKEN

Pedidos

Obtener pedidos de usuario

GET /api/orders/userOrders
Authorization: Bearer TOKEN

Obtener todos los pedidos

GET /api/orders
Authorization: Bearer TOKEN

Actualizar pedido

PUT /api/orders/orderUpdate/:pedido_id
Authorization: Bearer TOKEN

Comentarios

Obtener comentarios por producto

GET /api/comment/:producto_id

Obtener comentarios de usuario

GET /api/comment/user
Authorization: Bearer TOKEN

Crear comentario

POST /api/comment/:producto_id
Authorization: Bearer TOKEN
Content-Type: application/json

Eliminar comentario

DELETE /api/comment/:comentario_id
Authorization: Bearer TOKEN

Dashboard

Obtener datos de dashboard

GET /api/dashboard
Authorization: Bearer TOKEN

Stripe

Crear PaymentIntent

POST /api/stripe/create-payment-intent
Authorization: Bearer TOKEN
Content-Type: application/json

Email

Enviar correo

POST /api/email/send
Content-Type: application/json

Recuperación de contraseña

Solicitar código

POST /api/recoverpassword/forgot-password
Content-Type: application/json

Verificar código

POST /api/recoverpassword/verify-code
Content-Type: application/json

Restablecer contraseña

POST /api/recoverpassword/reset-password
Content-Type: application/json

Despliegue

• Frontend: Vercel
• Backend: Railway
• Base de datos: MySQL gestionado o MySQL en Railway

Contribuciones y siguientes pasos

• Seguir los patrones de código en Backend/src/ y Frontend/src/.
• Abrir issues para solicitudes de funciones o corrección de errores.