🍹 Cocktail Searcher - React Router & TypeScript

A sleek cocktail web app that lets you search for your favorite cocktail recipes and add them to a favorites list. This app is built using React, React Router DOM, TypeScript, ZOD, Zustand, and the Cocktail API for fetching recipes. The UI is styled with Tailwind CSS and Headless UI for a modern, accessible look.

🛠 Features

• Cocktail Search: Easily search for cocktails by name or ingredient.
• Recipe Details: View detailed recipes, including ingredients and preparation instructions.
• Favorites List: Save and manage your favorite cocktails for quick access.
• Smooth Navigation: Built with React Router for seamless page transitions.
• Type Safety: TypeScript integration ensures safer code and better development experience.

🧰 Tech Stack

• Frontend: React, TypeScript, React Router DOM
• State Management: Zustand
• Validation: ZOD
• Styles: Tailwind CSS, Headless UI
• API: Cocktail API

⚙️ Installation

1. Clone the repository: ```bash git clone https://github.com/Thomas465xd/drinks-react-typescript.git
2. Navigate to the project folder:

   cd drinks-react-typescript
   

3. Install Dependencies:

   npm install
   

4. Run the development server:

   npm run dev
   

5. Open your browser and navigate to http://localhost:3000

🚀 Usage

Use the search bar to find a cocktail by name or ingredient. Click on a cocktail to view detailed recipe instructions and ingredients. Add cocktails to your favorites for quick access.

📑 License

This project is licensed under the MIT License.

🎉 Acknowledgments

Cocktail API for providing a free, extensive cocktail database. Thanks to Tailwind CSS and Headless UI for making styling straightforward and responsive.

Happy Mixing! 🥂

Made with ❤️ Thomas Schrödinger