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 bootstrap@5.3.3
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

1. Los productos de la tienda se muestran en la interfaz principal.
2. Los usuarios pueden agregar productos al carrito con un solo clic.
3. El carrito puede ser visualizado desde el ícono en la esquina superior derecha.
4. Los usuarios pueden ver el subtotal y eliminar productos del carrito.
5. 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 🍺:

• 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 🤓.