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.

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:

// 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`

4.7 KiB Raw Blame History