📦 Café Inventory Web App

A simple, phone-friendly inventory counter for your café — no more manually typing Matcha Mill - 0 packs 100g into a notes app. Tap − / ＋ to count, then export the whole list as TXT (same format as your old notes) or Excel.

Built with plain HTML/CSS/JS — no server, no database, no build step. Perfect for GitHub Pages free hosting.

✨ Features

• 75 pre-loaded items in 5 categories (Powders, Liquids, Others, Pastries, Cakes) from your Aug 7, 2026 notes
• − / ＋ steppers for fast counting (or tap the number and type)
• Supports your quirks: text quantities ("madami pa"), pack sizes (1kg, 50 pcs), expiry notes (03/04/26), and cake counts like 2 whole 4 slices
• Items at 0 are highlighted red, with a counter in the header
• Search across all categories
• Add / edit / delete items and categories — the app grows with your menu
• Export TXT — same format as your current notes, ready to paste anywhere
• Export Excel (.xlsx) — one sheet per category
• Auto-saves on the device (browser localStorage) — close the app, come back, data is still there
• Works offline once loaded (all libraries are bundled locally)

📱 Using it on multiple phones

Free static hosting has no shared database, so each phone keeps its own copy. To sync:

1. On the phone with the latest count: ☰ Menu → 💾 Backup data → a .json file downloads
2. Send that file to the other phone (Messenger, Drive, email…)
3. On the other phone: ☰ Menu → 📥 Restore from backup → pick the file

You can also use 📋 Copy TXT to clipboard to quickly paste a count into your group chat.

🚀 Deploy to GitHub Pages (free domain)

1. Create a GitHub account → New repository → name it e.g. inventory (Public)
2. Upload all these files (Add file → Upload files → drag the whole folder), or push with git:

   git init
   git add .
   git commit -m "Café inventory app"
   git branch -M main
   git remote add origin https://github.com/YOUR-USERNAME/inventory.git
   git push -u origin main

3. In the repo: Settings → Pages → Build and deployment
   • Source: Deploy from a branch
   • Branch: main, folder: / (root) → Save
4. Wait ~1 minute, then open:

   https://YOUR-USERNAME.github.io/inventory/
   

5. On each phone: open the URL → browser menu → Add to Home Screen so it opens like an app.

💾 Important: where the data lives

Counts are saved in each device's browser (localStorage) — not on GitHub. GitHub only hosts the app files. That means:

• Clearing browser data/site data erases the inventory → use Backup regularly
• Edits to data.js on GitHub only affect first-time loads (or Reset to default template)

🗂 Files

File	Purpose
index.html	App shell
styles.css	Dark, mobile-first styling
app.js	All the logic (counting, saving, exports)
data.js	Default inventory template (first load / reset)
vendor/xlsx.full.min.js	SheetJS library for Excel export (bundled so it works offline)

🧪 Run locally

Just double-click index.html — no server needed.