Skip to content

Ans1110/Twist

Repository files navigation

Twist - Cocktail Discovery App

Twist is a modern web application for discovering and exploring cocktail recipes. Built with React, TypeScript, and TanStack Query, it offers a sleek interface for browsing cocktails and learning how to make them.

✨ Features

  • Daily Picks: Discover 8 random cocktails refreshed every 24 hours
  • Detailed Recipes: View comprehensive information about each cocktail, including ingredients and preparation instructions
  • Search Functionality: Find cocktails by name
  • Responsive Design: Optimized for both desktop and mobile devices (2 cocktails displayed on mobile)
  • Beautiful UI: Modern, clean interface with smooth animations and backdrop blur effects

🛠️ Technology Stack

  • Frontend: React 19 with TypeScript
  • Routing: React Router v7
  • Data Fetching: TanStack Query
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • API: TheCocktailDB API
  • Deployment: Vercel

📱 Application Structure

  • Home Page: Features the daily cocktail picks
  • Search Page: Allows users to search for cocktails by name
  • Details View: Shows detailed information about a specific cocktail
  • About Page: Information about the application

🔄 API Integration

Twist integrates with TheCocktailDB API to fetch cocktail data, including:

  • Random cocktails for daily picks
  • Cocktail details by ID
  • Search functionality by cocktail name

👨‍💻 Author

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.