Mixologist is a web application that allows users to search for cocktail recipes. It provides a user-friendly interface where users can enter the name of a cocktail to find its recipe. The app also includes features like a random cocktail generator and the ability to save favorite recipes.
🔗 Live Demo: Mixologist Web App
📌 GitHub Repo: Mixologist GitHub
- 🚀 Features
- 🛠 Technology & Architecture
- 🚀 API Used
- 🔧 Installation & Setup
- 🌟 Future Enhancements
- 📷 Screenshots
- Search by cocktail name: Users can enter the name of a specific cocktail, and the app will display recipes that match the search. The search is flexible and supports partial matches.
- Recipe details: Each recipe includes a list of ingredients, instructions, images, and serving suggestions.
- Random cocktail generator: Users can discover new cocktails by generating a random recipe.
- Favorite recipes: Users can save their favorite recipes for quick access later.
-
Single Page Application (SPA): The app is built as a SPA with seamless navigation and fast performance.
-
Routing & State Management: Implements custom routing and state management without relying on third-party libraries.
-
Folder Structure: The app follows a modular folder structure where pages and shared components are separated. For each component or page, the logic is kept distinct from the view (HTML/CSS), ensuring maintainability and scalability.
-
HTML, CSS (TailwindCSS), JavaScript: Used to build a responsive and interactive user interface.
-
Vite: Utilized for fast builds and efficient development.
-
Netlify: Deployment and hosting platform.
-
NPM: Package manager for handling dependencies.
The app utilizes the CocktailDB API to fetch cocktail recipes. This API provides an extensive collection of cocktail recipes, ingredients, and related details. The API supports CORS and offers a free access key.
To run the project locally, follow these steps:
# Clone the repository
git clone https://github.com/Muatasim-Aswad/mixologist.git
cd mixologist
# Install dependencies
npm install
# Start the development server
npm run dev- Advanced search options: Add filters such as category and glass type.
- Cocktail lists: Display categorized lists based on preference, ingredients, or type.
- Social sharing: Enable users to share favorite recipes on social media.
- Search autocomplete: Suggest cocktail names as users type for better user experience.
📌 Contributions are welcome! Feel free to open an issue or submit a pull request.