Keeply pantry manager

A responsive React and TypeScript frontend for the pantry manager API in C:\Source\Programming Projects\pantry-manager-api-csharp.

Included

• JWT sign in, registration, session restore, and automatic token refresh
• Pantry-first grid with search, location/freshness filters, expiry summaries, and sorting
• Manual item CRUD and a barcode-first quick-add flow
• Camera scanning with a native BarcodeDetector path and a cross-browser ZXing fallback
• Location management
• Household management, member invites, and leave-household flow
• Site administrator user and role management
• Profile, email, name, and password settings
• Responsive desktop, tablet, and mobile layouts

Run locally

1. Start the API at http://localhost:5000.

2. Install frontend dependencies:

   npm install
   

3. Start the frontend:

   npm run dev
   

4. Open http://localhost:5173.

Vite proxies /api requests to http://localhost:5000 during local development.

API URL

For a separately hosted API, copy .env.example to .env and set:

VITE_API_BASE_URL=https://your-api.example.com

Leave the value blank when the API is on the same origin or when using the local Vite proxy.

Barcode scanning

Live camera detection uses the native BarcodeDetector browser API when available. Browsers without it, including Firefox, use the free, MIT-licensed @zxing/browser fallback. Both paths require a secure origin; localhost is treated as secure for local development. Manual barcode entry remains available if camera access is denied or unavailable.

The backend identifies the product while POST /api/inventoryitems is processed. The frontend therefore captures the barcode and expiry information first, then refreshes the inventory to show the API-resolved product.

Validate

npm run lint
npm run build