DEMO KeylabTech.com.ar

Repositorio version DEMO que muestra la arquitectura y estructura del backend y frontend del e-commerce KeyLab, incluyendo tecnologías utilizadas y flujo general de la aplicación. Es un proyecto de e-commerce fullstack que demuestra buenas prácticas de arquitectura y estructura de código profesional, mostrando cómo se organiza un backend con Spring Boot y un frontend moderno en React.

Decisiones de Arquitectura:

• Spring Boot & Java: Elegido por su robustez en el manejo de concurrencia y tipado estático, crítico para el manejo financiero del e-commerce.
• Arquitectura MVC: Patrón de diseño que divide la aplicación en Modelo, Vista y Controlador para separar la lógica de presentación de la lógica de negocio. Esto permite organizar mejor el código, mantener interfaces limpias y facilitar la evolución del frontend sin afectar el funcionamiento interno del sistema.
• Docker: Utilizado para garantizar la paridad entre el entorno de desarrollo y producción (Vercel/Oracle).

Arquitectura del proyecto

         ┌─────────────┐
         │ Frontend    │
         │ React / Vite│
         └─────┬───────┘
               │
               ▼
         ┌─────────────┐
         │ Backend     │
         │ Spring Boot │
         └─────┬───────┘
               │
      ┌────────┴────────┐
      │                 │
      ▼                 ▼
┌─────────────┐   ┌─────────────┐
│ MySQL DB    │   │ Servicios   │
│             │   │ Externos    │
│             │   │ -Cloudinary │
│             │   │ -MercadoPago│
│             │   │ -Supabase   │
└─────────────┘   └─────────────┘

Estructura del proyecto

Backend

Frontend

---

Flujo de la aplicación / Ejemplo de uso

KeyLabTech es un e-commerce fullstack con arquitectura moderna, donde el frontend en React interactúa con el backend en Java / Spring Boot a través de endpoints REST bien definidos para usuarios, clientes y administradores.

Flujo general:

1. El usuario interactúa con la aplicación en React (navegación de productos, carrito, checkout).
2. El frontend realiza peticiones a los controllers del backend, los cuales procesan la lógica de negocio y gestionan la persistencia en la base de datos.
3. El backend valida usuarios con JWT y maneja la seguridad de cada endpoint según el rol (usuario, cliente, admin).
4. El backend y frontend están desplegados en la nube:
   • Frontend: Vercel
   • Backend: Oracle / Supabase
5. Se consumen APIs externas para funcionalidades clave:
   • Pagos: Mercado Pago, PayPal
   • Almacenamiento de archivos e imágenes: Cloudinary
6. La aplicación incluye buenas prácticas profesionales:
   • Estructura modular y escalable
   • Manejo de logs para backend y frontend
   • Testeo unitario y de integración en ambas capas
   • Gestión de errores y validaciones consistentes
7. La arquitectura permite escalabilidad futura y facilita integración con nuevos servicios y microservicios.

⚠️ Todas las interacciones mostradas en el proyecto utilizan datos ficticios para proteger información sensible.

Por qué estas tecnologías

• Spring Boot: rápido desarrollo y robustez para APIs.
• React + Vite: SPA moderna y eficiente.
• JWT: seguridad en autenticación.
• Docker: despliegue reproducible.

Capturas de la app en funcionamiento

Home

Carrito

Panel Admin

Las capturas muestran la interfaz de KeyLab con datos ficticios para proteger información sensible.

Licencia y variables de entorno

• El código completo se mantiene privado por motivos de seguridad ⚠️.
• Se incluye .env.example para mostrar qué variables de entorno se necesitan.
• Este proyecto está protegido y no se permite uso comercial sin autorización.