https://github.com/thomas465xd/drinks-react-typescript
A simple web application built with React, TypeScript, Zod, Zustand, and React Router DOM, utilizing a cocktail API. The app allows users to search for cocktails, view detailed recipes, save their favorites, and explore additional features.
https://github.com/thomas465xd/drinks-react-typescript
api autoprefixer headlessui headlessui-react js json jsx react react-router react-router-dom tailwind tailwindcss ts tsx zod zustand
Last synced: about 2 hours ago
JSON representation
A simple web application built with React, TypeScript, Zod, Zustand, and React Router DOM, utilizing a cocktail API. The app allows users to search for cocktails, view detailed recipes, save their favorites, and explore additional features.
- Host: GitHub
- URL: https://github.com/thomas465xd/drinks-react-typescript
- Owner: Thomas465xd
- License: mit
- Created: 2024-10-19T19:51:03.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-30T21:24:46.000Z (about 10 hours ago)
- Last Synced: 2025-07-01T05:03:15.979Z (about 2 hours ago)
- Topics: api, autoprefixer, headlessui, headlessui-react, js, json, jsx, react, react-router, react-router-dom, tailwind, tailwindcss, ts, tsx, zod, zustand
- Language: TypeScript
- Homepage: https://drinks-react-typescript.vercel.app/
- Size: 409 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍹 AI 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.
- **AI powered Cocktail Search**: Used openRouter AI API to allow users to ask an specialized AI for cocktail ideas.
- **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](https://www.thecocktaildb.com/)
## ⚙️ Installation
1. Clone the repository:
```bash
git clone https://github.com/Thomas465xd/drinks-react-typescript.git
```
2. Navigate to the project folder:
```bash
cd drinks-react-typescript
```
3. Install Dependencies:
```bash
npm install
```
4. Run the development server:
```bash
npm run dev
```
1. 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**