Cocktail Explorer

The Problem

“Discovering cocktail recipes can be difficult when information is scattered across different sources. Users need a simple way to search for drinks, explore cocktails by ingredients, and quickly return to recipes they enjoy.”

The Solution

Built a centralized cocktail discovery platform that integrates TheCocktailDB API with a responsive Next.js interface. Users can discover random cocktails, search by name, browse alphabetically, explore drinks through ingredients, and save favorites using local storage.

Overview

Liquid Index is a modern cocktail discovery application built with Next.js and TypeScript. It integrates with TheCocktailDB API to provide cocktail recipes, ingredients, images, and preparation instructions. Users can discover a Cocktail of the Moment, browse drinks alphabetically, search for specific cocktails, explore an ingredients directory, and save favorite drinks locally for quick access.

Key Features

• Cocktail of the Moment with random drink discovery
• Alphabetical cocktail browsing from A to Z
• Search cocktails by name
• Ingredient directory for discovering cocktails by ingredient
• Detailed cocktail recipes with ingredients and preparation instructions
• Save and manage favorite cocktails using local storage
• Responsive interface optimized for desktop and mobile devices
• REST API integration with TheCocktailDB
• Reusable UI components with Shadcn/UI and Radix UI primitives
• Modern icons using Lucide React

The Result

A polished, responsive cocktail discovery application that demonstrates modern Next.js development, API integration, reusable component architecture, client-side state management, responsive UI design, and persistent local favorites.