​

Welcome to Bİ DOLU İÇECEK

​

What is Bİ DOLU İÇECEK?

• Responsive Design: Mobile-first approach with optimized layouts for all screen sizes
• Real-time Cart Management: Add, remove, and adjust product quantities with instant price updates
• Smart Service Hours: Automatic order validation based on configurable service hours (8:30 - 20:30)
• WhatsApp Integration: Direct ordering through WhatsApp with customizable message templates
• Multi-brand Support: 9+ water brands with 50+ product variants
• Order Limits: Configurable minimum order amounts and product restrictions

​

Key Features

​

Product Catalog

• Fuska Su: Damacana (19L), bottles (0.33L - 5L), cam damacana (15L)
• Pınar Su: Premium options including glass bottles and sert pet variants
• Buzdağı Su: Natural spring water in multiple sizes
• Sultan Su: Single-use damacanas and various bottle sizes
• Uludağ İçecek: Premium soda and beverages
• Erikli Su: Wide range of bottle formats
• Munzur Su: Premium spring water options
• Taşkesti Su: Glass bottles and damacanas
• Bardak Su: Convenient cup-sized portions (60x160mL - 60x200mL)

​

Shopping Cart System

// Cart Context manages state across the application
import { CartProvider } from './context/CartContext';
import OrderButton from './components/OrderButton';

function App() {
  return (
    <CartProvider>
      <div className="App">
        {/* Product catalog */}
        <main className="main-content">
          <div className="products-grid">
            {PRODUCTS.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </main>
        
        {/* Floating order button */}
        <OrderButton />
      </div>
    </CartProvider>
  );
}

• Real-time total calculation
• Quantity adjustments
• Product modal with sub-product selection
• Minimum order validation (400 TL minimum)
• Damacana time restrictions (8:30 - 19:00)

​

WhatsApp Integration

// WhatsApp configuration from src/config/whatsapp.js
export const WHATSAPP_CONFIG = {
  phoneNumber: "905303099887",
  defaultMessage: "Merhaba, {productName} sipariş etmek istiyorum."
};

• Pre-filled product messages
• Custom message templates per product
• Direct link to business WhatsApp
• Cart summary included in message

​

Service Hours Management

// Default service hours from src/config/serviceHours.js
export const DEFAULT_SERVICE_HOURS = {
  startHour: 8,
  startMinute: 30,
  endHour: 20,
  endMinute: 30,
  weekdaysEnabled: true,
  weekendsEnabled: true,
  closedDates: [],
  testMode: false
};

• Real-time service status checking
• Automatic button disabling outside hours
• Weekend/weekday configuration
• Special closed dates support
• Edge Config integration for remote updates

​

Technology Stack

• React 19.1.1: Latest React features and hooks
• React Scripts 5.0.1: Development and build tooling
• Tailwind CSS 4.1.12: Utility-first CSS framework
• PostCSS: CSS processing and optimization
• Vercel Edge Config: Remote configuration management

​

User Experience

​

First-time Visitors

• Welcome message displayed on first visit (localStorage tracking)
• Scroll indicators guide users through the catalog
• Scroll progress bar at the top of the page

​

Mobile Optimization

• Touch-friendly buttons and controls
• Responsive product grid (1 column mobile, 3+ columns desktop)
• Modal interfaces for product selection
• Optimized image loading with emoji placeholders

​

Real-time Updates

• Live service hours checking (updates every minute)
• Cart total updates instantly
• Order button state reflects current eligibility
• Damacana availability based on time of day

​

Next Steps