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

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

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)