Este repositorio contiene un sistema de comercio electrónico completo, moderno y de nivel empresarial. Está construido bajo una arquitectura totalmente Serverless en el backend (AWS Lambda, API Gateway y DynamoDB) y un frontend web de alto rendimiento basado en Angular 19+ y Vite.
La solución implementa patrones de diseño avanzados, como Single-Table Design en la base de datos NoSQL y automatización de ciclo de vida del usuario con Amazon Cognito.
El sistema se divide en una topología cliente-servidor nativa de la nube:
graph TD
Client[Angular 19 Frontend - Vite] -->|HTTPS Requests + JWT| APIGateway[AWS API Gateway]
APIGateway -->|Cognito Authorizer Validation| AuthModule[Amazon Cognito User Pool]
APIGateway -->|Routing| Lambdas[AWS Lambda Functions]
subgraph "AWS Cloud Backend"
Lambdas -->|Single-Table Access| DynamoDB[(Amazon DynamoDB Table: 'ecommerce')]
end
classDef aws fill:#FF9900,stroke:#333,stroke-width:2px,color:#fff;
classDef client fill:#003366,stroke:#333,stroke-width:2px,color:#fff;
classDef infra fill:#339933,stroke:#333,stroke-width:2px,color:#fff;
class APIGateway,AuthModule,Lambdas,DynamoDB aws;
class Client client;
- Runtime: Python 3.12
- Framework de Infraestructura: AWS Serverless Application Model (SAM) & CloudFormation.
- Base de Datos NoSQL: Amazon DynamoDB (Diseño de Tabla Única).
- Autenticación e Identidad: Amazon Cognito User Pools (Tokens JWT IdToken & AccessToken).
- Documentación: OpenAPI 3.0 / Swagger UI embebido en el endpoint
/docs.
- Framework: Angular 19+ (Vite Builder nativo).
- Gestión de Estado: Angular Signals (
signal,computed,effect) e integración avanzada conrxResourcepara la carga reactiva asíncrona de recursos. - Diseño Estético: TailwindCSS con temas premium dark/light automáticos, transiciones suaves de vidrio (Glassmorphism), sombras fluidas y micro-animaciones en botones interactivos.
- Manejo Global de Errores: Integración del servicio de diálogo modal de alerta centralizado (
AlertDialogService) que intercepta fallos de registro, login y problemas de stock del carrito para erradicar pantallas de carga infinitas. - Variables de Entorno: Carga dinámica mediante variables
.envexpuestas bajo el prefijo nativo de ViteNG_APP_BASE_URL.
Toda la persistencia de datos (Usuarios, Categorías, Productos, Ofertas de Vendedores y Pedidos) reside en una única tabla de DynamoDB llamada ecommerce. Esto optimiza drásticamente el costo y el rendimiento mediante consultas altamente eficientes de una sola ronda (Single-Trip Queries).
| Entidad | Prefijo PK (Hash Key) | Prefijo SK (Range Key) | GSI1PK (Index Hash) | GSI1SK (Index Range) | Atributos Adicionales |
|---|---|---|---|---|---|
| Categoría | CATEGORY#{name} |
CATEGORY#{name} |
- | - | Name, Description, CreatedAt |
| Producto | PRODUCT#{id} |
PRODUCT#{id} |
- | - | Name, Brand, Description, Category, Image |
| Oferta (Vendedor) | PRODUCT#{id} |
OFFER#{sellerId} |
SELLER#{id} |
PRODUCT#{id} |
Price, Stock, CreatedAt |
| Perfil de Usuario | USER#{email} |
PROFILE#{email} |
- | - | Name, Email, Address, UserSub, Image |
| Pedido / Carrito | ORDER#{id} |
ORDER#{id} |
USER#{email} |
ORDER#{id} |
Status (PENDING/DELIVERED), Total, Items (Map List), Address, Date |
- Detalle de Producto + Todas sus Ofertas: Se realiza un simple query
PK = PRODUCT#{id}. DynamoDB retorna en una única operación de bajada tanto el ítem del catálogo maestro del producto (SK = PRODUCT#{id}) como todas las ofertas de los diferentes vendedores competidores que lo tienen en stock. - Historial de Pedidos: Se realiza un query al índice secundario global GSI1 con
GSI1PK = USER#{email}yGSI1SKcomenzando porORDER#. Esto obtiene al instante todos los pedidos realizados por un cliente específico.
El sistema gestiona de manera elegante la baja de cuentas:
- Al invocar la eliminación permanente del perfil, el backend no solo borra el registro de la tabla
ecommercey elimina los archivos multimedia de S3, sino que también utiliza el SDK de AWS (boto3) y permisos IAM dedicados (cognito-idp:AdminDeleteUser) para eliminar de forma definitiva al usuario en Amazon Cognito. Esto garantiza que no queden registros huérfanos y se cumpla estrictamente con normativas de privacidad de datos (como RGPD).
El frontend utiliza un servicio centralizado de alertas (AlertDialogService). En lugar de depender de flujos de carga asíncronos que se quedan congelados en "Loading..." indefinidamente ante un error de red o de lógica del negocio (como falta de stock al añadir al carrito, credenciales erróneas en login o duplicidad en registro), el sistema captura las excepciones asíncronas de rxResource, restaura los payloads de los triggers a null para detener los spinners de carga y muestra modales descriptivos de alta fidelidad estética al usuario.
├── backend/
│ ├── src/
│ │ ├── auth/ # Rutas de login y registro en Cognito
│ │ ├── categories/ # Gestión de categorías de la tienda
│ │ ├── docs/ # Configuración de Swagger UI interactivo
│ │ ├── images/ # Handlers para carga de imágenes en Amazon S3
│ │ ├── offers/ # Gestión de ofertas (precios y inventario de vendedores)
│ │ ├── orders/ # Carrito de compras, remoción de ítems y checkout
│ │ ├── products/ # Catálogo de productos maestros
│ │ └── profiles/ # Perfiles de usuario
│ ├── tests/
│ │ ├── integration/ # Scripts de poblamiento (.py) y peticiones HTTP (.http)
│ │ └── unit/ # Tests unitarios
│ ├── template.yaml # Infraestructura como Código (AWS SAM Template)
│ └── samconfig.toml # Configuración de despliegue de AWS SAM
├── docs/ # Documentos markdown complementarios
├── frontend/
│ ├── src/
│ │ ├── app/
│ │ │ ├── auth/ # Módulo de registro e inicio de sesión
│ │ │ ├── core/ # Servicios globales (alertas, interceptores, constantes)
│ │ │ ├── features/ # Vistas principales (catálogo, admin, formularios)
│ │ │ ├── shared/ # Componentes compartidos (navbar)
│ │ │ └── user/ # Perfil del usuario e historial de compras (Mis Pedidos)
│ │ ├── styles.css # Estilos CSS globales y reglas dinámicas de hover/clickables
│ │ └── main.ts # Punto de entrada de la aplicación Angular
│ └── .env # Archivo de variables de entorno para API endpoints
├── req3.md # Listado de requerimientos técnicos implementados
└── README.md # Este archivo de documentación exhaustiva
- Asegúrate de tener instalado el AWS SAM CLI y configuradas tus credenciales de AWS (
aws configure). - Entra a la carpeta de backend:
cd backend - Compila los recursos utilizando Docker para asegurar paridad de entornos:
sam build
- Despliega la infraestructura en tu cuenta de AWS (la primera vez utiliza
--guided):sam deploy
- Si deseas iniciar un servidor API de desarrollo local emulando API Gateway:
sam local start-api
Hemos provisto un script de Python interactivo y robusto que poblará tu base de datos de AWS DynamoDB con productos, categorías de prueba, ofertas con stock variable y pedidos históricos completos para que puedas validar todas las características al instante.
- Activa tu entorno virtual de Python en la carpeta
backend:source env/bin/activate - Ejecuta el script de seeding:
python tests/integration/seed_data.py
- Ve al directorio del frontend:
cd ../frontend - Instala las dependencias del proyecto:
npm install
- Configura la URL base de tu API en el archivo
.env:NG_APP_BASE_URL=https://<api-id>.execute-api.us-east-2.amazonaws.com/Prod/api/v1
- Inicia el servidor de desarrollo local de Vite con Angular:
npm run dev
- Abre en tu navegador
http://localhost:4200y disfruta de la experiencia premium.
En el directorio backend/tests/integration/ encontrarás archivos .http listos para ser ejecutados con extensiones como REST Client en VSCode. Estos archivos cubren flujos completos de:
- Autenticación (
auth.http) - Catálogo de productos y categorías (
products.http) - Ofertas y stocks (
offers.http) - Carrito de compras y checkout final (
orders.http) - Gestión de perfiles y borrado físico (
profiles.http)
Esto permite verificar el correcto funcionamiento del API Gateway en la nube de forma aislada y ágil.