Carrito Interactivo de Compras

Un carrito de compras moderno y responsivo construido con Next.js y Bootstrap 5, con diseño inspirado en Shadcn/ui. Permite gestionar productos de forma interactiva con funciones de incremento/decremento de cantidad, eliminación de items, cálculo automático de totales y una interfaz limpia con tipografía Inter. La aplicación está estructurada con componentes modulares reutilizables siguiendo las mejores prácticas de React y arquitectura escalable.

🚀 Características

• ✅ Interfaz limpia y moderna con tipografía Inter
• ✅ Gestión de productos con incremento/decremento de cantidad
• ✅ Eliminación de productos del carrito
• ✅ Cálculo automático de totales
• ✅ Diseño completamente responsivo
• ✅ Arquitectura modular con componentes reutilizables

📁 Estructura del Proyecto

src/
├── app/
│   ├── layout.js          # Layout principal con Bootstrap 5
│   └── page.js             # Página principal del carrito
├── components/
│   ├── CartHeader.js       # Encabezado del carrito
│   ├── ProductTable.js     # Tabla de productos
│   ├── ProductRow.js       # Fila individual de producto
│   └── CartSummary.js      # Resumen y botón de pago
└── data/
    └── productos.json      # Datos de productos de ejemplo

🛠️ Instalación y Uso

# Instalar dependencias
npm install

# Ejecutar en modo desarrollo
npm run dev

# Abrir en el navegador
http://localhost:3000

🎨 Tecnologías

• Next.js 14 - Framework React
• Bootstrap 5 - Framework CSS
• Bootstrap Icons - Iconografía
• Google Fonts (Inter) - Tipografía

📱 Funcionalidades

• Agregar/Quitar cantidad: Botones + y - para cada producto
• Eliminar producto: Icono de papelera para remover items
• Totales dinámicos: Actualización automática de precios y cantidades
• Diseño responsivo: Adaptable a móviles y desktop

🙌 Cómo puedes apoyar 📢:

✨ Comparte este proyecto con otros desarrolladores para que puedan beneficiarse 📢. ☕ Invítame un café o una cerveza 🍺:

• Paypal (iamdeveloper86@gmail.com).

⚡ ¡No olvides SUSCRIBIRTE a la Comunidad WebDeveloper!

⭐ Déjanos una estrella en GitHub:

• Dicen que trae buena suerte 🍀. Gracias por tu apoyo 🤓.