58 lines
1.9 KiB
Markdown
58 lines
1.9 KiB
Markdown
# 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
|
|
```
|