Skip to content
Omar Aldanaf

Case study

WebE-commerceDashboard

Café Noel Roastery

E-commerce storefront for a Lebanese coffee roastery, with customer accounts, a categorised catalogue, online ordering handed to WhatsApp and an admin back office.

Client
Café Noel Roastery (Lebanon)
Industry
Food & beverage
Team
2 developers (with Habib Berjak)
Status
Live
Products grouped by category.

Overview

Café Noel has roasted coffee for the Lebanese market since 1990 and operates three branches, in Aley, Bkhechtay and Bakaata. The website brings its full range online, from coffee and nuts to spices, oils and traditional products, so customers anywhere in Lebanon can browse, order for delivery and follow the status of every order. Behind the storefront, an admin back office runs the catalogue, merchandising, orders and monthly income. Delivered as a freelance project, independent of the IT role at Center Café Noel.

The problem

The roastery needed an online channel where customers across Lebanon could browse its complete range, place delivery orders and track them, and where staff could run products and orders without a developer.

What I built

  • A server-rendered PHP storefront with customer accounts, cart and checkout
  • Orders stored in MySQL, then handed to the shop on WhatsApp as a pre-filled summary
  • An admin back office for the catalogue, merchandising, orders and income reporting

Key features

  • 01Catalogue organised by category (coffee, nuts, spices, herbs, oils, malban, tahini and more), with category shortcuts and horizontal product sliders
  • 02Live product search with results as the customer types
  • 03Product pages with size, price and a quantity selector that steps in whole or half units, depending on the category
  • 04Customer accounts with email verification and password reset by one-time code
  • 05Cart that updates without page reloads, a flat delivery fee, and checkout that opens WhatsApp with the full order summary
  • 06Order history for customers, with each order tracked from pending to delivered
  • 07Admin panel: products, out-of-stock toggle, curated Best Sellers, a New Items popup, order status management with a new-orders badge, and a monthly income report
  • 08Branch locations with maps and a wholesale program with WhatsApp contact

Architecture

  1. Browser
  2. PHP pages
  3. MySQL
  4. WhatsApp hand-off
Architecture: Browser to PHP pages to MySQL to WhatsApp hand-off

Screens

Curated best sellers with direct add to cart.
Product page with quantity selector and related products.
Three branches, each with a map.
Wholesale program for business customers.
Home page on a phone.
Catalogue on a phone.

Decisions & challenges

Checkout completes on WhatsApp

Payment is arranged on delivery, so the order is saved first and then handed to the shop as a pre-filled WhatsApp message, where staff confirm it with the customer.

Performance & security

Security

  • Passwords and one-time codes stored only as hashes
  • Prepared statements for every query and escaped output
  • Prices recalculated on the server at checkout, never taken from the browser

Inventory

Profile

Developer toolkit

  • GitHub

Systems toolkit

System

omar@world01

Client-side command palette. Type help to list commands.

WORLD_01 map

  1. SPAWN // OMAR Spawn Point / About
  2. CRAFTING // STACK Crafting Workshop / Skills
  3. MINE // PROJECTS Project Mine / Projects
  4. LAB // ARCHITECTURE Logic Lab / Architecture
  5. OPS // INFRASTRUCTURE Server Room / Infrastructure
  6. HALL // EXPERIENCE Achievement Hall / Experience
  7. PORTAL // CONTACT Portal / Contact