726325e501
A simple web app for tracking kitchen pantry items with: - Search and filter by stock status, spices, or container type - PIN-protected editing - Shopping list export (tap Out of Stock to copy) - QR code for quick mobile access - OpenGraph card for social sharing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
126 lines
3.7 KiB
Markdown
126 lines
3.7 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
# 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:
|
|
```bash
|
|
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
|