# Singh Careers

The public careers site for the Singh family of brands — Waltonwood Senior Living, Singh Apartments, Singh Golf, Oakland Health, and the corporate Home Office. Built with Next.js (App Router) and TypeScript, it presents brand/career pages, a searchable job board, employee stories and reviews, blog content, and an internal admin panel (`/scs-admin`) for managing that content.

## Tech Stack

- **Framework:** Next.js 16 (App Router, React 19, TypeScript)
- **Styling:** Tailwind CSS v4
- **UI primitives:** Radix UI, `lucide-react` icons, `embla-carousel-react`, `recharts`
- **Forms/validation:** `react-hook-form` + `zod`
- **HTTP:** Axios (`lib/api.ts`) against an external REST API
- **Linting/formatting:** ESLint (`eslint-config-next`, `eslint-config-prettier`)

## Getting Started

### Prerequisites

- Node.js 20+ and npm

### Install

```bash
npm install
```

### Environment variables

Create a `.env` (or `.env.local`) file in the project root:

```bash
NEXT_PUBLIC_API_BASE_URL=https://your-backend-host/api
```

This is the base URL for the backend API that powers job listings, blogs, career-group content, and the admin panel. Without it, any page that fetches live data (e.g. `/search-jobs`, `/[slug]` career-group pages) will fail to load its content.

### Run the dev server

```bash
npm run dev
```

The site runs at [http://localhost:3000](http://localhost:3000).

## Scripts

| Command | Description |
| --- | --- |
| `npm run dev` | Start the local dev server |
| `npm run build` | Production build (uses the Webpack compiler, not Turbopack) |
| `npm run start` | Start the production server on port 3000 |
| `npm run lint` | Run ESLint |
| `npm run lint:fix` | Run ESLint with automatic fixes |
| `npm run typecheck` | Type-check the project with `tsc --noEmit` |

## Project Structure

```
app/                      Route segments (Next.js App Router)
  [slug]/                 Generic CMS-driven career group page (fallback for brand pages)
  search-jobs/            Live job search UI (filters, pagination) against the API
  waltonwood-senior-living/  Waltonwood brand page + interactive US map + per-state pages
  singh-apartments/       Singh Apartments brand page
  singh-golf/             Singh Golf brand page
  oakland-health/         Oakland Health brand page
  home-office/            Home Office / corporate careers page
  reviews/                Full employee reviews listing
  stories/                Employee stories listing
  blogs/                  Blog listing + detail pages
  scs-admin/              Internal admin panel (auth-gated CMS for career groups, blogs, banners, etc.)
  category-page.tsx        Shared layout used by most brand/career pages
components/               Shared, reusable UI components
  ui/                     Low-level primitives (shadcn/radix-based)
lib/                      API client, data helpers, and static content (e.g. locations, reviews)
public/images/            Static image assets
```

### Notable shared pieces

- **`app/category-page.tsx`** — the layout most brand pages (Singh Apartments, Singh Golf, Oakland Health, Home Office) are built on: hero, company overview, department list, and an open-roles section, all driven by props.
- **`components/open-roles-section.tsx`** — reusable "Open Roles" job-card section used across brand pages.
- **`components/interactive-us-map.tsx`** — hover/click US map (state paths generated from Census `us-atlas` data, see `scripts/gen-us-map.cjs`) used on the Waltonwood page to surface communities by state.
- **`lib/api.ts`** — configured Axios client (auth token handling, error normalization) used by all data-fetching components/pages.

## Admin Panel

`/scs-admin` is a separate, authenticated section for managing site content (career groups, job categories, blogs, banners, contact submissions, users). It has its own login flow and is not linked from the public navigation.

## Deployment

```bash
npm run build
npm run start
```

Ensure `NEXT_PUBLIC_API_BASE_URL` is set in the deployment environment — it's required at build and runtime for any data-driven page.