frontend

README.md

@@ -0,0 +1,64 @@
+# Frontend - Kirana AI (React + Vite)
+
+React 19 + Vite + Tailwind CSS v4 single-page app for browsing the catalog,
+running semantic search, chatting with the RAG assistant, and (on
+`/admin`) triggering ingestion of new brands.
+
+Full setup steps are in the project documentation (`../docs/`). This file
+is a fast local reference.
+
+## Quick start
+
+### One-click (Windows)
+
+Double-click **`start_frontend.bat`**. It checks whether the backend is
+reachable on port 8000 (just a warning, not a blocker) and starts the
+Vite dev server.
+
+### Manual
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+Open http://localhost:5173 - the Vite dev server proxies `/api/*` to
+`http://localhost:8000` automatically (see `vite.config.js`), so make
+sure the backend is running there first (`../backend/README.md`,
+`../backend/start_backend.bat`).
+
+If your backend runs somewhere else, set `VITE_API_BASE_URL` in a local
+`.env` file (copy `.env.example`) instead of relying on the proxy.
+
+## Production build
+
+```bash
+npm run build      # outputs to dist/
+npm run preview    # serve the production build locally to sanity-check it
+```
+
+## Pages
+
+- `/` - Browse & Search (sidebar brand/category filters, product grid,
+  semantic search bar) with a toggle to **Ask AI**, a conversational RAG
+  chat panel that cites which catalog products it used for each answer.
+- `/admin` - Trigger ingestion of a new brand and watch job status.
+
+## Structure
+
+```
+src/
+├── api/client.js          # fetch wrapper for every backend endpoint
+├── components/
+│   ├── Sidebar.jsx / TopBar.jsx
+│   ├── ProductCard.jsx / ProductGrid.jsx / ProductModal.jsx
+│   ├── ChatPanel.jsx / ChatMessage.jsx
+│   └── Atoms.jsx           # Spinner, EmptyState
+├── pages/
+│   ├── HomePage.jsx
+│   └── AdminPage.jsx
+├── App.jsx                 # routes
+├── main.jsx
+└── index.css                # Tailwind v4 theme tokens ("Kirana Ledger" palette)
+```