CaféExpress - Tienda Online de Café ☕

CaféExpress es una tienda en línea desarrollada con Svelte y Bootstrap para la interfaz de usuario, mientras que el backend utiliza PHP y MySQL para la gestión de productos y pedidos.

Resultado final 🔥

Descripción

La plataforma permite a los usuarios:

• ✅ Explorar una variedad de cafés disponibles en la tienda.
• ✅ Agregar productos al carrito de compras.
• ✅ Gestionar su carrito (aumentar, disminuir o eliminar productos).
• ✅ Finalizar la compra de manera sencilla.

Este proyecto está diseñado para ofrecer una experiencia de compra rápida, eficiente y visualmente atractiva para los amantes del café. ☕✨

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-php-y-mysql.git

2. Instalar dependencias

Asegúrate de tener Node.js y npm instalados, luego instala las dependencias del proyecto.

cd tienda-online-con-svelte-php-y-mysql
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

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 ([email protected]).

⚡ ¡No olvides SUSCRIBIRTE a la Comunidad WebDeveloper!

⭐ Déjanos una estrella en GitHub:

• Dicen que trae buena suerte 🍀.

Gracias por tu apoyo 🤓.