cp apps/web/.env.example apps/web/.env
# Set PUBLIC_URL, VITE_BACKEND_URL, and any AI/OAuth keys

Public API

CommandPalette

import { CommandPalette } from "@/components/command-palette";

function CommandPalette(): JSX.Element

A keyboard-driven command palette mounted globally. Toggles with Mod+K (Cmd+K / Ctrl+K), closes with Escape, and navigates back with Backspace when the search input is empty. Renders navigation, resume, and preference command groups. Drop it once into your root layout component.

PreferencesCommandGroup

import { PreferencesCommandGroup } from "@/components/command-palette/pages/preferences";

function PreferencesCommandGroup(): JSX.Element

A command group rendered inside CommandPalette that surfaces theme and language switching commands. It reads and writes to useCommandPaletteStore via pushPage. Use this when you want to expose preference toggles inside the palette without building custom command items.

Route (auth redirect)

import { Route } from "@/routes/auth/index";

// TanStack Router file route:
const Route = createFileRoute("/auth/")({
  beforeLoad: async ({ context }) => {
    if (context.session) throw redirect({ to: "/dashboard", replace: true });
    throw redirect({ to: "/auth/login", replace: true });
  },
});

A route guard that redirects authenticated users away from the auth root to /dashboard, and unauthenticated users to /auth/login. Replicate this pattern for any protected or entry-point routes in your router tree.

Route (builder page)

import { Route } from "@/routes/builder/$resumeId/index";

const Route = createFileRoute("/builder/$resumeId/")({
  component: lazyRouteComponent(
    () => import("./-components/preview-page"),
    "PreviewPage"
  ),
  ssr: false,
});

The resume builder route for a specific resume ID. Uses lazyRouteComponent for code-splitting and disables SSR (ssr: false) because the builder relies on browser APIs. Use this pattern for any canvas or editor routes.

Working examples

Scenario - Mounting the command palette in a custom layout

Add the global command palette to your app shell so all hotkeys are available on every page.

import { CommandPalette } from "@/components/command-palette";
import { useCommandPaletteStore } from "@/components/command-palette/store";

function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav>My App Nav</nav>
      <main>{children}</main>
      {/* Registers Mod+K, Escape, and Backspace hotkeys globally */}
      <CommandPalette />
    </>
  );
}

export default AppShell;

Scenario - Programmatically opening the command palette

Trigger the command palette from a toolbar button using the Zustand store directly.

import { useCommandPaletteStore } from "@/components/command-palette/store";
import { Button } from "@reactive-resume/ui/components/button";

export function OpenPaletteButton() {
  const setOpen = useCommandPaletteStore((state) => state.setOpen);

  return (
    <Button variant="outline" onClick={() => setOpen(true)}>
      Open Command Palette
    </Button>
  );
}

Scenario - Adding a protected route with session-based redirect

Use TanStack Router's beforeLoad hook to guard a dashboard route, matching the pattern used in apps/web/src/routes/auth/index.tsx.

import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/dashboard/")({
  beforeLoad: async ({ context }) => {
    // context.session is populated by the root loader
    if (!context.session) {
      throw redirect({ to: "/auth/login", replace: true });
    }
  },
  component: () => <div>Dashboard</div>,
});

Scenario - Lazy-loading a heavy editor component

Mirror the builder route pattern to code-split any resource-intensive page.

import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router";

export const Route = createFileRoute("/editor/$documentId/")({
  component: lazyRouteComponent(
    () => import("./-components/editor-page"),
    "EditorPage"
  ),
  ssr: false, // Editor uses canvas/browser APIs
});

File walkthrough

• .github/ - Automated workflows: Docker image builds on push, Crowdin translation sync, and code autofix PRs.
• .vscode/ - Biome extension recommendation and format-on-save settings to match project style.
• apps/web/ - The entire React frontend: TanStack Router file routes, dialog system, command palette, resume builder UI, and Vite config.
• docs/ - Markdown documentation served at docs.rxresu.me; not required at runtime.
• migrations/ - Raw SQL migration files for the Postgres database schema; apply with your migration runner before starting the backend.
• packages/ - Internal shared libraries: @reactive-resume/ui (shadcn-based components), @reactive-resume/utils, schema types, and more.
• skills/ - Static skill taxonomy JSON data used for autocomplete in the resume editor.
• biome.json - Single config for Biome linting and formatting; replaces ESLint + Prettier for this project.
• compose.yml - Production Compose stack defining the server, web, Chrome (for PDF), Postgres, Redis, and MinIO services.
• compose.dev.yml - Development variant with hot-reload mounts and exposed ports.
• turbo.json - Turborepo task graph: defines build, dev, lint, and typecheck pipelines with caching.
• pnpm-workspace.yaml - Declares apps/* and packages/* as workspace members.
• tsconfig.json - Root TS config using references to each workspace package.
• vitest.shared.ts / vitest.setup.ts - Shared Vitest globals and setup imported by each package's own vitest.config.ts.
• knip.json - Configuration for Knip dead-export analysis; run before shipping to catch unused code.

Common pitfalls and fixes

• pnpm required - The workspace uses pnpm-workspace.yaml; running npm install at root will not hoist packages correctly. Fix: install pnpm globally (npm i -g pnpm) and use pnpm install.
• ssr: false on builder routes - The resume preview uses window and canvas APIs; forgetting ssr: false causes hydration errors in SSR/SSG setups. Fix: always set ssr: false on routes that import browser-only modules.
• Biome replaces ESLint - The project has no .eslintrc; adding ESLint config will conflict. Fix: use biome check and biome format exclusively, or configure Biome in your editor via the recommended extension.
• Missing context.session in route context - The auth redirect pattern reads context.session; if your router root loader does not inject session, beforeLoad will always redirect. Fix: add a root route loader that fetches and attaches the session to context.
• Lingui macros require Babel/Vite plugin - @lingui/core/macro and @lingui/react/macro are compile-time transforms. Fix: add @lingui/vite-plugin to vite.config.ts and run pnpm lingui extract before building.
• Turbo cache misses on env changes - Turborepo caches builds by input files; env var changes are not tracked by default. Fix: list sensitive env vars under globalEnv in turbo.json.

Vibe-coding prompt template

I have purchased the Reactive Resume monorepo block (upstream: user@example.com).
The source is in the `source/` directory. I also have `USAGE.md` as a reference.

My project is a [describe your stack, e.g., "Next.js 14 app with Postgres and S3"].

Please help me integrate this source step by step:
1. Read `USAGE.md` and `source/apps/web/src/` to understand the routing, 
   command palette, and dialog system.
2. Identify which packages under `source/packages/` I need to copy or install.
3. Show me how to mount `CommandPalette` from 
   `source/apps/web/src/components/command-palette/index.tsx` in my root layout.
4. Show me how to add a protected route using the `beforeLoad` pattern from 
   `source/apps/web/src/routes/auth/index.tsx`.
5. List any environment variables I must set before the app will start.
6. Highlight any changes needed to my `tsconfig.json` to resolve 
   `@reactive-resume/*` path aliases.
Do not invent APIs. Only use exports visible in the file excerpts in USAGE.md.

License and credit

Reactive Resume is released under the MIT License. See source/LICENSE for the full text.

Upstream repository and package: amruthpillai/reactive-resume / user@example.com on npm.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.