Cocktail Recipe Collection with Favorites & Search

Description:

This comprehensive cocktail recipe application provides an elegant solution for discovering and organizing drink recipes. Built entirely with vanilla JavaScript, it demonstrates advanced data management, real-time search filtering, and persistent user preferences.

Unlike basic recipe sites, this implementation features detailed ingredient measurements, glassware recommendations, and garnish suggestions for each cocktail, creating a professional bartending experience.

The app showcases efficient DOM manipulation, localStorage integration, and responsive grid layouts - essential skills for building data-driven web applications without frameworks.

The Challenge:

Most recipe apps are either too simplistic or require complex backends. I wanted to create a fully-featured cocktail guide that works entirely client-side while providing persistent favorites and robust search capabilities.

Development Story:

This project started as a passion for mixology combined with a technical challenge to build a complete application without external libraries. The most complex aspect was implementing the real-time search and filter system that works seamlessly with the favorites persistence.

Key Challenge: Creating an intuitive user experience that handles multiple filtering criteria while maintaining smooth performance with large recipe datasets.

Technologies Used:

• HTML5 - Semantic structure with data attributes for filtering
• CSS3/SCSS - Responsive grid system and card-based layouts
• JavaScript ES6+ - Async data fetching, DOM manipulation, and event handling
• Local Storage API - Persistent favorite cocktail storage
• Fetch API - Dynamic loading of recipe data from JSON files

Technical Architecture:

• Modular Data Flow - Separate data layer with presentation components
• Event-Driven UI - Real-time filtering and search without page reloads
• Progressive Enhancement - Core functionality works with JavaScript disabled
• Responsive Grid - Adaptive card layout for all screen sizes

Technical Implementation:

• Favorite System: localStorage persistence with instant UI updates
• Search Algorithm: Real-time name matching with case-insensitive filtering
• Alcohol Filtering: Data attribute-based category filtering
• Dynamic Rendering: Template-based card generation from JSON data

Core Functionality:

• Browse complete cocktail recipes with detailed information
• Mark/unmark favorites with persistent localStorage saving
• Real-time search by cocktail name with instant results
• Filter by alcohol type (gin, vodka, rum, whiskey, etc.)

User Experience:

• Mobile-first responsive design
• Intuitive favorite system with visual feedback
• Clean, readable recipe cards with clear typography
• Instant search and filtering without page refreshes

Technical Features:

• JSON-based recipe data structure for easy maintenance
• Efficient DOM manipulation with template literals
• Comprehensive error handling for data loading
• Accessible keyboard navigation and screen reader support

How to Use:

• Browse all cocktails in the responsive grid layout
• Use the search bar to find specific cocktails by name
• Filter by alcohol type using the dropdown selector
• Click the heart icon to save favorites (persists between sessions)

Code Highlight:

document.addEventListener('click', (e) => {
   const favoriteButton = e.target.closest('.favorite_button');
   if (favoriteButton) {
      const cocktailCard = favoriteButton.closest('.cocktail_card');
      const cocktailId = cocktailCard.getAttribute('data-id');

      const isFavorite = favoriteButton.classList.toggle('active');
      cocktailCard.setAttribute('data-favorite', isFavorite.toString());

      if (isFavorite) {
         favorites[cocktailId ] = true;
      } else {
         delete favorites[cocktailId ];
      }

      localStorage.setItem('favoriteCocktails', JSON.stringify(favorites));
   }
});

Key Learnings:

• Mastered client-side data persistence strategies with localStorage
• Improved understanding of efficient DOM updates and event delegation
• Learned to structure complex JSON data for dynamic applications
• Gained experience building complete applications without frameworks

Future Enhancements:

• Advanced filtering by ingredients and difficulty level
• Shopping list generation based on selected recipes
• Cocktail randomization and discovery features
• User-submitted recipe system with moderation

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• Browse cocktail recipes in card layout
• Mark/unmark favorites with heart icons
• Persistent favorite storage using localStorage
• Search by cocktail name
• Filter by alcohol type (gin, vodka, rum, etc.)
• Responsive design works on all devices
• Detailed recipe information including ingredients, instructions, glassware, and garnish

Tags:

• #javascript
• #web-development
• #data-management
• #localstorage
• #search-filter
• #responsive-design
• #recipes