Project Architecture

flowchart TD
  %% Client Side
  subgraph Client ["Client"]
    Router["TanStack Router"]
    Query["TanStack Query"]
    ORPCClient["oRPC Client"]
  end

  %% Server Side
  subgraph Server ["Server"]
    ORPCRouter["oRPC Router"]
    Auth["Better Auth"]
    Services["Services Layer"]
    Drizzle["Drizzle ORM"]
  end

  Database["PostgreSQL"]
  Storage["File System OR S3-Compatible Storage"]
  Printer["Printer (Browserless/Chromium)"]

  Router --> ORPCClient
  Query --> ORPCClient
  ORPCClient -- calls --> ORPCRouter
  ORPCRouter --> Services
  Auth --> Services
  Services --> Drizzle
  Drizzle --> Database
  Services --> Storage
  Services --> Printer

<Accordion title="routes/" icon="route">
	File-based routing using TanStack Router: - **`__root.tsx`** — Root layout with providers - **`_home/`** — Public
	home page routes - **`auth/`** — Authentication routes (login, register, etc.) - **`dashboard/`** — User dashboard
	routes - **`builder/`** — Resume builder routes (the main editor) - **`printer/`** — PDF printing route - **`api/`**
	— API routes
</Accordion>

<Accordion title="integrations/" icon="plug">
	Third-party service integrations: - **`auth/`** — Better Auth client configuration - **`drizzle/`** — Database
	schema and utilities - **`orpc/`** — API router, client, and services - **`ai/`** — AI service integrations -
	**`import/`** — Resume import utilities
</Accordion>

<Accordion title="dialogs/" icon="window-maximize">
	Modal dialog components: - **`auth/`** — Authentication dialogs - **`resume/`** — Resume management dialogs -
	**`api-key/`** — API key management dialogs - **`manager.tsx`** — Dialog manager component - **`store.ts`** — Dialog
	state management (Zustand)
</Accordion>

<Accordion title="schema/" icon="file-code">
	Zod schemas for validation: - **`resume/`** — Resume data schemas - **`icons.ts`** — Icon definitions -
	**`templates.ts`** — Template definitions
</Accordion>

<Accordion title="hooks/" icon="hook">
	Custom React hooks: - `use-confirm.tsx` — Confirmation dialog hook - `use-prompt.tsx` — Prompt dialog hook -
	`use-mobile.tsx` — Mobile detection hook - `use-safe-context.tsx` — Safe context consumption
</Accordion>

<Accordion title="utils/" icon="wrench">
	Utility functions: - `env.ts` — Environment variable validation - `locale.ts` — Locale utilities - `theme.ts` —
	Theme utilities - `string.ts` — String manipulation - `file.ts` — File handling utilities
</Accordion>

src/integrations/orpc/
├── client.ts         # Client-side ORPC setup
├── router/           # API route definitions
│   ├── auth.ts      # Authentication endpoints
│   ├── resume.ts    # Resume CRUD operations
│   └── storage.ts   # File storage operations
├── services/         # Business logic layer
└── helpers/          # Utility functions

import { useQuery } from "@tanstack/react-query";
import { orpc } from "@/integrations/orpc/client";

// Type-safe API calls with TanStack Query
const { data } = useQuery(orpc.resume.findMany.queryOptions());

import { pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";

export const resume = pgTable("resume", {
  id: uuid("id").primaryKey().defaultRandom(),
  title: text("title").notNull(),
  slug: text("slug").notNull(),
  // ... more fields
});

// src/components/ui/my-component.tsx
import { cn } from "@/utils/style";

interface MyComponentProps {
  title: string;
  className?: string;
}

export const MyComponent = ({ title, className }: MyComponentProps) => {
  return <div className={cn("p-4", className)}>{title}</div>;
};

// src/routes/my-page.tsx
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/my-page")({
  component: MyPage,
});

function MyPage() {
  return <div>My Page Content</div>;
}

// In router file
import { z } from "zod";
import { publicProcedure, router } from "../server";

export const myRouter = router({
  hello: publicProcedure.input(z.object({ name: z.string() })).handler(async ({ input }) => {
    return { message: `Hello, ${input.name}!` };
  }),
});

import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";

// In component
const title = t`Welcome`;
<Trans>Click here to continue</Trans>;

<Step title="Create a Branch">
	Create a feature branch from `main`: ```bash git checkout -b feature/my-feature ```
</Step>

<Step title="Make Changes">Implement your changes following the patterns described above.</Step>

<Step title="Test Locally">
	Ensure the app works correctly with your changes: ```bash pnpm run dev pnpm run lint pnpm run typecheck ```
</Step>

<Step title="Commit & Push">Write clear commit messages and push to your fork.</Step>

<Step title="Open a Pull Request">
	Open a PR against the main repository with a clear description of your changes.
</Step>