Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 months 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 (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T00:28:53.000Z (3 months ago)
- Last Synced: 2024-10-24T14:36:48.114Z (3 months 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:
- Size: 221 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍹 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](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
```
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