Tunealo

Plataforma eCommerce + Marketplace

  • Versión: 1.0.0
  • Cliente: Tunealo (antes Autozone)
  • Estado: Desarrollo / Beta
  • Framework: Next.js

Documentación técnica oficial para el desarrollo, despliegue y mantenimiento de la plataforma Tunealo.

Alcance del proyecto

El objetivo es transformar la marca Autozone en Tunealo mediante una solución tecnológica robusta. La plataforma opera bajo un modelo híbrido:

  1. eCommerce directo: Comercialización del inventario propio de Tunealo.
  2. Marketplace: Permite a vendedores independientes (terceros) registrarse, cargar inventario y vender productos, generando comisiones para la plataforma.

Funcionalidades principales

  • Interfaz visual estilo Pinterest (Grid Masonry).
  • Sistema de gestión de usuarios (Compradores y Vendedores).
  • Carrito de compras con persistencia en base de datos.
  • Chat en tiempo real entre compradores y vendedores.
  • Panel de control para vendedores.

Stack tecnológico

Área Tecnología Descripción
Frontend Next.js (React) Uso del App Router, Server Components y Client Components.
Backend Node.js (Next API Routes) Endpoints RESTful integrados en la misma arquitectura Next.js (`src/app/api`).
Base de datos MySQL Base de datos relacional para usuarios, productos y transacciones.
Estilos CSS Modules / CSS Global Diseño responsivo y personalizado (`globals.css`, `page.module.css`).
Autenticación JWT / Context API Manejo de estado global con `AuthContext`.

Instalación y configuración

Prerrequisitos

  • Node.js (v18 o superior)
  • MySQL Server (Local o Remoto)
  • Git

Pasos de configuración

1. Clonar el repositorio:

git clone https://github.com/camlo43/marketplace.git
cd marketplace

2. Instalar dependencias:

npm install

3. Configurar base de datos:

Navegue a la carpeta /DB y ejecute los scripts SQL en el siguiente orden en su gestor de MySQL:

  1. create_database_and_tables.sql (Crea la estructura)
  2. add_images.sql (Puebla datos iniciales de imágenes)
  3. migrate_all_products.sql (Migración de datos de prueba)

4. Variables de entorno:

Configure el archivo de conexión en src/lib/db.js o cree un archivo .env si el proyecto ha sido actualizado para usarlo. Asegúrese de que las credenciales de MySQL sean correctas.

5. Ejecutar scripts de mantenimiento (opcional):

Si necesita descargar imágenes de prueba o corregir el carrito:

node scripts/download-images.js
node scripts/fix_cart_duplicates.js

6. Iniciar el servidor de desarrollo:

npm run dev

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

Arquitectura del sistema

Estructura de Archivos

El proyecto sigue la estructura estándar de Next.js App Router:

/marketplace
├── DB/                     # Scripts SQL para creación y migración
├── public/                 # Assets estáticos (imágenes, svgs)
├── scripts/                # Scripts de utilidad (JS/Python) para mantenimiento
├── src/
│   ├── app/                # Rutas de la aplicación (Pages & API)
│   │   ├── api/            # Backend endpoints
│   │   ├── cart/           # Página del carrito
│   │   ├── login/          # Página de login
│   │   ├── marketplace/    # Página principal de productos
│   │   ├── product/[id]/   # Detalle de producto dinámico
│   │   └── seller/[id]/    # Perfil público del vendedor
│   ├── components/         # Componentes UI reutilizables (Header, ProductCard)
│   ├── context/            # Estado global (Auth, Cart, Message)
│   └── lib/                # Utilidades y conexión a BD
└── package.json            # Dependencias y scripts npm

Esquema de base de datos

El sistema utiliza MySQL con las siguientes tablas principales (basado en create_database_and_tables.sql):

Tabla Descripción
users Almacena información de clientes y vendedores. Incluye campos para roles (tipo de usuario).
products Inventario principal. Contiene título, descripción, precio, stock, y referencia al seller_id.
cart Persistencia del carrito de compras por usuario. Relaciona user_id y product_id.
messages Sistema de chat interno. Almacena remitente, destinatario y contenido del mensaje.
reservations Manejo de órdenes o productos apartados.

Documentación API (REST)

La API se encuentra en src/app/api/. A continuación se detallan los endpoints principales.

Autenticación & Usuarios

Ruta Base: /api/users
Método Endpoint Descripción
POST /login Verifica credenciales y retorna sesión de usuario.
POST /register Registra un nuevo usuario en la plataforma.
GET /[id] Obtiene detalles de un usuario específico.
GET /[id]/seller Obtiene información pública del perfil de vendedor.

Productos

Ruta Base: /api/products
Método Endpoint Descripción
GET / Obtiene el listado de todos los productos (Marketplace).
POST / Crea un nuevo producto (solo vendedores).
GET /[id] Obtiene detalles completos de un producto.

Carrito de compras

Ruta Base: /api/cart
// Ejemplo de payload para POST /api/cart
{
  "userId": 1,
  "productId": 105,
  "quantity": 1
}

Frontend & UI

El diseño se inspira en una interfaz tipo Pinterest, enfocada en la visualización rápida de productos.

Componentes clave

Muestra la imagen del producto, precio y título en un formato de tarjeta vertical. Maneja eventos de clic para navegar al detalle (`/product/[id]`) y botones rápidos para añadir al carrito.
Componente flotante o integrado que permite la comunicación en tiempo real. Utiliza `MessageContext` para gestionar el estado de los mensajes entre el comprador y el vendedor.
Formulario seguro para procesar la compra. Valida los datos del usuario y la dirección de envío antes de confirmar la transacción.

Sistema de diseño

Se utilizan estilos globales en src/app/globals.css. La paleta de colores busca modernizar la marca, alejándose de los colores tradicionales de Autozone para adoptar la identidad de Tunealo.

  • Grid: Diseño responsivo con CSS Grid y Flexbox.
  • Imágenes: Optimización automática mediante el componente Image de Next.js.
  • Iconos: SVG importados directamente (`cart-icon.png`, `file.svg`).

Soporte y contribución

Este proyecto fue desarrollado como reto para la Universidad de la Costa (CUC).

Para reportar bugs o solicitar nuevas características, por favor crear un Issue en el repositorio del proyecto.