🛒 Hogar y Mercado - G3_JavascriptBetaHub

Bienvenido a Hogar y Mercado, una aplicación web de comercio electrónico diseñada para ofrecer una experiencia de compra fluida y agradable de productos para el hogar. Este proyecto fue desarrollado como parte del bootcamp, demostrando habilidades en desarrollo frontend con tecnologías web estándar.

🚀 Características Principales

• Catálogo de Productos: Visualización dinámica de productos con imágenes, descripciones y precios.
• Búsqueda Inteligente: Barra de búsqueda integrada con filtros por nombre, descripción y categoría.
• Filtrado por Categorías: Checkboxes para filtrar productos rápidamente según su tipo.
• Carrito de Compras:
  • Agregar productos al carrito.
  • Ajustar cantidades (aumentar/disminuir) respetando el stock.
  • Eliminar productos individuales o vaciar todo el carrito.
  • Persistencia de datos mediante localStorage.
• Proceso de Compra (Checkout): Simulación de compra con confirmación y envío de órdenes a una MockAPI.
• Autenticación de Usuarios: Sistema de inicio de sesión (Login) para proteger el acceso al carrito y personalizar la experiencia.
• Diseño Responsivo: Interfaz adaptable a dispositivos móviles y de escritorio.
• Página de Contacto: Sección "Nuestro Equipo" que destaca a los desarrolladores del proyecto con enlaces a sus redes.

🛠️ Tecnologías Utilizadas

• HTML5: Estructura semántica del sitio.
• CSS3: Estilos personalizados, diseño responsivo con Flexbox y Grid, animaciones y gradientes.
• JavaScript (ES6+): Lógica del cliente, manipulación del DOM, manejo de eventos, Fetch API y LocalStorage.
• Librerías Externas:
  • Toastify JS: Para notificaciones no intrusivas.
  • SweetAlert2: Para modales y alertas interactivas y elegantes.
  • Google Fonts & Material Symbols: Para tipografía e iconos modernos.

📂 Estructura del Proyecto

G3_JavascriptBetaHub/
├── css/                # Archivos de estilos (styles.css, search.css, card.css, etc.)
├── data/               # Datos estáticos (products.js, user.js)
├── img/                # Imágenes del proyecto
├── js/                 # Lógica JavaScript (main.js, cart.js, login.js, navbar.js)
├── cart.html           # Página del carrito de compras
├── contacto.html       # Página de contacto y equipo
├── detalles.html       # Página de detalles del producto
├── index.html          # Página principal (Home)
├── login.html          # Página de inicio de sesión
└── README.md           # Documentación del proyecto

👥 Nuestro Equipo

• Juan Bautista López
  • GitHub
  • Instagram
• Luz Romero
  • GitHub
  • Instagram
• Emanuel López Franco
  • GitHub
  • LinkedIn
• Camila Golindano
  • GitHub
  • Instagram

📝 Notas del Desarrollador

• Implementear Backend para manejo real de usuarios y productos.
• Pagina de pedidos para usuarios registrados.
• Registro de usuario y pagina de usuario.
• Mostrar Botones del carrito solo si esta lleno.
• Mostrar Categorias del producto en detalles.
• En detalles iniciar contador en 1 y que muestre el precio con la cantidad seleccionada.
• Mejorar estilos y la UI/UX con animaciones y transiciones.

📚 Recursos Adicionales

• Rama diapositivas: En esta rama puedes encontrar las diapositivas utilizadas durante las clases.
• Rama ejercicios: En esta rama se encuentran algunos ejercicios realizados clase a clase.

---

Desarrollado por el Equipo 3 del Curso de Javascript Intermedio de Guayerd Ofertado por BetaHub