Skip to main content

​
Quick Start Guide

Get your Bİ DOLU İÇECEK application running in minutes and learn the core workflows.

​
Running the Development Server

1

Start the Development Server

From the project root directory, start the React development server:
npm start
The application will:
  • Compile the React application
  • Open your default browser at http://localhost:3000
  • Enable hot-reloading for live code updates
The development server runs on port 3000 by default. If this port is in use, React will prompt you to use an alternative port.
2

Verify the Application is Running

Once the server starts, you should see:
  • Header: Company logo or “Bİ DOLU İÇECEK” text with phone number (0530 309 98 87)
  • Product Grid: 9 main product categories displayed in cards
  • Scroll Indicators: A “Scroll Down” indicator and progress bar
  • Social Media Icons: Video, language toggle, and other links in the header
The console should show:
Compiled successfully!

You can now view suapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.x.x:3000

​
Understanding the Application Structure

​
Main Components

The application is organized into several key components: 
// Main application structure from src/App.js
import { CartProvider } from './context/CartContext';
import { PRODUCTS } from './data/products';

function App() {
  return (
    <CartProvider>
      <div className="App">
        {/* Header with logo, phone, social media */}
        <Header onVideoOpen={handleVideoOpen} />
        
        {/* Scroll down indicator */}
        <ScrollDownIndicator />
        
        {/* Product catalog grid */}
        <main className="main-content">
          <div className="products-grid">
            {PRODUCTS.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </main>
        
        {/* Floating order button */}
        <OrderButton />
        
        {/* Welcome message (first visit) */}
        <WelcomeMessage />
      </div>
    </CartProvider>
  );
}

​
Key Features to Explore

Product Modal

Click any product card to open a modal showing all available sizes and variants

Cart System

Add items to cart and watch the floating order button update with total price

Service Hours

Order button automatically enables/disables based on service hours (8:30-20:30)

WhatsApp Integration

Complete orders are sent via WhatsApp with pre-filled messages

​
Your First Order Workflow

1

Browse Products

Scroll through the product grid. You’ll see 9 main categories:
  1. Fuska Su - Budget-friendly water options
  2. Pınar Su - Premium water brand
  3. Buzdağı Su - Natural spring water
  4. Sultan Su - Single-use damacanas
  5. Uludağ İçecek - Premium sodas and beverages
  6. Erikli Su - Wide variety of formats
  7. Munzur Su - Premium spring water
  8. Taşkesti Su - Glass bottle options
  9. Bardak Su - Convenient cup-sized portions
2

Select a Product

Click on any product card (e.g., “Pınar Su”) to open the product modal.The modal displays:
  • Product image or emoji placeholder
  • All available sizes (damacana, bottles, glass bottles)
  • Individual prices for each variant
  • Add to cart buttons
Damacana products (IDs ending in 1, like 11, 21, 31) have time restrictions and can only be ordered between 8:30 and 19:00.
3

Add to Cart

In the product modal:
  1. Click the Add button on any sub-product
  2. The item appears in your cart
  3. Use + and - buttons to adjust quantity
  4. Click Remove to delete the item
// Cart updates are handled by CartContext
// Each action updates the total automatically
const addToCart = (product) => {
  // Validates damacana time restrictions
  // Checks service hours
  // Updates cart state
};
4

Review Cart Total

The floating order button at the bottom right shows:
  • Total number of items in cart
  • Total price in TL
  • Order eligibility status
Order Button States:
  • Green: Ready to order (≥400 TL, service hours OK)
  • Grey: Cannot order (reasons displayed)
  • Disabled: Service hours closed or minimum not met
Minimum order amount: 400 TL
5

Place Order via WhatsApp

When the order button is green:
  1. Click the order button
  2. WhatsApp opens in a new tab
  3. Pre-filled message includes:
    • All items in your cart
    • Quantities and prices
    • Total amount
  4. Send the message to complete your order
// WhatsApp message format
const message = `Merhaba, sipariş vermek istiyorum:

- Pınar Su 19Lt Damacana x2 = 340 TL
- Fuska Su 24x0.5L Şişe x1 = 200 TL

Toplam: 540 TL

Adresim: `;

​
Testing Key Features

​
Service Hours

The application enforces service hours (8:30 - 20:30): 
// From src/config/serviceHours.js
export const DEFAULT_SERVICE_HOURS = {
  startHour: 8,
  startMinute: 30,
  endHour: 20,
  endMinute: 30,
  weekdaysEnabled: true,
  weekendsEnabled: true,
  testMode: false  // Set to true to bypass hours for testing
};
To test during development:
  1. Open src/config/serviceHours.js
  2. Set testMode: true
  3. Save the file (hot reload will update)
  4. Order button will always be enabled

​
Damacana Time Restrictions

Damacana products (19L jugs) have special ordering hours (8:30 - 19:00): 
// From src/config/damacanaLimits.js
export const DAMACANA_LIMITS = {
  cutoffHour: 19,      // Last order: 19:00
  cutoffMinute: 0,
  startHour: 8,        // First order: 8:30
  startMinute: 30,
  enabled: true,       // Set to false to disable
  testMode: false      // Set to true to bypass restrictions
};

​
Minimum Order Amount

Orders must meet the minimum threshold: 
// From src/config/orderLimits.js
export const ORDER_LIMITS = {
  minimumOrderAmount: 400,  // 400 TL minimum
  minimumOrderEnabled: true
};

​
Development Tools

​
Available Scripts

npm start
# Runs the app in development mode
# Open http://localhost:3000 to view it

​
Hot Reload

The development server supports hot module replacement (HMR):
  • Edit any .js or .css file
  • Save the file
  • Changes appear instantly without page reload
  • React state is preserved during updates

​
Next Steps

Configure Service Hours

Customize when customers can place orders

Manage Products

Add, edit, or remove products from the catalog

WhatsApp Setup

Configure your WhatsApp number and message templates

Deploy to Production

Build and deploy your application to hosting platforms
For detailed configuration options, refer to the README.md file in the source code or the configuration section of this documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us