Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/habidbesp/cocktail-haven
Cocktail Haven uses The Cocktail DB API to allow users to search for various cocktails and view detailed recipes. The API provides a comprehensive list of cocktails, including ingredients, instructions, and images for each drink.
https://github.com/habidbesp/cocktail-haven
axios headlessui react react-router-dom tailwindcss typescript vite zod zustand
Last synced: 28 days ago
JSON representation
Cocktail Haven uses The Cocktail DB API to allow users to search for various cocktails and view detailed recipes. The API provides a comprehensive list of cocktails, including ingredients, instructions, and images for each drink.
- Host: GitHub
- URL: https://github.com/habidbesp/cocktail-haven
- Owner: habidbesp
- Created: 2024-10-15T12:05:49.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T12:41:45.000Z (3 months ago)
- Last Synced: 2024-10-21T19:21:48.745Z (3 months ago)
- Topics: axios, headlessui, react, react-router-dom, tailwindcss, typescript, vite, zod, zustand
- Language: TypeScript
- Homepage: https://cocktail-haven-wine.vercel.app/
- Size: 273 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cocktail Haven
Cocktail Haven uses [**The Cocktail DB**](https://www.thecocktaildb.com/) API to allow users to search for various cocktails and view detailed recipes. The API provides a comprehensive list of cocktails, including ingredients, instructions, and images for each drink.
## Live Demo
You can check out the live version of the **Cocktail Haven** deployed on Vercel by clicking the link below:
[Cocktel Haven - Live Demo]()
### Key Features:
- **Search Cocktails**: Users can search for cocktails by name or ingredient.
- **Filter by Category and Ingredient**: Cocktails can be filtered based on categories such as alcoholic or non-alcoholic drinks, as well as by specific ingredients.
- **View Recipe Details**: Each cocktail includes a detailed recipe with instructions, measurements, and ingredient images.
- **Save Favorites:** After filtering and finding the perfect drink recipes, users can save them to their favorites for quick access later.
The app interacts with **The Cocktail DB** API through GET requests, returning results based on the user's search criteria and dynamically displaying them.
## Technologies Used
The project was developed using:
- **React**: A JavaScript library for building user interfaces.
- **Vite**: A fast build tool for modern web applications.
- **TypeScript**: A typed superset of JavaScript that compiles to plain JavaScript.
- **Zustand**: A lightweight state management library for React that simplifies global state management using hooks.
- **Zod**: A TypeScript-first schema validation library that allows developers to define and validate complex data structures easily, ensuring type safety and reducing runtime errors in applications.
- **React Router DOM**: A flexible routing library for React applications that enables seamless navigation and dynamic rendering of components based on the URL, making it easy to manage multi-page applications.
- **Axios**: A promise-based HTTP client for JavaScript that simplifies making asynchronous requests to APIs, providing a user-friendly API for handling requests, responses, and error management.
- **Tailwind CSS**: A utility-first CSS framework for styling.
- **Headless UI**: A powerful library that enables developers to build fully customizable and accessible user interfaces without predefined styles.
## How to Run the Project
1. Clone the repository:
```bash
git clone https://github.com/habidbesp/cocktail-haven.git
```
2. Navigate to the project directory:
```bash
cd cocktail-haven
```
3. Install dependencies:
```bash
npm install
```
4. Run the project in development mode:
```bash
npm run dev
```
5. Open in your browser: http://localhost:5173
## Course Information
This application was developed as part of the Udemy course:
**"React: Hooks y State hasta TypeScript, Zod, Zustand, React Query, Next.js, React Router, MERN y PERN"**
Taught by: _Juan Pablo De la Torre Valdez_
[More about the course](https://codigoconjuan.com/)
## Contributions
Contributions are welcome! If you have suggestions, ideas, or improvements, feel free to open an issue or submit a pull request.
## License
This project is licensed under the MIT License.