73 lines
2.2 KiB
Markdown
73 lines
2.2 KiB
Markdown
# 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 command (from the project root)
|
|
|
|
```bash
|
|
python run_project.py
|
|
```
|
|
|
|
Starts the FastAPI backend, waits until `/api/health` answers, then starts
|
|
this Vite dev server - so the API is always up before the UI first calls it.
|
|
Use `--frontend-only` to start just Vite against a backend you're already
|
|
running yourself.
|
|
|
|
### 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 (see `../backend/README.md`).
|
|
|
|
Note that Vite binds `localhost` as IPv6 (`[::1]`), which browsers handle
|
|
fine. Only relevant if you probe it with a tool pinned to IPv4 - use
|
|
`http://[::1]:5173` there, or pass `--host 127.0.0.1`.
|
|
|
|
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)
|
|
```
|