Configuration

Environment Variables

The project uses environment variables for configuration. Copy .env.example to .env.local and configure the values.

Application Settings

# Application URLs
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_NAME="Hireable PH"
 
# Backend API Configuration
NEXT_PUBLIC_API_URL=http://localhost:3001/api
NEXT_PUBLIC_API_TIMEOUT=30000

Database Configuration

# MongoDB Connection
MONGODB_URI=mongodb://localhost:27017/hireable
 
# For MongoDB Atlas (production)
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/hireable

Authentication (Optional)

# JWT Configuration
JWT_SECRET=your-jwt-secret-key-here
JWT_EXPIRES_IN=7d
REFRESH_TOKEN_EXPIRES_IN=30d

CORS Configuration

# Comma-separated origins for production
CORS_ALLOWED_ORIGINS=https://hireable.ph,https://www.hireable.ph

Optional Services

# Analytics
NEXT_PUBLIC_GA_ID=
 
# Error Tracking
NEXT_PUBLIC_SENTRY_DSN=
 
# Payment Processing
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 
# Feature Flags
NEXT_PUBLIC_ENABLE_FEATURE_X=false

TurboRepo Configuration

The turbo.json file configures build orchestration:

{
  "$schema": "https://turbo.build/schema.json",
  "ui": "tui",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "test": {
      "dependsOn": ["^build"],
      "outputs": ["coverage/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

Task Dependencies

build - Depends on all upstream packages being built first
lint - Runs linting with dependency awareness
test - Requires build to complete first
dev - Runs without caching for live development

TypeScript Configuration

Each app and package has its own tsconfig.json with strict mode enabled:

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true
  }
}

Path Aliases

The web app uses path aliases for clean imports:

// Instead of relative imports
import { Button } from "../../../components/ui/button";
 
// Use path aliases
import { Button } from "@/components/ui/button";

ESLint Configuration

The project uses ESLint 9 with flat config (eslint.config.mjs):

Next.js core web vitals rules
TypeScript-specific rules
Accessibility (jsx-a11y) rules
Tailwind CSS class sorting

Prettier Configuration

Code formatting is handled by Prettier (.prettierrc.json):

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-tailwindcss"]
}

Git Hooks

Husky is configured for pre-commit hooks:

# .husky/pre-commit
npm run lint-staged

Lint-staged runs on staged files:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,css,md}": ["prettier --write"]
  }
}

Next Steps

Project Structure - Understand the codebase organization
Frontend Architecture - Learn about the frontend patterns

On this page