☕ Bill77 Digital Menu System

A real-time digital menu web application built for Bill77 Coffee, a local coffee shop in Makassar. This project modernizes the ordering process by integrating Google Sheets as a headless CMS.

(Note: You can replace this image link with a screenshot of your actual website later)

🔗 Live Demo: https://bil77coffee.netlify.app/

💡 The Problem

The client (Bill77 Coffee) faced operational challenges:

• Static Menu: Updating prices or "Sold Out" items required re-printing physical menus.
• Stock Mismatch: Customers often ordered items that were out of stock, leading to dissatisfaction.
• Ordering Queue: Manual order taking was slow during peak hours.

🚀 The Solution

I developed a serverless web application that allows customers to browse the menu and order directly via WhatsApp. The unique feature is the "No-Code Backend" using Google Sheets, allowing the non-technical owner to manage inventory in real-time.

Key Features

• ✅ Real-time Inventory: Prices and availability (Stock/Sold Out) are fetched instantly from a Google Sheet.
• ✅ Dynamic Categorization: Menu items are automatically grouped (Coffee, Non-Coffee, Foods) based on data.
• ✅ WhatsApp Integration: Orders are formatted into a neat text message and sent directly to the cashier's WhatsApp.
• ✅ Responsive Design: Mobile-first interface that looks like a native app.
• ✅ Cart System: Customers can add multiple items and adjust quantities before checkout.

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Custom responsive styling), Vanilla JavaScript (ES6+).
• Backend/Database: Google Sheets (via Opensheet API).
• Deployment: Netlify.

⚙️ How It Works

1. Data Entry: The owner updates the menu in a standard Google Sheet (columns: id, name, price, stock, category).
2. API Fetch: The website fetches this data using fetch() on page load.
3. Rendering: JavaScript maps the data into HTML cards. If stock === FALSE, the item is visually disabled.
4. Ordering: The shopping cart logic compiles the order and opens the WhatsApp API link with the pre-filled message.

📸 Screenshots

👨‍💻 Author

Irgi Ahmad Informatics Student at Universitas Muslim Indonesia (UMI).

• Passionate about solving real-world problems with web technologies.
• irgiahmadb655@gmail.com

---

© 2026 Bill77 Digital Menu Project.