Pantry Inventory App

A simple web app for tracking kitchen pantry items across your household.

Features

• Search - Instantly filter ingredients by name
• Container tracking - 8 container types with color-coded indicators
• Stock status - Mark items as in-stock or out-of-stock
• PIN protection - Anyone can view, but editing requires a 4-digit PIN
• QR Code - Generate a scannable code to post on your pantry shelf
• Shared data - All household members see the same inventory

Deployment on YunoHost (My Webapp)

1. Install My Webapp

In YunoHost admin panel:

1. Go to Applications → Install
2. Search for "My Webapp"
3. Configure:
   • Label: Pantry (or whatever you prefer)
   • Domain/Path: e.g., yourdomain.com/pantry
   • PHP version: 8.2 or higher
   • Database: None needed
4. Install

2. Upload Files

Connect via SFTP using the credentials shown after installation, then upload to the www folder:

www/
├── index.html      (the main app)
├── api.php         (backend API)
└── data/           (created automatically)
    ├── inventory.json
    └── pin.txt

3. Set Permissions

The data folder needs to be writable by the web server. This should happen automatically, but if you have issues:

# SSH into your YunoHost server
cd /var/www/pantry/www   # adjust path as needed
mkdir -p data
chmod 755 data

4. First Use

1. Visit your app URL (e.g., https://yourdomain.com/pantry)
2. The app loads with a pre-populated inventory based on your photos
3. Tap the lock icon → Set a 4-digit PIN for your household
4. Share the PIN with family members who need edit access
5. Go to the QR Code tab and print it for your pantry

File Structure

index.html    - Frontend (HTML/CSS/JS, no build step)
api.php       - Backend API (reads/writes JSON files)
data/
  inventory.json  - Your inventory data
  pin.txt         - Stored PIN (hashed would be better for production)

Container Types

The app supports these container types (edit in both index.html and api.php if you want to change them):

ID	Name
glass-bail-large	Glass Bail Jar (Large)
glass-bail-medium	Glass Bail Jar (Medium)
glass-bail-small	Glass Bail Jar (Small)
oxo-large	OXO Container (Large)
oxo-medium	OXO Container (Medium)
oxo-small	OXO Container (Small)
original-package	Original Package
mason-jar	Mason Jar

Customization

Adding Container Types

1. In index.html, find the containerTypes object and add your new type
2. In the <select> dropdown for containers, add a new <option>

Changing the Default Inventory

Edit the $defaultInventory array in api.php. This only applies on first run (before inventory.json exists).

Resetting Everything

Delete the data folder contents to start fresh:

rm data/inventory.json data/pin.txt

Security Notes

• The PIN is stored in plain text. This is fine for a household app where you just want to prevent accidental edits, but don't use this for anything sensitive.
• There's no authentication beyond the PIN - anyone with the URL can view your inventory.
• For a more secure setup, you could put the app behind YunoHost's SSO.

Backup

YunoHost's My Webapp will backup the entire www folder including data/. Your inventory and PIN are automatically included in YunoHost backups.

Troubleshooting

"Connection error" message

• Check that PHP is enabled for your My Webapp instance
• Verify the data folder is writable

PIN not working

• Check that data/pin.txt exists and contains exactly 4 digits
• Try deleting data/pin.txt to reset

Inventory not saving

• Check data/inventory.json permissions
• Look for PHP errors in YunoHost logs