Project Structure

Root Structure

hireable-monorepo/
├── apps/                     # Application workspaces
│   ├── web/                  # Next.js frontend
│   └── api/                  # Express backend
├── packages/                 # Shared packages
│   ├── shared/               # Types and utilities
│   ├── database/             # MongoDB models
│   ├── config/               # Shared configuration
│   └── ui/                   # Shared UI components
├── .github/                  # GitHub Actions workflows
├── .husky/                   # Git hooks
├── package.json              # Root package configuration
├── turbo.json                # TurboRepo configuration
├── eslint.config.mjs         # ESLint configuration
└── .env.example              # Environment template

Frontend App (`apps/web`)

apps/web/
├── src/
│   ├── app/                  # Next.js App Router
│   │   ├── (auth)/           # Auth route group
│   │   │   ├── login/
│   │   │   ├── signup/
│   │   │   ├── forgot-password/
│   │   │   └── reset-password/
│   │   ├── api/              # API routes
│   │   ├── privacy-policy/
│   │   ├── globals.css       # Global styles
│   │   ├── layout.tsx        # Root layout
│   │   ├── page.tsx          # Home page
│   │   ├── not-found.tsx     # 404 page
│   │   ├── manifest.ts       # PWA manifest
│   │   ├── robots.ts         # SEO robots
│   │   └── sitemap.ts        # SEO sitemap
│   │
│   ├── features/             # Feature slices
│   │   ├── auth/             # Authentication feature
│   │   │   ├── services/
│   │   │   ├── types/
│   │   │   └── index.ts
│   │   ├── waitlist/         # Waitlist feature
│   │   │   ├── hooks/
│   │   │   ├── services/
│   │   │   ├── types/
│   │   │   └── index.ts
│   │   └── screens/          # Page implementations
│   │       ├── LoginPage/
│   │       ├── SignupPage/
│   │       ├── WaitlistPage/
│   │       └── ...
│   │
│   ├── components/           # Shared UI components
│   │   ├── ui/               # Primitive components
│   │   │   ├── accordion.tsx
│   │   │   ├── avatar.tsx
│   │   │   ├── badge.tsx
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── input.tsx
│   │   │   ├── select.tsx
│   │   │   └── ...
│   │   ├── AuthBackground/
│   │   ├── ErrorBoundary/
│   │   ├── ParticleBackground/
│   │   └── Navbar.tsx
│   │
│   ├── hooks/                # Global custom hooks
│   │   ├── useApi.ts
│   │   ├── useAuth.ts
│   │   ├── useDebounce.ts
│   │   ├── useForm.ts
│   │   ├── useMediaQuery.ts
│   │   └── index.ts
│   │
│   ├── services/             # API client layer
│   │   ├── api/
│   │   │   ├── client.ts
│   │   │   └── endpoints.ts
│   │   └── index.ts
│   │
│   ├── providers/            # React Context providers
│   │   ├── AuthContext.tsx
│   │   ├── RoleContext.tsx
│   │   └── index.ts
│   │
│   └── lib/                  # Utilities and helpers
│       ├── auth/
│       │   ├── roles.ts      # RBAC definitions
│       │   ├── guards.tsx    # Permission guards
│       │   └── index.ts
│       ├── constants.ts
│       ├── env.ts
│       ├── security.ts
│       └── utils.ts
│
├── public/                   # Static assets
│   ├── backgrounds/
│   ├── icons/
│   ├── images/
│   └── logos/
│
├── e2e/                      # Playwright E2E tests
├── next.config.ts
├── tailwind.config.js
├── vitest.config.ts
└── package.json

Backend App (`apps/api`)

apps/api/
├── src/
│   ├── app.ts                # Application entry point
│   ├── controllers/          # Request handlers
│   │   └── waitlist.controller.ts
│   └── routes/               # Route definitions
│       └── waitlist.routes.ts
├── dist/                     # Compiled output
├── vercel.json               # Vercel deployment config
├── tsconfig.json
└── package.json

Shared Package (`packages/shared`)

packages/shared/
├── src/
│   ├── types/
│   │   ├── api.ts            # API request/response types
│   │   ├── domain/
│   │   │   └── user.ts       # Domain models
│   │   └── index.ts
│   ├── utils/
│   │   └── validator.ts      # Security validation
│   └── index.ts
├── dist/                     # Compiled output
├── tsconfig.json
└── package.json

Usage

// Import types
import type { User, LoginRequest } from "@hireable/shared/types/api";
 
// Import validators
import { SecurityValidator } from "@hireable/shared";

Database Package (`packages/database`)

packages/database/
├── src/
│   ├── db/
│   │   └── dbConnection.ts   # MongoDB connection
│   ├── models/
│   │   ├── employer.ts       # Employer model
│   │   ├── talent.ts         # Talent model
│   │   └── index.ts
│   └── index.ts
├── dist/                     # Compiled output
├── tsconfig.json
└── package.json

Usage

// Import database utilities
import { dbConnect, Employer, Talent } from "@hireable/database";

Naming Conventions

Type	Convention	Example
Components	PascalCase	`LoginPage.tsx`, `UserCard.tsx`
Hooks	camelCase with `use` prefix	`useAuth.ts`, `useForm.ts`
Services	camelCase with `.service` suffix	`auth.service.ts`
Types	PascalCase	`User.ts`, `LoginRequest`
Utilities	camelCase	`validator.ts`, `utils.ts`
Routes	kebab-case	`waitlist.routes.ts`

Barrel Exports

Every directory should have an index.ts for clean imports:

// features/auth/index.ts
export { authService } from "./services/auth.service";
export type { LoginRequest, LoginResponse } from "./types";

On this page