A modern React application for searching cocktail and drink recipes, completely refactored with cutting-edge technologies and best practices.

• 🔍 Smart Search: Search cocktails by name, ingredient, or category
• 🏷️ Category Filtering: Browse drinks by type (Cocktail, Shot, etc.)
• 📱 Responsive Design: Optimized for desktop, tablet, and mobile
• 🎨 Modern UI: Beautiful Material-UI components with smooth animations
• 📊 Featured Drinks: Daily specials and popular cocktail recommendations
• 🔄 Real-time Updates: Instant search results with loading states
• 🎯 TypeScript: Full type safety throughout the application
• 🚀 Performance: Optimized with React Query caching and lazy loading

• React 18.3 - Modern React with concurrent features
• TypeScript 5.0 - Static type checking
• Material-UI v6 - Component library with theming
• Emotion - CSS-in-JS styling solution

• React Query (TanStack) - Server state management and caching
• Zustand - Lightweight client state management
• Custom Hooks - Encapsulated business logic

• Vite 6.3 - Ultra-fast build tool and dev server
• ESLint 9 - Code linting with modern configuration
• Vitest - Testing framework
• pnpm - Fast package manager

• Strict TypeScript - No implicit any, strict null checks
• Component Architecture - Reusable and composable components
• Error Boundaries - Graceful error handling
• Accessibility - WCAG compliant components

• Node.js 22.x LTS (managed with Volta)
• pnpm 10.x (managed with Volta)

# Clone the repository
git clone <repository-url>
cd bebidas-react-app

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Open http://localhost:3000 in your browser

# Development
pnpm dev          # Start development server with HMR
pnpm build        # Build for production
pnpm preview      # Preview production build locally

# Code Quality
pnpm lint         # Run ESLint
pnpm type-check   # Run TypeScript compiler check
pnpm test         # Run unit tests with Vitest

# Package Management
pnpm install      # Install dependencies
pnpm update       # Update dependencies

src/
├── components/              # React components
│   ├── DrinkCard.tsx       # Individual drink card with modal
│   ├── DrinksList.tsx      # Search results grid
│   ├── FeaturedDrinks.tsx  # Daily specials and popular drinks
│   ├── Header.tsx          # Application header
│   └── SearchForm.tsx      # Search and filter form
├── hooks/                  # Custom React hooks
│   ├── useQueries.ts       # Main data fetching hooks
│   └── useExtraQueries.ts  # Featured content hooks
├── services/               # API layer
│   └── cocktailApi.ts      # TheCocktailDB API client
├── stores/                 # State management
│   └── modalStore.ts       # Modal state with Zustand
├── types/                  # TypeScript definitions
│   └── index.ts            # Global type definitions
├── __tests__/              # Test files
│   └── App.test.tsx        # Main app tests
├── App.tsx                 # Root application component
└── main.tsx                # Application entry point

• Separation of Concerns: UI, business logic, and data fetching are separated
• Custom Hooks: Encapsulate data fetching and state management logic
• Compound Components: Complex components broken into smaller, focused pieces
• Render Props & Children: Flexible component composition patterns

• Server State: React Query for API data, caching, and synchronization
• Client State: Zustand for UI state (modals, forms)
• Local State: React useState for component-specific state
• Derived State: Computed values from existing state

API (TheCocktailDB) → React Query → Custom Hooks → Components
                                 ↓
                              Zustand Store (UI State)

The application consumes TheCocktailDB public API:

• Categories: /api/json/v1/1/list.php?c=list
• Search by Name: /api/json/v1/1/search.php?s={name}
• Search by Ingredient: /api/json/v1/1/filter.php?i={ingredient}
• Filter by Category: /api/json/v1/1/filter.php?c={category}
• Drink Details: /api/json/v1/1/lookup.php?i={id}
• Random Drink: /api/json/v1/1/random.php

• Stale Time: 5 minutes for search results
• Garbage Collection: 10 minutes for unused queries
• Background Refetch: Disabled for better UX
• Retry Policy: 3 attempts with exponential backoff

• Material Design 3: Modern Google design language
• Custom Theme: Consistent colors, typography, and spacing
• Responsive Breakpoints: Mobile-first approach
• Dark Mode Ready: Theme structure supports dark mode

• Smooth Transitions: Fade-in animations for content loading
• Hover Effects: Interactive feedback on cards and buttons
• Loading States: Skeleton loaders and progress indicators
• Error States: User-friendly error messages and recovery

• Keyboard Navigation: Full keyboard support
• Screen Reader: Proper ARIA labels and semantic HTML
• Color Contrast: WCAG AA compliant color ratios
• Focus Management: Logical tab order and focus indicators

• Component Testing: React Testing Library
• Hook Testing: Custom hooks isolated testing
• Utility Functions: Pure function testing
• Mocking: API calls and external dependencies

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with coverage
pnpm test --coverage

• Code Splitting: Dynamic imports for route-based splitting
• Tree Shaking: Unused code elimination
• Bundle Analysis: Webpack bundle analyzer integration
• Asset Optimization: Image compression and lazy loading

• React Query Caching: Intelligent data caching and deduplication
• Memoization: React.memo and useMemo for expensive computations
• Lazy Loading: Components and images loaded on demand
• Debounced Search: Reduced API calls during user input

{
  "volta": {
    "node": "22.14.0",
    "pnpm": "10.5.2"
  }
}

This project is deployed as a static Vite SPA using Docker and Nginx.

docker build -t bebidas-react-app .
docker run --rm -p 8080:80 bebidas-react-app

Then open http://localhost:8080.

• Build type: Dockerfile
• Docker file path: empty (defaults to Dockerfile)
• Docker context path: empty (defaults to .)
• Docker build stage: empty (uses final stage)
• Internal container port for domain mapping: 80

• Strict Mode: Maximum type safety
• Path Mapping: Clean import paths
• Incremental Compilation: Faster development builds

• React Hooks: Proper hooks usage
• TypeScript: Type-specific linting
• Import/Export: Module organization
• Accessibility: a11y rule enforcement

• Progressive Web App: PWA ready configuration
• Touch Optimization: Touch-friendly interactions
• Viewport Handling: Proper mobile viewport setup
• Performance: Optimized for mobile networks

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes with proper TypeScript types
4. Add tests for new functionality
5. Run linting and tests (pnpm lint && pnpm test)
6. Commit with conventional commits (feat: add amazing feature)
7. Push to your branch (git push origin feature/amazing-feature)
8. Open a Pull Request

• TypeScript: All code must be properly typed
• ESLint: No linting errors allowed
• Testing: New features require tests
• Documentation: Update README for significant changes

• User Authentication: Save favorite cocktails
• Offline Support: PWA with offline capabilities
• Dark Mode: Complete dark theme implementation
• Advanced Filters: More filtering options (ABV, difficulty)
• Shopping List: Generate ingredient shopping lists
• Social Features: Share cocktails and reviews

• Storybook: Component documentation
• E2E Testing: Playwright integration
• Performance Monitoring: Bundle size tracking
• Internationalization: Multi-language support

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

• TheCocktailDB for the comprehensive cocktail API
• Material-UI for the excellent component library
• React Query for powerful data fetching
• Vite for the incredible build experience

🎉 Completely refactored in 2025 - From Create React App to Vite + TypeScript + Modern Architecture