# 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:

   ```powershell
   npm install
   ```

3. Start the frontend:

   ```powershell
   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:

```dotenv
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

```powershell
npm run lint
npm run build
```