Youssef Ehab Alsayed 0
← Back to the portfolio

Crumbé: Cookie Shop & Bakery Back Office

An online store and back office for a small cookie bakery, in Arabic and English. Customers build boxes, pick a delivery slot and pay or choose cash; the bakery gets a bake board, a daily bake plan from open orders, stock, deliveries, customers with loyalty points and reports.

Website SaaS · Prototype

5Staff roles, each with its own pages
Bake planHow many of each cookie to bake, from real orders
AR · ENArabic and English, built for phones

A project by Youssef Ehab Alsayed

The question

How can a home or small bakery sell online, know exactly how many of each cookie to bake tomorrow, and never sell something that's already gone?

What I built

A clickable prototype for a made-up brand, Crumbé. Customers shop by category and allergens, build mixed boxes, add a gift note, pin their address on a map, pick a delivery slot and pay by card on the payment provider's page, by wallet or in cash. Checkout checks Egyptian mobile numbers (Arabic digits included), delivery zones, a minimum order and promo codes, and cookies show as sold out or 'only a few left'. The back office has a PIN login per person (owner, manager, cashier, baker, driver), each seeing only their pages: dashboard, orders, a bake board, a bake plan that adds up what open and tomorrow's orders need against stock, deliveries for the driver, products with cost and margin, customers with VIP segments and loyalty points, promo codes, delivery zones and reports with CSV export. It runs on demo data in the browser today; the data layer keeps the function names an ASP.NET Core API and SQL Server will provide, and the card step is ready to hand over to Paymob or Fawry.

Tools

HTML CSS JavaScript Arabic RTL Leaflet maps ASP.NET Core API (planned backend)

Live site

Live site

Live demo: shop and check out with the demo card or cash, then open Staff in the footer, pick a person and enter their PIN (Nour 1111 owner, Hassan 4444 baker, Ali 5555 driver) to follow the order.

Open site

Screenshots

On a phone: the home page, the shop and a cookie's page.
On a phone: the home page, the shop and a cookie's page.
The shop: filter by category and allergens, with sold-out and 'only a few left' badges.
The shop: filter by category and allergens, with sold-out and 'only a few left' badges.
A cookie's page with allergens, ingredients and serving tips.
A cookie's page with allergens, ingredients and serving tips.
Owner dashboard: today vs yesterday, 7-day sales, top cookies, low stock and channels.
Owner dashboard: today vs yesterday, 7-day sales, top cookies, low stock and channels.
Orders: search, date range and status filters; mark paid, print a receipt or cancel.
Orders: search, date range and status filters; mark paid, print a receipt or cancel.
Bake board: New, Baking, Out/ready and Done, with late warnings and gift notes.
Bake board: New, Baking, Out/ready and Done, with late warnings and gift notes.
Bake plan & stock: what open and tomorrow's orders need, against what's in stock.
Bake plan & stock: what open and tomorrow's orders need, against what's in stock.
Products with price, cost and margin, stock, daily target and an on/off switch.
Products with price, cost and margin, stock, daily target and an on/off switch.
Reports: revenue, estimated profit, by cookie, payment, zone and channel, with CSV export.
Reports: revenue, estimated profit, by cookie, payment, zone and channel, with CSV export.
Customers built from orders: VIP, new and inactive groups, with loyalty points.
Customers built from orders: VIP, new and inactive groups, with loyalty points.
The home page in Arabic, and checkout on a phone.
The home page in Arabic, and checkout on a phone.

More cartridges

ShadowDrop HFECloud Restaurant & Café POS SaaS Tutoring Center Management Platform SIM Card Management System League Team Builder Ember Slice: Pizza Ordering & Back Office Crumbé: Cookie Shop & Bakery Back Office