Frontend/steven/sign in

.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx next:*)",
+      "Bash(npm run:*)",
+      "Bash(node -e \"console.log\\(require\\('eslint-config-next/package.json'\\).version\\)\")",
+      "Bash(npx tsc:*)"
+    ]
+  }
+}

DESIGN.md

@@ -0,0 +1,93 @@
+# Design System Document: High-End Editorial Job Board
+
+## 1. Overview & Creative North Star
+**Creative North Star: "The Architectural Curator"**
+
+This design system rejects the "commodity" look of traditional job boards. It is built on the principle of **Architectural Curation**—treating job listings not as database entries, but as editorial features. By utilizing high-contrast typography, intentional asymmetry, and deep tonal layering, we create a workspace that feels authoritative, premium, and calm. 
+
+The system breaks the "template" aesthetic by favoring breathing room over density and using light as a functional tool rather than just an aesthetic choice. It is designed for the high-performing professional who values efficiency through visual clarity.
+
+---
+
+## 2. Colors
+Our palette is anchored in deep obsidian tones, punctuated by a high-energy primary yellow that acts as a beacon for action.
+
+*   **Primary Palette:** 
+    *   `primary`: #ffdd73 (High-energy yellow for core actions)
+    *   `on-primary`: #624e00 (Deep contrast for legibility on yellow)
+    *   `background`: #0e0e0e (Deep charcoal/black foundation)
+*   **Surface Hierarchy:** 
+    *   `surface-container-low`: #131313
+    *   `surface-container`: #1a1a1a
+    *   `surface-container-high`: #20201f
+*   **Status Indicators:**
+    *   `Applied`: Blue (via `tertiary` logic)
+    *   `Accepted`: Green
+    *   `Error`: #ff7351 (`error`)
+
+### The "No-Line" Rule
+Standard 1px borders are strictly prohibited for sectioning. Structural boundaries must be achieved through **Background Color Shifts**. For example, a `surface-container-high` card sits on a `surface-container-low` background. This creates a "shadow-less" depth that feels modern and integrated.
+
+### The "Glass & Gradient" Rule
+To elevate the experience, floating headers or navigation bars should use **Glassmorphism**. Use semi-transparent surface colors with a `backdrop-blur(20px)`. Main CTAs should utilize a subtle linear gradient from `primary` to `primary-dim` to provide a tactile, "lit-from-within" feel.
+
+---
+
+## 3. Typography
+We use a dual-typeface system to balance editorial authority with functional utility.
+
+*   **Display & Headlines (Manrope):** These are the "Editorial" voice. Use `display-lg` (3.5rem) for hero sections and `headline-md` (1.75rem) for section titles. Bold weights are mandatory for headers to maintain the high-contrast signature look.
+*   **Body & Labels (Inter):** These are the "Functional" voice. `body-md` (0.875rem) is the workhorse for job descriptions. Inter’s high x-height ensures maximum legibility against dark backgrounds.
+*   **Hierarchy as Identity:** Use `title-lg` (1.375rem) for job titles in lists. The scale jump between headlines and body text is intentional—it mimics luxury magazine layouts, guiding the eye to the most critical information first.
+
+---
+
+## 4. Elevation & Depth
+Depth in this system is a result of light physics, not artificial decoration.
+
+*   **Tonal Layering:** Always stack from darkest to lightest.
+    *   *Level 0:* `surface` (Main background)
+    *   *Level 1:* `surface-container-low` (Content sections)
+    *   *Level 2:* `surface-container-highest` (Interactive cards/modals)
+*   **Ambient Shadows:** If an element must "float" (like a Toast or Floating Action Button), use a shadow with a blur radius of at least `24px` and an opacity no higher than `8%`. Use a tinted shadow (blending `on-surface` with the background) to avoid a "dirty" grey appearance.
+*   **The "Ghost Border" Fallback:** If high-density data requires containment, use a **Ghost Border**. Apply `outline-variant` at 15% opacity. It should be felt, not seen.
+
+---
+
+## 5. Components
+
+### Buttons
+*   **Primary:** Solid `primary` fill, `on-primary` text. Radius: `md` (0.75rem). Bold `label-md` text.
+*   **Secondary:** Ghost style. `outline` border (20% opacity) with `on-surface` text.
+*   **Glass Action:** Semi-transparent `surface-bright` with backdrop blur for secondary utility actions.
+
+### Chips (Status & Tags)
+*   **Status Chips:** Use a muted version of the status color for the background (e.g., 20% opacity) with a high-contrast and solid text.
+*   **Filter Chips:** Use `surface-variant` with a radius of `full` (9999px) for a soft, pill-shaped aesthetic.
+
+### Cards & Lists
+*   **Rule:** Forbid the use of divider lines.
+*   **Separation:** Use `spacing-8` (2rem) of vertical white space or shift the `surface-container` tier. 
+*   **Interactive Cards:** On hover, a card should transition from `surface-container-low` to `surface-container-high`.
+
+### Input Fields
+*   **Style:** Minimalist. No bottom border. Use a `surface-container-highest` background with a subtle radius of `sm` (0.25rem). 
+*   **Active State:** The border should only appear on focus, using a 1px `primary` line.
+
+### Job Specific: "Quick-Action" Bar
+A specialized component for the job board—a sticky footer or side-rail for "Apply Now" and "Save" actions using the **Glassmorphism** rule to keep the user grounded in the content while providing immediate utility.
+
+---
+
+## 6. Do's and Don'ts
+
+### Do:
+*   **Do** use asymmetrical spacing to create visual interest (e.g., more padding on the left than the right in editorial headers).
+*   **Do** use `primary` yellow sparingly. It is a "laser pointer," not a bucket of paint.
+*   **Do** ensure all text on dark backgrounds meets a minimum 4.5:1 contrast ratio for accessibility.
+
+### Don't:
+*   **Don't** use 100% opaque, high-contrast borders. They "trap" the content and break the fluid editorial feel.
+*   **Don't** use standard "Drop Shadows" (0, 2, 4, 0). They look dated and cheap.
+*   **Don't** use dividers between list items. Trust the white space and background shifts to do the work.
+*   **Don't** mix the font roles. Never use Manrope for body copy; it’s too "loud" for long-form reading.

frontend/.env.example

@@ -0,0 +1,11 @@
+MONGODB_URI=
+MONGODB_DATABASE=default
+
+# Auth.js (NextAuth)
+NEXTAUTH_SECRET=
+NEXTAUTH_URL=http://localhost:3000
+
+# OAuth providers
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+

frontend/eslint.config.mjs

@@ -1,16 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import coreWebVitals from "eslint-config-next/core-web-vitals";
+import typescript from "eslint-config-next/typescript";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
+const eslintConfig = [...coreWebVitals, ...typescript];
 
 export default eslintConfig;

frontend/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

frontend/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  output: "standalone",
+  serverExternalPackages: ["mongodb", "pino", "pino-pretty"],
 };
 
 export default nextConfig;