🍹 Buscador de Bebidas

Aplicación web desarrollada con React que permite buscar y explorar bebidas utilizando la API de TheCocktailDB. Construida con React Bootstrap 5 para una interfaz moderna y responsive.

📋 Descripción

Buscador de Bebidas es una aplicación React que consume la API pública de TheCocktailDB para permitir a los usuarios buscar, filtrar y explorar una amplia variedad de bebidas y cócteles. La aplicación utiliza Context API para el manejo de estado global y React Bootstrap 5 para una experiencia de usuario atractiva y responsive.

✨ Características

• 🔍 Búsqueda de bebidas por categoría
• 📱 Diseño responsive con React Bootstrap 5
• 🎨 Interfaz moderna y atractiva
• ⚡ Construido con Vite para un desarrollo rápido
• 🔄 Manejo de estado con Context API
• 📦 Consumo de API REST de TheCocktailDB

🛠️ Tecnologías Utilizadas

• React - Biblioteca de JavaScript para construir interfaces de usuario
• Vite - Herramienta de construcción rápida para desarrollo frontend
• React Bootstrap 5 - Framework de componentes UI basado en Bootstrap
• Context API - Manejo de estado global en React
• React Hooks - useState, useEffect para manejo de estado y efectos secundarios

🚀 Instalación

1. Clona el repositorio:

git clone https://github.com/BryanGallo/BuscadorBebidas.git

2. Navega al directorio del proyecto:

cd BuscadorBebidas

3. Instala las dependencias:

npm install

💻 Uso

Modo Desarrollo

Para ejecutar la aplicación en modo desarrollo:

npm run dev

La aplicación estará disponible en http://localhost:5173 (o el puerto que Vite asigne).

Modo Producción

Para construir la aplicación para producción:

npm run build

Para previsualizar la build de producción:

npm run preview

📡 API Utilizada

Este proyecto consume la API pública de TheCocktailDB:

• Endpoint de categorías: https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list
• Documentación: TheCocktailDB API Documentation

📁 Estructura del Proyecto

BuscadorBebidas/
├── public/          # Archivos estáticos
├── src/             # Código fuente
│   ├── components/  # Componentes React
│   ├── context/     # Context API para estado global
│   ├── hooks/       # Custom hooks
│   └── ...
├── package.json     # Dependencias del proyecto
├── vite.config.js   # Configuración de Vite
└── README.md        # Este archivo