Sheet2Menu Web App

• 

📌 Inspiration In many small restaurants and cafes, the typical digital menu system is limited to just displaying items after scanning a QR code. Customers still have to call a waiter to place their orders, which defeats the purpose of going digital.

Worse, most web-based digital menus on the market are either subscription-based or too expensive for new or small businesses to afford. They often require technical know-how or hiring developers, which creates a barrier for low-budget restaurant owners.

That’s when I asked myself:

“What if I could build a digital menu that not only displays items but also lets customers order directly from their table—without needing an app, account, or even a waiter?”

💡 What I Built Sheet2Menu is a lightweight, no-code digital menu system that connects directly to Google Sheets and enables WhatsApp ordering.

🧾 Restaurant owners manage their items from a simple Google Sheet (edit name, price, availability, image, category).

📱 Customers scan a QR code, browse the menu, add items to cart, and click one button to order via WhatsApp.

🧠 No authentication, no backend hosting, no complex setup—just edit a spreadsheet and deploy.

It’s designed for:

Local food stalls

New restaurants

Pop-ups and cafes

Food courts and cloud kitchens

⚙️ How I Built It Frontend: HTML, CSS, JavaScript (vanilla)

Backend/DB: Google Sheets as a public JSON endpoint

Ordering: WhatsApp API (pre-filled message format)

Hosting: Vercel for free deployment

Assets: Custom icons, images, and styling with responsive layout

I wrote a Sheets parser and a dynamic content renderer so the entire menu and its categories are generated from Sheet data on load.

🚧 Challenges I Faced 🧩 Fetching and parsing dynamic data from Google Sheets cleanly

📦 Making cart data persist between pages (menu → cart → WhatsApp)

📱 WhatsApp link formatting to support multiple items with quantities

💾 Designing a structure where non-coders can still “run the backend”

The toughest part was ensuring the site stays editable by non-developers, yet functional for real-world restaurant use.

📚 What I Learned How to use Google Sheets as a no-code backend/API

DOM manipulation and modular JavaScript for live data rendering

Best practices for building minimal, deployable static apps

Practical problem-solving for underserved users

💬 Final Thought This project made me realize that tech can empower even the smallest businesses—if we simplify the tools and remove complexity. Sheet2Menu isn't just a hackathon submission; it's something I want to continue improving and offering to local businesses in need.

Built With

• css
• google-sheet-api
• html
• javascript
• json
• whatsapp-api