React

Open an existing router file to understand the pattern. Each router uses `createRouter()` and chains `.query()` or `.mutation()` calls with Zod input validation and Prisma operations in the `resolve` function.

Pattern: See how `questions-question-router.ts` defines queries with `.query('getQuestionsByFilter', { input: z.object({...}), async resolve({ctx, input}) { ... } })` — replicate this exact structure.

Add your new `.query()` or `.mutation()` call to the router chain. Use `ctx.prisma` for database access and `ctx.session` for auth checks. For protected endpoints, use `createProtectedRouter()` instead of `createRouter()`.

Pattern: See how `questions-answer-router.ts` uses `createProtectedRouter()` for mutations that require authentication, versus `createRouter()` for public queries.

Call the new endpoint from a page or component using `trpc.useQuery(['questions.questions.yourNewEndpoint', { ...params }])` for queries or `trpc.useMutation('questions.questions.yourNewEndpoint')` for mutations.

Pattern: See how `apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx` calls `trpc.useQuery` with the full dot-notation path matching the router namespace.

Study this file as the reference pattern for creating a new tRPC router. Note how it exports a `createRouter()` chain with queries and mutations, uses Zod for input validation, and accesses Prisma through `ctx.prisma`.

Pattern: Copy the structure of `offers-profile-router.ts`: import createRouter, define Zod input schemas, chain .query() and .mutation() calls, export the router.

Create a new directory `apps/portal/src/server/router/salaries/` and add `salaries-router.ts`. Define your router with queries and mutations following the pattern from step 1.

Pattern: Match the export pattern in `apps/portal/src/server/router/offers/offers-profile-router.ts`: `export const salariesRouter = createRouter().query(...)...`

Import the new router and merge it into the `appRouter` using `.merge('salaries.', salariesRouter)`. This registers the namespace so the client can call `trpc.useQuery(['salaries.yourEndpoint'])`.

Pattern: See how `apps/portal/src/server/router/index.ts` merges existing routers: `.merge('offers.', offersRouter)` — add your new router in the same pattern.

Create a new Next.js page at `apps/portal/src/pages/salaries/index.tsx`. This is the main page for the feature.

Pattern: Follow the page structure in `apps/portal/src/pages/offers/index.tsx`: import trpc hooks, use `trpc.useQuery` for data fetching, wrap content in the page layout.

Create a new directory `apps/portal/src/components/salaries/` and add feature-specific components. Each component should be a focused React component that receives data via props or fetches via tRPC hooks.

Pattern: Follow the component organization in `apps/portal/src/components/offers/` — separate table components, form components, and display components into individual files.

Add a navigation link for the new feature in the AppShell navigation array. Add an entry with the feature name, href, and icon.

Pattern: See how existing navigation items are defined in `AppShell.tsx` — each has a `name`, `href`, and `icon` property in the navigation array.

Study an existing UI component to understand the pattern. UI components are generic, reusable, and styled with Tailwind CSS. They accept props for variants, sizes, and standard HTML attributes.

Pattern: See how `apps/portal/src/ui/Button.tsx` defines variant props, uses `clsx` or template literals for conditional Tailwind classes, and forwards refs.

Create the new component file in `apps/portal/src/ui/`. Export a named React component with TypeScript props interface. Use Tailwind classes for all styling.

Pattern: Match the export and typing pattern from `apps/portal/src/ui/Button.tsx`: named export, Props type, forwardRef if needed.

If a barrel export file exists, add the new component export. Otherwise, import directly from the component file in consuming code.

Pattern: Check if `apps/portal/src/ui/index.ts` exists; if so, add `export { default as NewComponent } from './NewComponent';`

Study this page as a reference. Pages import tRPC hooks, fetch data with `trpc.useQuery`, handle loading/error states, and compose feature components.

Pattern: See how `apps/portal/src/pages/offers/index.tsx` uses `trpc.useQuery` for data fetching, renders loading spinners, and composes components from `src/components/offers/`.

Create the new page file. Next.js file-based routing means `src/pages/yourfeature/index.tsx` maps to `/yourfeature`. For dynamic routes, use `[paramName].tsx` syntax.

Pattern: For dynamic routes, see `apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx` — it uses `useRouter().query` to extract URL parameters.

Add navigation entry for the new page if it should appear in the main navigation bar.

Pattern: See the navigation array in `AppShell.tsx` — add an object with `name`, `href`, and `icon` matching the existing entries.

Study this file as the reference pattern for non-tRPC API routes. It exports a default handler function that checks `req.method` for GET/POST/DELETE and returns JSON responses with appropriate status codes.

Pattern: See how `file-storage.ts` handles multiple HTTP methods with a switch/if on `req.method`, validates input, performs operations, and returns `res.status(200).json({...})`.

Create a new file in `apps/portal/src/pages/api/`. Export a default `NextApiHandler` function. Use `req.method` to handle different HTTP methods.

Pattern: Match the handler signature and error handling pattern from `apps/portal/src/pages/api/file-storage.ts`.

If the endpoint requires authentication, reference this file to see how to check `getServerAuthSession` and return 401 for unauthenticated requests.

Pattern: See how `restricted.ts` calls `getServerAuthSession({req, res})` and checks for a valid session before proceeding.

Study this file as the reference pattern for shared components. It wraps a generic UI component with feature-specific data fetching (tRPC query for cities) and exposes a clean props interface.

Pattern: See how `CitiesTypeahead.tsx` combines a UI typeahead component with `trpc.useQuery` for data, debounced search input, and a callback prop for selection.

Create the new shared component in `apps/portal/src/components/shared/`. If it needs server data, use tRPC hooks. If it's purely presentational, compose from `src/ui/` components.

Pattern: Match the pattern from `apps/portal/src/components/shared/CitiesTypeahead.tsx`: typed props interface, tRPC data fetching, composition of UI primitives.

Add the new variable to either `serverSchema` (server-only) or `clientSchema` (exposed to browser). Use Zod validators like `z.string()`, `z.string().url()`, etc.

Pattern: See how existing variables are defined in `schema.mjs`: `serverSchema` uses `z.object({ DATABASE_URL: z.string() })` and `clientSchema` uses `z.object({ NEXT_PUBLIC_...: z.string() })`.

If adding a client-side variable (NEXT_PUBLIC_ prefix), map it in the `clientEnv` object so it gets validated and exposed.

Pattern: See how `client.mjs` maps `NEXT_PUBLIC_` variables from `process.env` into the validated client env object.

Add the actual value to the `.env` file (or `.env.example` for documentation). Server variables can have any name; client variables MUST start with `NEXT_PUBLIC_`.

Pattern: Follow the naming convention of existing variables in the `.env` file.

Study this file as the reference pattern for seed scripts. It uses the Prisma client to create records, handles upserts to avoid duplicates, and reads from data files.

Pattern: See how `seed-questions.ts` imports PrismaClient, creates records with `prisma.questionsQuestion.create()`, and handles relationships between models.

Create a new seed file in `apps/portal/prisma/`. Import PrismaClient, instantiate it, and use `prisma.yourModel.create()` or `prisma.yourModel.upsert()` to insert data.

Pattern: Match the structure from `apps/portal/prisma/seed-companies.ts`: read source data (CSV/JSON), iterate and create records, handle errors gracefully.