Este proyecto es una aplicación de comercio electrónico (e-commerce) desarrollada con Angular, diseñada para demostrar las capacidades del framework en la creación de una plataforma completa de compra en línea. Aunque el proyecto no incluye un backend para procesar pagos reales, cubre todo el flujo necesario para realizar una compra, incluyendo carrito de compras, pasarela de pago simulada, filtros de productos, y más.
Funcionalidades Principales:
Catálogo de Productos: Una lista completa de productos disponibles para la venta, con imágenes, descripciones, precios y stock. Los usuarios pueden navegar por el catálogo y ver detalles de cada producto.
Filtros de Productos: Los usuarios pueden aplicar filtros para encontrar productos específicos según categorías, precios, marcas, y otras características.
Carrito de Compras: Permite a los usuarios añadir productos al carrito, actualizar cantidades, y eliminar artículos. El carrito muestra un resumen del total de la compra.
Pasarela de Pago Simulada: Una interfaz que guía al usuario a través del proceso de pago, incluyendo la entrada de detalles de pago y dirección de envío. Aunque no se procesan pagos reales, simula el flujo completo de una transacción.
Gestión de Usuarios: Registro e inicio de sesión de usuarios, así como la gestión de sus perfiles y direcciones de envío.
Historial de Pedidos: Los usuarios pueden ver un historial de sus pedidos anteriores, incluyendo detalles de los productos comprados y el estado de los envíos.
Tecnologías Utilizadas:
Angular: Framework principal utilizado para desarrollar la interfaz de usuario y manejar la lógica de la aplicación.
Angular Material: Biblioteca de componentes UI de Angular utilizada para diseñar una interfaz atractiva y responsiva.
RxJS: Biblioteca para programación reactiva utilizada para manejar flujos de datos asíncronos y eventos.
NgRx: Librería para la gestión del estado de la aplicación, asegurando una gestión eficiente y escalable del estado global.
Beneficios del Proyecto:
Demostración de Capacidades de Angular: El proyecto muestra cómo Angular puede ser utilizado para construir una aplicación e-commerce completa, destacando su capacidad para manejar componentes complejos, gestión del estado, y diseño responsivo.
Experiencia de Usuario Completa: Aunque no se realiza una transacción real, la simulación del flujo de compra proporciona una experiencia cercana a la de un e-commerce funcional.
Facilidad de Expansión: La arquitectura modular de Angular permite expandir fácilmente el proyecto, añadiendo funcionalidades adicionales o integrando un backend en el futuro.
Ejemplo de Flujo de Trabajo:
Navegación por el Catálogo de Productos:
Los usuarios pueden navegar a través de diferentes categorías y ver una lista de productos.
Pueden aplicar filtros para refinar su búsqueda, como categoría, precio, y marca.
Añadir Productos al Carrito:
Los usuarios seleccionan un producto y lo añaden al carrito.
Pueden revisar los productos en el carrito, actualizar las cantidades, y ver el total acumulado.
Proceso de Pago:
Al proceder al pago, los usuarios son guiados a través de una pasarela de pago simulada.
Introducen sus datos de pago y dirección de envío (simulados) y confirman la compra.
Historial de Pedidos:
Después de la compra simulada, los usuarios pueden ver sus pedidos anteriores en su perfil.
Cada pedido incluye detalles como los productos comprados, cantidades, precios, y estado del envío (simulado).
Componentes Clave del Proyecto:
ProductListComponent: Muestra la lista de productos y permite aplicar filtros.
ProductDetailComponent: Muestra los detalles de un producto seleccionado.
CartComponent: Muestra los productos añadidos al carrito y permite gestionar el contenido del carrito.
CheckoutComponent: Maneja el proceso de pago, permitiendo la entrada de detalles de pago y envío.
OrderHistoryComponent: Muestra el historial de pedidos del usuario.
UserProfileComponent: Permite a los usuarios gestionar su perfil y direcciones de envío.
Este proyecto de e-commerce con Angular proporciona una demostración completa y funcional de cómo construir una aplicación de compra en línea utilizando este poderoso framework, destacando su flexibilidad, escalabilidad y capacidad para crear experiencias de usuario ricas y dinámicas.