Diagramas

Diagramas

1. Casos de Uso

graph LR
    Cliente(("Cliente"))
    Admin(("Administrador"))

    subgraph Catálogo
        UC1[Ver catálogo]
        UC2[Ver detalle de producto]
        UC3[Filtrar productos]
    end

    subgraph Autenticación
        UC4[Registrarse]
        UC5[Iniciar sesión]
    end

    subgraph Carrito y Pedidos
        UC6[Agregar al carrito]
        UC7[Gestionar carrito]
        UC8[Realizar pedido]
        UC9[Ver historial de pedidos]
    end

    subgraph Administración
        UC10[Acceder al panel admin]
        UC11[Gestionar productos]
        UC12[Gestionar stock]
        UC13[Ver y gestionar pedidos]
    end

    Cliente --> UC1
    Cliente --> UC2
    Cliente --> UC3
    Cliente --> UC4
    Cliente --> UC5
    Cliente --> UC6
    Cliente --> UC7
    Cliente --> UC8
    Cliente --> UC9

    Admin --> UC10
    Admin --> UC11
    Admin --> UC12
    Admin --> UC13

Loading

2. Secuencia — Flujo de Compra

sequenceDiagram
    actor Cliente
    participant Frontend
    participant Backend
    participant DB as Base de Datos

    Cliente->>Frontend: Selecciona producto y talla
    Frontend->>Backend: GET /productos/:id
    Backend->>DB: Consulta producto y stock
    DB-->>Backend: Datos del producto
    Backend-->>Frontend: Producto con tallas disponibles
    Frontend-->>Cliente: Muestra detalle del producto

    Cliente->>Frontend: Agrega al carrito
    Frontend-->>Cliente: Actualiza carrito localmente

    Cliente->>Frontend: Confirma pedido e ingresa datos de envío
    Frontend->>Backend: POST /pedidos
    Backend->>DB: Verifica stock disponible
    DB-->>Backend: Stock confirmado
    Backend->>DB: Crea pedido y descuenta stock
    DB-->>Backend: Pedido creado
    Backend-->>Frontend: Respuesta con número de orden
    Frontend-->>Cliente: Muestra resumen del pedido

Loading

3. Diagrama de Clases

classDiagram
    class Usuario {
        +id: UUID
        +nombre: String
        +correo: String
        +contraseña: String
        +rol: Enum[cliente, admin]
        +creadoEn: DateTime
    }

    class Producto {
        +id: UUID
        +nombre: String
        +descripcion: String
        +precio: Decimal
        +categoria: String
        +activo: Boolean
        +creadoEn: DateTime
    }

    class Talla {
        +id: UUID
        +nombre: Enum[XS, S, M, L, XL, XXL]
    }

    class ProductoTalla {
        +id: UUID
        +stock: Integer
    }

    class ImagenProducto {
        +id: UUID
        +url: String
        +orden: Integer
    }

    class Pedido {
        +id: UUID
        +numeroPedido: String
        +estado: Enum[pendiente, en_proceso, enviado, entregado]
        +total: Decimal
        +nombre: String
        +direccion: String
        +ciudad: String
        +telefono: String
        +creadoEn: DateTime
    }

    class DetallePedido {
        +id: UUID
        +cantidad: Integer
        +precioUnitario: Decimal
    }

    Usuario "1" --> "0..*" Pedido : realiza
    Pedido "1" --> "1..*" DetallePedido : contiene
    DetallePedido "1..*" --> "1" ProductoTalla : referencia
    Producto "1" --> "1..*" ProductoTalla : tiene
    Talla "1" --> "1..*" ProductoTalla : define
    Producto "1" --> "0..*" ImagenProducto : tiene

Loading

4. ERD — Entidad Relación

Archivo editable: erd-sommet.drawio

5. Arquitectura del Sistema

graph TB
    subgraph Cliente
        Browser[Navegador]
    end

    subgraph Frontend["Frontend — Vercel"]
        Next["Next.js 15\n(App Router)"]
        Tailwind["Tailwind CSS"]
    end

    subgraph Backend["Backend — Render"]
        API["Node.js + Express\n(API REST)"]
        Auth["Auth.js\n(Autenticación)"]
    end

    subgraph Database["Base de Datos — Supabase"]
        PG[(PostgreSQL)]
        Prisma["Prisma ORM"]
    end

    subgraph Externos["Servicios Externos"]
        Cloudinary["Cloudinary\n(Imágenes)"]
        Wompi["Wompi\n(Pagos — futuro)"]
    end

    Browser -->|HTTPS| Next
    Next -->|API calls| API
    API -->|queries| Prisma
    Prisma -->|SQL| PG
    API -->|upload/fetch| Cloudinary
    Next -->|imágenes optimizadas| Cloudinary
    API -.->|futuro| Wompi
    Auth -->|sesiones| API

Loading