PWA Shop Proof (demo)

This repository contains a minimal offline-first PWA storefront (React client) and a tiny Express API (demo in-memory). The demo showcases:

• Installable web app (manifest + icons)
• Service worker that precaches the app shell and runtime-caches product responses and images
• Offline cart persisted in IndexedDB and queued checkout actions
• Background Sync support (where available) and client-side replay on online events
• Idempotent order endpoint on the API to avoid duplicate orders

Quick demo steps (recommended for presenting to your sir)

1. Run the demo using the provided PowerShell helper (Windows):

.\start-demo.ps1

This opens two PowerShell windows and runs the API and the client dev server (it runs npm install on first run).

2. Open the client in Chrome at:

   http://localhost:5174

3. Verify service worker registered (open DevTools -> Console; you should see a "Service worker registered:" log).

4. Add products to cart and then simulate offline:

   • DevTools -> Network -> Offline (or disconnect your machine)
   • Click "Checkout" — the UI will enqueue the order and clear the cart. It displays a message indicating the order was queued.

5. Reconnect network:

   • If the page is open, the client will replay queued orders automatically via online event.
   • If you used a Chromium browser with Background Sync support, the Service Worker will also attempt to replay queued orders while the page is closed.

6. Check the API window to see order requests arriving and the API's responses.

Scripts (root)

• npm run install-all — installs dependencies for both api and client.
• npm run dev — starts API and client concurrently (requires npm install in the repo root to install concurrently).

Or use the PowerShell script above for a Windows-friendly flow.

Notes & Next steps

• The demo API is in-memory and will reset on restart. If you want persistent data, I can wire MongoDB and update docker-compose.yml.
• For full Lighthouse PWA checks you can run a production build (npm run build in client) and serve it over HTTPS or localhost — the manifest and SW are included under client/public.

If you'd like, I can now (pick one):

1. Wire the API to MongoDB, add seed data, and update docker-compose.yml so the full stack runs in Docker (recommended for reproducible demos).
2. Improve the Service Worker (Workbox) and add a Lighthouse audit script to iterate until core PWA checks pass.
3. Create a short demo script and slide/checklist you can use while presenting (step-by-step actions and expected outcomes).

Tell me which option you'd like; I can implement it and verify the demo works end-to-end.

Running full stack with Docker (API + MongoDB)

If you prefer a reproducible demo using Docker for the API and MongoDB, you can run:

docker-compose up --build -d

This will start the API on http://localhost:4000 backed by a MongoDB instance. Then run the client locally:

cd client
npm install
npm run dev

Open http://localhost:5174 and follow the demo steps above. The API will be persistent across container restarts thanks to the mongo-data volume.

PWA Shop Proof (minimal)

Setup

1. Client

cd client
npm install
npm run dev