124 lines
4.7 KiB
Markdown
124 lines
4.7 KiB
Markdown
# KROW Demo
|
|
|
|
AI-powered hiring for event and hospitality staffing — a standalone demo build of KROW Forge.
|
|
|
|
Runs with no backend, no API keys, and no login. `npm install && npm run dev` and the app is fully
|
|
populated.
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
## Architecture
|
|
|
|
Vite + React 18, React Router 6, React Query 5, Tailwind + shadcn/ui, Framer Motion, Recharts.
|
|
|
|
```
|
|
src/
|
|
api/ data client — entity store, demo dataset, local AI engine
|
|
assets/ brand asset references
|
|
components/
|
|
ui/ 50 shadcn primitives (design system)
|
|
krow/ domain components
|
|
talent/ talent-portal components
|
|
proving/ Proving Ground challenge components
|
|
hooks/ shared hooks
|
|
layouts/ Layout — header, nav pill, control bar, mobile sheet
|
|
lib/ data hooks, score engine, AI workflows, auth context, utils
|
|
pages/ 18 route components
|
|
utils/ helpers
|
|
```
|
|
|
|
### The backend seam
|
|
|
|
The production app talks to a Base44 backend through `src/api/base44Client.js`. This demo keeps
|
|
that module path, export name, and full method contract, and swaps only the transport:
|
|
|
|
| Contract | Demo implementation |
|
|
| --- | --- |
|
|
| `base44.entities.<Name>.list/filter/get/create/update/delete` | `api/store.js` — in-memory records, mirrored to `localStorage` |
|
|
| `base44.integrations.Core.InvokeLLM` | `api/aiEngine.js` — local, deterministic |
|
|
| `base44.integrations.Core.UploadFile` | blob URLs, session-scoped |
|
|
| `base44.auth.*` | seeded employer/admin user, always signed in |
|
|
|
|
Because the seam did not move, everything above it — `lib/krowHooks.js`, `lib/krowAi.js`,
|
|
`lib/provingGround.js`, `lib/krowScore.js`, every page and component — is unchanged from the
|
|
reference implementation.
|
|
|
|
### The AI engine
|
|
|
|
Every AI workflow in the app funnels through one call, `InvokeLLM({ prompt, response_json_schema })`.
|
|
`api/aiEngine.js` reimplements that function locally. It recognizes each workflow by the phrase its
|
|
prompt opens with, reads the structured fields the prompt already carries (`Years Experience: 6`,
|
|
`Required Certifications: …`, the talent-pool JSON block), and scores them deterministically.
|
|
|
|
Nine workflows are implemented: candidate screening, job-description generation, résumé building,
|
|
interview questions, interview evaluation, talent matching, Owliver's conversation, Career DNA
|
|
building, and Proving Ground evaluation.
|
|
|
|
Results respond to the data rather than being canned — screening a 7-year native-English candidate
|
|
and a 1-year candidate against the same posting returns genuinely different scores, breakdowns,
|
|
strengths and gaps. The same input always returns the same output.
|
|
|
|
### Owliver
|
|
|
|
Two assistants share one visual language:
|
|
|
|
- **`OwliverAssistant`** — the hiring assistant, mounted on **Overview**, **Candidates** and
|
|
**Analytics** only. Answers from the same React Query caches the pages render from, so what it
|
|
says and what the dashboard shows can never disagree.
|
|
- **`OwliverChatBubble`** — the talent-facing profile builder, mounted in the Talent role.
|
|
|
|
## Demo data
|
|
|
|
Seeded in `src/api/seed.js`: 7 positions (5 open), 22 applicants, 9 AI-scored candidates averaging
|
|
76, 4 AI interviews, 3 hires, 6 talent-pool profiles, 4 Proving Ground courses, and an activity log.
|
|
|
|
Edits persist to `localStorage` — screen candidates, hire someone, create a position, and the
|
|
numbers move everywhere. To restore the shipped dataset:
|
|
|
|
```js
|
|
// in the browser console
|
|
localStorage.removeItem('krow_demo_db'); location.reload();
|
|
```
|
|
|
|
Bumping `STORAGE_VERSION` in `src/api/store.js` invalidates saved snapshots automatically, so
|
|
changing the seed does not require a manual clear.
|
|
|
|
## Roles
|
|
|
|
The header role switcher moves between three surfaces, persisted in `localStorage`:
|
|
|
|
- **Employer** — Overview, Positions, Candidates, Hired History, Talent Pool, Analytics
|
|
- **Admin** — adds Control Center, KROW Forge, Activity
|
|
- **Talent** — My Portal, KROW Forge, Opportunities
|
|
|
|
## Design system
|
|
|
|
Tokens live in `src/index.css` as HSL CSS variables consumed by `tailwind.config.js`.
|
|
|
|
| Token | Value |
|
|
| --- | --- |
|
|
| Primary — KROW Blue | `#0A39DF` |
|
|
| Accent — KROW Yellow | `#F9E547` |
|
|
| Pale Yellow | `#F8E08E` |
|
|
| Dark Navy | `#333F48` |
|
|
| Mint | `#D1E0D7` |
|
|
| Radius | `0.75rem` |
|
|
| Headings | Sora |
|
|
| Body | Inter |
|
|
|
|
The page background is `bg-[#F8FAFC]` under the `gradient-mesh` utility — four radial gradients in
|
|
blue, yellow and mint. Surfaces use `glass` and `glass-card` (backdrop blur with saturation).
|
|
|
|
## Scripts
|
|
|
|
| Command | Purpose |
|
|
| --- | --- |
|
|
| `npm run dev` | Dev server (honors `PORT`) |
|
|
| `npm run build` | Production build |
|
|
| `npm run preview` | Serve the build |
|
|
| `npm run lint` | ESLint |
|
|
| `npm run lint:fix` | ESLint with `--fix` |
|