Skip to main content

​
Component Architecture

The Bİ DOLU İÇECEK application is built with a modular React architecture, featuring reusable components that handle product display, cart management, order processing, and user interactions.

​
Core Components

The application consists of several key component types:

Product Card

Interactive product cards that display products and trigger modals for detailed options

Product Modal

Full-screen modal for viewing and adding sub-products to cart with quantity controls

Order Button

Smart floating order button with service hours validation and WhatsApp integration

Cart Context

Global state management for shopping cart with React Context API

​
Component Hierarchy

App (CartProvider)
├── Header
│   ├── SocialMediaIcon
│   └── ScrollIndicator
├── ProductCard (multiple)
│   ├── ProductImage
│   └── ProductModal
│       └── SubProductCard
│           ├── ProductImage
│           └── Cart Controls
├── OrderButton
└── WelcomeMessage

​
State Management

The application uses React Context API for global state management:
  • CartContext: Manages shopping cart state, items, quantities, and cart operations
  • Local State: Components manage their own UI state (modals, loading states, etc.)
All cart-related functionality is centralized in CartContext, making it easy to access cart state from any component using the useCart() hook.

​
Key Features

​
Product Display

  • ProductCard: Clickable cards with hover effects and accessibility support
  • ProductImage: Lazy-loaded images with fallback placeholders and loading indicators
  • ProductModal: Full-screen modal with sub-product grid and cart integration

​
Cart Management

  • Add/Remove Items: Quantity controls with increment/decrement buttons
  • Real-time Updates: Cart state updates instantly across all components
  • Price Calculation: Automatic total calculation with Turkish Lira formatting

​
Business Logic Integration

  • Service Hours: Components respect configured service hours (8:30-20:30)
  • Damacana Limits: Special restrictions for damacana products (cutoff at 19:00)
  • Minimum Order: 400 TL minimum order validation
  • WhatsApp Integration: Direct order placement via WhatsApp

​
Styling Approach

​
CSS Architecture

The application uses a combination of:
  • Custom CSS Classes: Component-specific styles in App.css
  • Tailwind Utilities: Inline utility classes for layout and responsive design
  • CSS Transitions: Smooth animations for hover states and interactions

​
Responsive Design

All components are fully responsive: 
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

​
Accessibility

Components follow accessibility best practices:
  • Keyboard Navigation: All interactive elements support keyboard input (Enter, Space)
  • ARIA Labels: Descriptive labels for screen readers
  • Focus States: Clear visual focus indicators
  • Semantic HTML: Proper use of buttons, roles, and tabindex
When modifying components, ensure keyboard navigation and ARIA labels remain functional for accessibility compliance.

​
Component Communication

​
Props Flow

// Parent to Child
<ProductCard product={product} />
<ProductModal product={product} isOpen={isModalOpen} onClose={handleClose} />

// Event Callbacks
onClick={() => setIsModalOpen(true)}
onClose={() => setIsModalOpen(false)}

​
Context Usage

// Accessing cart state from any component
const { addItem, removeItem, getTotalItems, getTotalPrice } = useCart();

​
Next Steps

Explore individual component documentation for detailed props, methods, and usage examples:

ProductCard Component

Learn how to use and customize product cards

ProductModal Component

Understand modal functionality and sub-product handling

OrderButton Component

Integrate order validation and WhatsApp messaging

CartContext & useCart

Master cart state management with Context API

Build docs developers (and LLMs) love

Get started for freeTalk to us