🎮 TECHSTORE – E-Commerce Neon Cyberpunk

---

Arquitectura por capas usadas para el proyecto

techstore-neon/ ├── index.html # Página principal ├── app.js # Controlador general │ ├── presentation/ # Capa de presentación │ └── styles.css # Estilos neon │ ├── business/ # Lógica de negocio │ ├── ProductManager.js # Gestión de productos │ ├── CartManager.js # Carrito con Map() │ ├── OrderManager.js # Gestión de pedidos │ └── LoyaltyManager.js # Sistema de puntos │ ├── data/ # Datos y API │ ├── ProductRepository.js # Conexión con API │ └── StorageService.js # LocalStorage │ ├── models/ # Modelos del sistema │ ├── Product.js │ ├── DigitalProduct.js │ ├── PhysicalProduct.js │ ├── CartItem.js │ └── Order.js │ └── utils/ # Utilidades ├── recursiveUtils.js # Funciones recursivas ├── helpers.js # Auxiliares └── validators.js # Validaciones

---

⭐ Funcionalidades Principales

✔ Programación Orientada a Objetos

• Polimorfismo entre productos digitales y físicos
• Clases organizadas en modelos
• Métodos sobrescritos según tipo de producto
• Carrito implementado con Map() para búsqueda O(1)

✔ Funciones Avanzadas

• Función recursiva para descuentos progresivos
• Función creciente para sistema de puntos de usuario
• Métodos dinámicos para calcular envío, total y stock

✔ Interactividad en Tiempo Real

Incluye el uso de todos los eventos del DOM:

• keyup → búsqueda instantánea
• scroll → detección visual
• focus/blur → validación de inputs
• load → inicialización
• setInterval y setTimeout → countdown y notificaciones

---

🎨 Diseño Neon Cyberpunk

Paleta de Colores

• Verde Neón — #00ff88
• Rosa Neón — #ff0080
• Cyan — #00d4ff
• Azul oscuro — #0a0e27

Efectos y Estilo

• Glow neon en textos y botones
• Grid animado de fondo
• Transiciones y animaciones suaves
• Toast notifications personalizadas
• Spinner de carga estilo cyberpunk
• Diseño responsive para móviles y desktop

---

📦 Funcionalidades para el Usuario

• Catálogo de productos con imágenes
• Búsqueda en tiempo real
• Filtros por categoría y rango de precio
• Ordenamiento por precio y calificación
• Carrito de compras persistente (LocalStorage)
• Descuentos dinámicos
• Sistema de puntos por nivel
• Ofertas con cuenta regresiva
• Vistas separadas para categorías y ofertas

---

🛠️ Tecnologías Utilizadas

• HTML5 – estructura principal
• CSS3 – diseño responsive y efectos neon
• JavaScript ES6+ – clases, módulos, async/await, Map
• Fake Store API – productos reales
• LocalStorage – persistencia del carrito

---

🚀 Cómo Ejecutar el Proyecto

1. Descargar o clonar este repositorio
2. Abrir el archivo index.html en cualquier navegador moderno
3. No requiere servidor adicional
4. Los productos se cargan automáticamente desde la API al iniciar

---

📁 Cantidad de Archivos

Total: 18 archivos (HTML, CSS y JS) Incluye modelos, datos, negocio, utilidades y presentación.

👨‍💻 Autor

Steven Junior Huillca Cusi
Proyecto Académico — Consolidado 2