Tienda Online Con Svelte Carrito De Compras En Tiempo Real
Este proyecto es una tienda online dinámica diseñada para enseñarte a construir un ecommerce completo desde cero. Utiliza el framework Svelte, para crear una experiencia de usuario fluida y profesional.
Tienda Online con Svelte: Carrito de Compras en Tiempo Real
Resultado final 🔥
Descripción
Esta es una tienda en línea de café, donde los usuarios pueden agregar productos a su carrito, ver el subtotal de su pedido y enviarlo a través de WhatsApp. La aplicación está desarrollada con Svelte y utiliza Bootstrap para el diseño.
Características
- Interfaz de usuario dinámica: Los productos se muestran en una interfaz de usuario moderna y amigable.
- Carrito de compras: Los usuarios pueden agregar productos al carrito, ver detalles de los productos y eliminarlos.
- Envío por WhatsApp: Los usuarios pueden enviar sus pedidos directamente a través de WhatsApp.
- Responsive: La aplicación se adapta a diferentes tamaños de pantalla para brindar una experiencia fluida en dispositivos móviles y de escritorio.
Tecnologías utilizadas
- Svelte: Framework utilizado para el desarrollo del frontend.
- Bootstrap: Framework CSS utilizado para el diseño y la responsividad.
- JavaScript: Lenguaje principal para la interacción de la aplicación.
- Svelte Store: Se usa para gestionar el estado global del carrito y el mensaje de WhatsApp.
Instalación
1. Clonar el repositorio
git clone https://github.com/urian121/tienda-online-con-svelte-carrito-de-compras-en-tiempo-real
2. Instalar dependencias
Asegúrate de tener Node.js y npm instalados, luego instala las dependencias del proyecto.
cd tienda-online-con-svelte-carrito-de-compras-en-tiempo-real
npm install
Dependencias
npm i [email protected]
npm i bootstrap-icons
3. Ejecutar la aplicación
Para ejecutar la aplicación en modo de desarrollo, usa el siguiente comando:
npm run dev
La aplicación estará disponible en http://localhost:5173.
Uso
- Los productos de la tienda se muestran en la interfaz principal.
- Los usuarios pueden agregar productos al carrito con un solo clic.
- El carrito puede ser visualizado desde el ícono en la esquina superior derecha.
- Los usuarios pueden ver el subtotal y eliminar productos del carrito.
- Una vez que los productos estén listos, pueden enviar el pedido directamente a través de WhatsApp.
🙌 Cómo puedes apoyar 📢:
✨ Comparte este proyecto con otros desarrolladores para que puedan beneficiarse 📢.
☕ Invítame un café o una cerveza 🍺:
⚡ ¡No olvides SUSCRIBIRTE a la Comunidad WebDeveloper!
⭐ Déjanos una estrella en GitHub:
- Dicen que trae buena suerte 🍀.
Gracias por tu apoyo 🤓.
