Plataforma desarrollada con Angular + Spring Boot.

Documentación visual y funcional del sistema dividida por roles: Cliente y Administrador.

🧩 Credenciales para Probar la Aplicación:

Puedes acceder a la aplicación utilizando los siguientes usuarios de prueba según el rol:

👤 Rol Cliente

• Email: -

• Contraseña: -

🛠️ Rol Administrador

• Email: -

• Contraseña: -

💳 Datos de Prueba para Mercado Pago

Para realizar una compra de prueba, debes iniciar sesión en modo privado/incógnito y utilizar el siguiente comprador de prueba:

• Usuario comprador: TETE9700722

• Contraseña: Y8in2kBZCV

💡 Nota: La aplicación está desplegada en Render (backend) y Vercel (frontend), en servicios gratis por lo que anda media lenta.

💰 Precio del código: $5000

• 🙍‍♂️ Rol Cliente

  • 🏠 Inicio
  • 🧾 Detalle del Producto
  • 🔎 Búsqueda de Productos
  • 👤 Mi Cuenta
  • 👤 Perfil
  • 🚚 Opciones de Entrega
  • 🧾 mis Pedidos
  • 📦 Detalles del Pedido
  • 🛒 Carrito de Compras
  • 💳 Checkout
  • ✅ Confirmación de Pago y Creación del Pedido
  • 💰 Modal y Respuesta de Compra

• ⚙️ Rol Administrador

  • 📊 Dashboard
  • 👥 Gestión de Clientes
  • 🛍️ Productos Comunes
  • 🌟 Productos Destacados
  • 📦 Carga Masiva de Productos
  • 🚚 Logística – Métodos de Envío
  • 💰 Compra Mínima del Carrito
  • 🚛 Zonas de Envío
  • 🧾 Gestión de Pedidos
  • 📦 Detalle de Pedido
  • 🗂️ Categorías
  • Características de Productos
  • Subcategorías de Productos
  • Slider Principal de la Página de Inicio

• 🧩 Tecnologías Principales

En esta sección se presentan los productos destacados junto con dos sliders configurables desde el panel de administración.
El buscador principal permite filtrar productos por nombre, categoría, subcategoría, características o marca, ofreciendo una experiencia de búsqueda dinámica y personalizada.

Muestra toda la información del producto: imagen, nombre, categoría, peso, precio y características.
Si tiene descuento, se muestra el precio original tachado y el porcentaje de ahorro.
Incluye botón para agregar al carrito, calcular el costo de envío y ver productos relacionados.

Listado filtrado según la búsqueda del usuario.
Incluye filtros por marca, categoría y promociones, además de ordenamiento por precio o nombre.

Desde este panel podés consultar y modificar toda la información de tu cuenta personal, administrar tus opciones de entrega y revisar el historial de tus pedidos realizados dentro del eCommerce.

• Aqui puedes actualizar los datos del cliente.

Desde esta sección puedes crear y seleccionar tu dirección de envío de manera sencilla. Tienes dos opciones disponibles:

• 📍 Usar la API de Google Maps para establecer tu ubicación directamente en el mapa.

• ✏️ Ingresarla manualmente si prefieres hacerlo de forma tradicional.

Esta será la dirección donde se entregarán tus pedidos.

En esta vista, el usuario puede consultar el historial completo de pedidos realizados desde su cuenta. Cada pedido muestra información detallada como la fecha de compra, el total, los productos adquiridos y el estado actual del pedido. Además, se adapta perfectamente a dispositivos móviles, garantizando una experiencia fluida y responsive.

• 📸 Vista general de pedidos: Permite acceder fácilmente al detalle de cada compra mediante el botón "Ver detalles del pedido". También incluye una estructura ordenada para visualizar los artículos, precios y estado de entrega.

Esta sección muestra la información completa del pedido seleccionado, incluyendo:

• 📍 Dirección de envío

• 💳 Método de pago utilizado

• 💰 Resumen del pedido (subtotal, descuentos, costos de envío y total)

• 🚚 Estado del pedido con línea de progreso visual

• 🧾 Listado detallado de los productos comprados, cantidades y precios unitarios

La interfaz permite al usuario seguir el estado de su compra en tiempo real y descargar el comprobante una vez que el pedido está en proceso o completado.

Muestra los productos seleccionados con control de cantidad, validación de stock y actualización en tiempo real del total.
Incluye un importe mínimo requerido antes de finalizar la compra y manejo de concurrencia entre usuarios.

Permite revisar, modificar y confirmar los productos antes de pagar.
Cuenta con:

• Subtotales, descuentos y totales automáticos.
• Botones de modificación (+ / -).
• Validación del stock.
• Políticas de reemplazo por falta de productos.

Flujo automatizado con Mercado Pago y actualización por Webhook:

1. Se recibe el webhook de Mercado Pago.
2. Se valida el estado del pago.
3. Se actualiza el stock.
4. Se genera el pedido y se envía correo de confirmación.

Visualización del proceso de pago y respuesta de compra exitosa.

Visualiza métricas del ecommerce: productos registrados, ventas del día y globales.
Permite configurar imagen de marca y fecha de inicio del comercio.

Listado de clientes con buscador avanzado y paginación.

Permite listar, editar, crear y desactivar productos.
Incluye carga de hasta 3 imágenes, cálculo automático de descuentos y etiquetado de ofertas.

Gestiona los productos visibles en la página principal.
Permite activar, editar o eliminar artículos destacados.

Permite importar productos mediante archivos .csv e imágenes .zip, optimizando la gestión masiva del catálogo.

Panel para administrar los métodos de envío: propio o tercerizado.
Permite modificar plazos, disponibilidad y costos.

Define el monto mínimo requerido para finalizar una compra, garantizando un valor base en el carrito.

Consulta y gestión de zonas de envío con cobertura en toda Argentina.
Permite actualizar los costos por región en tiempo real.

Listado de pedidos ordenados del más reciente al más antiguo, con buscador y paginación.
Incluye botón para acceder al detalle del pedido.

Visualiza toda la información del pedido: dirección, método de pago, resumen, cliente y estado.
Permite:

• ❌ Cancelar pedido y devolver dinero.
• 🚚 Despachar pedido con seguimiento.
• 🔄 Actualizar estado de entrega.

Listado y gestión de categorías con subcategorías y productos asociados.
Si se desactiva una categoría, también se desactivan todos sus productos.
Incluye buscador y opción para crear nuevas categorías.

Esta sección permite gestionar las características de los productos que se muestran en el detalle de cada artículo. Cada característica se puede crear, editar o eliminar, y está asociada a una o varias categorías.

✨ Funcionalidades principales

• 🆕 Crear nuevas características por categoría (ejemplo: Marca, Peso, Talle, Gramos, Kilos, Tamaño, Color, etc.).

• ✏️ Editar el nombre o la categoría asignada a una característica existente.

• 🗑️ Eliminar características que ya no estén en uso.

• 🔍 Visualizar características existentes con su ID, nombre y categoría asociada.

• 📦 Las características se muestran dinámicamente al crear productos según la categoría seleccionada.

Esta sección permite crear y listar subcategorías asociadas a las categorías existentes en el ecommerce. Las subcategorías se pueden crear, editar o eliminar, y están vinculadas a una categoría principal.

✨ Funcionalidades principales

• 🆕 Crear nuevas subcategorías: asigna un nombre y selecciona la categoría principal a la que pertenecerá.

• ✏️ Editar subcategorías existentes: modificar el nombre.

• 🗑️ Eliminar subcategorías que ya no sean necesarias.

• 🔍 Listado completo: ver todas las subcategorías registradas, con su ID, nombre y categoría asociada.

• 📄 Paginación: navegar fácilmente por grandes cantidades de subcategorías.

• 📦 Las subcategorías disponibles se muestran dinámicamente al crear productos para mantener la consistencia del catálogo.

Esta sección permite administrar las imágenes de los sliders principales que se muestra en la página de inicio del ecommerce. Cada slider puede contener hasta 8 imágenes, que se pueden subir, listar o eliminar según se requiera.

✨ Funcionalidades principales

• 🆕 Subir imágenes: agrega nuevas imágenes al slider, respetando la resolución recomendada (1283x352 px, aceptando entre 1080x290 px y 1283x400 px).

• 🗂️ Seleccionar slider: permite elegir entre distintos sliders configurables en el sistema.

• 🗑️ Eliminar imágenes: elimina una imagen específica del slider.

• 🔄 Vaciar slider: borra todas las imágenes de un slider para comenzar de nuevo.

• 📄 Listado de imágenes: visualiza todas las imágenes subidas, con detalles de nombre, tipo y resolución.

• ⚠️ Validación de límite: el sistema no permite subir más de 8 imágenes por slider.

Este proyecto está desarrollado utilizando un stack moderno y completo para ofrecer una experiencia de usuario robusta y eficiente, tanto en frontend como en backend.

⚡ Frontend

• Angular 17: Framework principal para el desarrollo de la interfaz de usuario.

• Angular Material: Librería de componentes UI para Angular.

• HTML5 & CSS3 / Sass: Estructura y estilos modernos, incluyendo preprocesador Sass.

• Bootstrap 5: Framework CSS para diseño responsivo y componentes predefinidos.

⚡ Backend

• Java 17: Lenguaje principal del backend.

• Spring Boot: Framework para aplicaciones Java, incluyendo REST APIs.

• Hibernate / JPA: Para manejo de persistencia y relaciones en la base de datos.

• Maven: Gestión de dependencias y compilación del proyecto.

⚡ Base de Datos y Cache

• PostgreSQL: Base de datos relacional.

• Redis Cache: Almacenamiento en caché para mejorar la performance.

⚡ Integraciones y APIs

• MercadoPago: Sistema de pagos integrado.

• Google Maps Geocoding API: Para geolocalización y rutas.

• Spring Security JWT: Autenticación y autorización mediante tokens JWT.

Este proyecto aplica una arquitectura modular y buenas prácticas de ingeniería de software para garantizar mantenibilidad, escalabilidad y rendimiento. Se priorizó el diseño orientado a objetos (POO), principios SOLID, Clean Code y patrones arquitectónicos probados para evitar cuellos de botella y facilitar el escalado.

• SOLID: separación de responsabilidades, inversión de dependencias y diseño orientado a interfaces para facilitar testing y evolución.
• Clean Code: nombres claros, funciones pequeñas, responsabilidades únicas y código fácilmente legible.
• DRY / KISS / YAGNI: evitar duplicación, mantener soluciones simples y no sobrecomplicar con features innecesarias.
• Inyección de dependencias: facilita el mocking en pruebas y desacopla componentes.
• Manejo de errores centralizado: excepciones controladas y respuestas consistentes para el frontend.
• Seguridad: uso de Spring Security + JWT para autenticación/autorization, validación y saneamiento de inputs.
• Pruebas: diseño pensando en testabilidad (unitarias y de integración).
• Observabilidad: logs estructurados y métricas para detectar cuellos de botella en producción.

• Paginación y carga lazy en APIs y frontend para evitar transferencias y renders pesados.
• Caching: uso de Redis para cachear consultas frecuentes y reducir carga en la DB.
• Batching y procesamiento asíncrono para tareas pesadas (envío de emails, procesamiento de imágenes, etc.).
• Pool de conexiones (DB) y configuración óptima de HikariCP.
• Índices y optimización de consultas en la base de datos (proyecciones DTO, consultas específicas y SELECT controlados).
• Limitación de concurrencia / optimistic locking cuando corresponde para evitar inconsistencias en stock.

📚 Patrón general:

• Layered Architecture con inspiración en Domain-Driven Design

Estructura de paquetes principal utilizada:

src/
└── main/
└── java/
└── com.api.ecommerce
├── config
├── controller
├── despertarrender
├── dtos
├── entity
├── enums
├── exception
├── jwt
├── mapper
├── repository
├── seeder
├── serviceImpl
├── specification
└── util

Patrones y responsabilidades:

• Controller: manejo de endpoints REST y validación inicial.
• DTOs / Mapper: separación entre entidades y modelos expuestos (reduce overfetching).
• Repository (JPA/Hibernate): capa de persistencia con consultas optimizadas.
• Service / ServiceImpl: lógica de negocio, transacciones y coordinación entre repositorios.
• Specification: consultas dinámicas y filtros reutilizables.
• Exception: manejo centralizado de errores.
• JWT / Security: autenticación y autorización.
• Seeder: datos iniciales para ambientes de desarrollo/testing.
• Util / Config: configuración central, beans y utilidades.

📚 Patrón general:

• Feature-Based Modular Architecture con Core y Shared Modules.

Estructura de módulos y carpetas:

src/
└── app/
├── core/ # Servicios singleton, interceptores, guards, modelos globales
│ ├── services/
│ ├── guards/
│ ├── interceptors/
│ ├── models/
│ └── core.module.ts
├── shared/ # Componentes, pipes, directivas reutilizables
│ ├── components/
│ ├── pipes/
│ ├── directives/
│ ├── services/
│ └── shared.module.ts
├── features/ # Módulos principales por dominio (lazy loaded)
│ ├── auth/
│ ├── admin/
│ ├── cliente/
│ ├── home/
├── app-routing.module.ts # Routes con lazy loading por módulo
└── app.component.ts

Buenas prácticas en frontend:

• Lazy loading por módulos para mejorar tiempo de carga.
• Servicios singleton en core para estado compartido (API clients, auth).
• Shared module para componentes/pipes/directivas reutilizables.
• Interceptors para manejo central de tokens, errores y tiempo de requests.
• OnPush change detection y trackBy en listas para optimizar rendering.
• RxJS: manejo correcto de suscripciones (unsubscribe, takeUntil) y uso de streams para UI reactiva.
• AOT, tree-shaking y optimización de bundles para producción.
• Accesibilidad y responsive con Angular Material y Bootstrap.
• Validaciones front y back: validación en formularios y revalidación en backend.

La combinación de esta arquitectura modular, los principios SOLID y las prácticas de rendimiento te permiten tener:

• Código más mantenible y testeable.
• Escalado horizontal y vertical más sencillo.
• Menor probabilidad de cuellos de botella y mejor experiencia de usuario.