https://github.com/lautaroorellano/keylabtech.com

Repositorio de demostración 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.
https://github.com/lautaroorellano/keylabtech.com

cloudinary docker java javascript jwt-tokens oracle-database reactjs render springorm supabase vite

Last synced: 8 months ago
JSON representation

Repositorio de demostración 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.

• Host: GitHub
• URL: https://github.com/lautaroorellano/keylabtech.com
• Owner: LautaroOrellano
• License: apache-2.0
• Created: 2025-09-22T16:48:35.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-09-22T17:38:39.000Z (9 months ago)
• Last Synced: 2025-09-22T18:49:33.364Z (9 months ago)
• Topics: cloudinary, docker, java, javascript, jwt-tokens, oracle-database, reactjs, render, springorm, supabase, vite
• Homepage:
• Size: 22.5 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# KeylabTech.com.ar

Repositorio de demostración 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.

## Tecnologías

- **Backend:** Java, Spring Boot, Spring Security, JPA Hibernate, MySQL

- **Frontend:** React, Tailwind, Vite

- **Otros:** JWT, Docker, Render, Supabase, Cloudinary, Mercado Pago.

## 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:** Render / 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.