[{"_1":2,"_108":-5,"_109":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":-5,"_7":-5,"_8":9},"userId","userEmail","displayName","isAdmin",false,"routes/projects",{"_12":13},"projects",[14],{"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_36":37,"_55":56,"_101":102,"_103":102,"_104":105,"_107":73},"id","TDC_UQBA","tier","BEGINNER","tier_level","LVL_01","status","OPEN","title","hello world","tagline","hellow","description","# CLAUDE.md\n\n> Authoritative reference for Claude Code when working in this repository. Read fully before making any changes.\n\n---\n\n## Project Overview\n\nA **React Router 7 (SSR, `ssr: true`)** application built with the **Dazl** framework. Developer program site with authentication, project management, and a full admin dashboard. Backend is **Supabase** (Auth + Database).\n\n---\n\n## Commands\n\n```bash\nnpm run dev # Start dev server with HMR\nnpm run build # Production build\nnpm run start # Run production server (react-router-serve)\nnpm run typecheck # Type-check (react-router typegen + tsc)\n```\n\nNo test runner is configured.\n\n---\n\n## Tech Stack\n\n| Layer | Technology |\n|---|---|\n| UI Framework | React 19 |\n| Language | TypeScript |\n| Routing | React Router v7 — SSR, framework mode **only** |\n| Styling | CSS Modules + CSS custom properties (NO Tailwind) |\n| Form Handling | React Hook Form |\n| UI Primitives | Radix UI |\n| Icons | lucide-react |\n| Database / Auth | Supabase (`@supabase/supabase-js`) |\n| Build Tool | Vite |\n| Package Manager | npm / Node.js |\n\n---\n\n## Directory Structure\n\n```\napp/\n blocks/ # Reusable UI blocks grouped by page context\n │ # (home/*, projects/*, admin/*, __global/*)\n components/ # Shared, generic React components\n │ └── component-name/\n │ ├── component-name.tsx\n │ └── component-name.module.css\n data/ # Static fixture data — no business logic\n dev/ # Dev-time utilities only\n hooks/ # Client-side React hooks (one hook per file)\n lib/ # Low-level libraries\n │ ├── supabase.server.ts # Supabase server client — NEVER import in client\n │ └── database.types.ts # Generated DB types\n routes/ # Route modules (one file per route)\n services/ # Server-only business logic (*.server.ts)\n styles/ # Site-wide CSS\n │ ├── theme.css # Design tokens — single source of truth\n │ ├── global.css # Global defaults (never duplicate reset.css)\n │ └── reset.css # CSS reset — READ before editing global.css\n types/ # Shared TypeScript types\n root.tsx # App root — font links, NavigationHeader, SystemStatusFooter\n routes.ts # Route config — edit LAST, after all other changes\n```\n\n---\n\n## Code Patterns & Practices\n\n- **One class or component per file.** No exceptions.\n- **kebab-case** for all file and folder names.\n- **TypeScript** everywhere. Avoid `any`; comment it if unavoidable.\n- Every custom React component **must** have a co-located `.module.css` file, even if initially empty.\n- Hooks live in `app/hooks/`. Never define reusable hooks inside component files.\n- Use React Hook Form for all form state.\n- Use Radix UI primitives for accessible interactive elements (dialogs, dropdowns, tooltips, etc.).\n- Before importing any `lucide-react` icon, verify it is a named export. Fall back to `Square` if it isn't.\n\n### New Component Checklist\n\n```\napp/components/my-widget/\n├── my-widget.tsx ✅ Component logic\n└── my-widget.module.css ✅ Always create — even if empty at first\n```\n\n---\n\n## Routing\n\nAll routes are defined programmatically in `app/routes.ts` using `index`, `route`, `layout`, and `prefix` helpers.\n\n### Current Route Map\n\n- **Public / Auth**: `/` (home), `/login`, `/register`, `/logout`, `/onboarding`, `/profile`, `/projects`, `/projects/:id`, `/apply-action`\n- **Admin** (`/admin/*`): shared layout at `routes/admin/layout.tsx`. Every admin loader must call `requireAdmin` from `services/admin.server.ts`.\n\n### Root Layout\n\n`root.tsx` wraps everything with `` and `` **except** admin pages, which render raw `{children}` via their own layout.\n\n### Route Module Pattern\n\n```tsx\n// app/routes/example.tsx\nimport type { Route } from \"./+types/example\";\nimport { myService } from \"~/services/my-service.server\";\n\nexport async function loader({ params, request }: Route.LoaderArgs) {\n return { data: await myService.getData(params.id) };\n}\n\nexport async function action({ request }: Route.ActionArgs) {\n const formData = await request.formData();\n return await myService.handleAction(formData);\n}\n\nexport default function ExamplePage({ loaderData }: Route.ComponentProps) {\n return

{loaderData.data}

;\n}\n```\n\n### Navigation API\n\n| Use case | API |\n|---|---|\n| Standard links | `` |\n| Active-state nav links | `` |\n| Form submission / POST | `

` |\n| Programmatic (non-user) | `useNavigate()` — use sparingly |\n| Inside loaders / actions | `redirect(\"/path\")` |\n\n### `routes.ts` Rule\n\nUpdate `app/routes.ts` **only after** all route module files, components, and services are created and stable.\n\n---\n\n## Authentication\n\nSession managed via a single HttpOnly cookie (`sb_session`) containing base64-encoded JSON `{ access_token, refresh_token }`. No external cookie library — raw cookie parsing only.\n\n| File | Responsibility |\n|---|---|\n| `app/lib/supabase.server.ts` | Supabase server client with cookie-based session. Never import in client components. |\n| `app/services/auth.server.ts` | `loginUser`, `registerUser`, `logoutUser`, `requireAuth`, `sanitizeAuthError` |\n| `app/services/admin.server.ts` | `requireAdmin`, `writeAuditLog`, `getDashboardStats`, `getAllApplications`, `getAllMembers`, `updateApplicationStatus`, `adjustMemberXP`, `toggleBanMember`, `toggleAdminStatus` |\n\n**Admin check** (in `root.tsx` loader): hardcoded founder email `amogh.vk.2005@gmail.com` **or** `profiles.is_admin === true` in DB.\n\n---\n\n## Database & Supabase\n\n### Environment Variables\n\n```\nSUPABASE_PROJECT_URL — e.g., https://your-project-id.supabase.co\nSUPABASE_API_KEY — API key for authentication\nSUPABASE_ANON_KEY — Anon key (alias)\n```\n\n### Layered Architecture (Mandatory)\n\n```\nRoute Loader / Action\n ↓ calls\nService function (app/services/*.server.ts)\n ↓ calls\nSupabase client (app/lib/supabase.server.ts)\n ↓ queries\nDatabase\n```\n\n**Hard rules:**\n\n1. Route loaders and actions call service functions only — never query Supabase directly.\n2. UI components **never** import or call anything from `supabase.server.ts` or any `*.server.ts` file.\n3. All database operations are **server-side only**.\n4. Use TypeScript types from `app/lib/database.types.ts` wherever available.\n5. **Always verify table names, column names, and types against the actual schema.** Never guess.\n\n### Service Pattern Example\n\n```ts\n// app/services/user-service.server.ts\nimport { createSupabaseServerClient } from \"~/lib/supabase.server\";\nimport type { Database } from \"~/lib/database.types\";\n\nexport async function getUserById(request: Request, id: string) {\n const supabase = createSupabaseServerClient(request);\n const { data, error } = await supabase\n .from(\"users\")\n .select(\"*\")\n .eq(\"id\", id)\n .single();\n if (error) throw new Error(error.message);\n return data;\n}\n```\n\n---\n\n## Design System\n\nDark-first. All tokens live in `app/styles/theme.css`. **Never hardcode colors, fonts, or spacing in component CSS.**\n\n### Color Tokens\n\n#### Surface (Backgrounds)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-surface` | `#000000` | Page background — deepest layer |\n| `--color-surface-elevated` | `#0d0d0d` | Slightly elevated surfaces |\n| `--color-surface-container-lowest` | `#0a0a0a` | Lowest container |\n| `--color-surface-container-low` | `#111111` | Low-priority container |\n| `--color-surface-container` | `#1a1a1a` | Default card / panel |\n| `--color-surface-container-high` | `#222222` | Higher-emphasis container |\n| `--color-surface-container-highest` | `#2a2a2a` | Topmost container layer |\n\n#### On-Surface (Text & Icons)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-on-surface` | `#f0f0ee` | Primary text and icons |\n| `--color-on-surface-muted` | `#7a7a78` | Secondary / supporting text |\n| `--color-on-surface-subtle` | `#4a4a48` | Placeholder, disabled states |\n\n#### Primary & Accent\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-primary` | `#f0f0ee` | Primary interactive elements, CTA labels |\n| `--color-primary-on` | `#000000` | Text/icons on primary background |\n| `--color-accent` | `#ffffff` | Pure white highlight accent |\n\n#### Borders\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-border` | `#2a2a2a` | Default borders, dividers |\n| `--color-border-interactive` | `#f0f0ee` | Focused / active element borders |\n\n### Typography\n\n| Token | Font | Usage |\n|---|---|---|\n| `--family-display` | Space Grotesk | Headings, hero text, large display |\n| `--family-body` | Space Grotesk | Body copy, UI labels |\n| `--family-mono` | JetBrains Mono | Code, technical labels, monospace data |\n| `--family-pixel` | VT323 | Decorative retro/pixel accents — use sparingly |\n\n### CSS Variable Naming Conventions\n\n| Category | Pattern | Example |\n|---|---|---|\n| Color | `--color-{semantic}-{*}` | `--color-primary`, `--color-on-surface-muted` |\n| Font Family | `--family-{*}` | `--family-display`, `--family-mono` |\n| Spacing | `--space-{*}` | `--space-4`, `--space-8` |\n| Font Size | `--text-{*}` | `--text-sm`, `--text-xl` |\n| Font shorthand | `--font-{*}` | `--font-heading` |\n| Border Radius | `--radius-{*}` | `--radius-md` |\n| Shadow | `--shadow-{*}` / `--inner-shadow-{*}` | `--shadow-lg` |\n\n> ✅ Semantic names only. `--color-primary` ✓ — `--color-blue` ✗\n\n### Full `theme.css` Definition\n\n```css\n/* app/styles/theme.css */\n:root {\n /* Surface */\n --color-surface: #000000;\n --color-surface-elevated: #0d0d0d;\n --color-surface-container-lowest: #0a0a0a;\n --color-surface-container-low: #111111;\n --color-surface-container: #1a1a1a;\n --color-surface-container-high: #222222;\n --color-surface-container-highest: #2a2a2a;\n\n /* On Surface */\n --color-on-surface: #f0f0ee;\n --color-on-surface-muted: #7a7a78;\n --color-on-surface-subtle: #4a4a48;\n\n /* Primary & Accent */\n --color-primary: #f0f0ee;\n --color-primary-on: #000000;\n --color-accent: #ffffff;\n\n /* Border */\n --color-border: #2a2a2a;\n --color-border-interactive: #f0f0ee;\n\n /* Typography */\n --family-display: 'Space Grotesk', sans-serif;\n --family-body: 'Space Grotesk', sans-serif;\n --family-mono: 'JetBrains Mono', monospace;\n --family-pixel: 'VT323', monospace;\n\n /* Spacing */\n --space-1: 4px; --space-2: 8px;\n --space-3: 12px; --space-4: 16px;\n --space-5: 20px; --space-6: 24px;\n --space-8: 32px; --space-10: 40px;\n --space-12: 48px; --space-16: 64px;\n\n /* Border Radius */\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-full: 9999px;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);\n}\n```\n\n---\n\n## Styling Rules\n\n- Every component has a co-located `.module.css`. Import it in the component — missing import = no styles applied.\n- Use `styles.className` — never inline styles or global selectors in module files.\n- `reset.css` is **read-only context**. Read it before editing `global.css` to avoid duplicating rules.\n- `global.css` — global defaults only. No component styles here.\n- `theme.css` — tokens only. No component or layout styles here.\n- Light/dark switching: **dark only by default**. Add `@dazl/color-scheme` only if explicitly requested.\n- Fonts loaded via `links` export in `root.tsx`. **Never** use CSS `@import` for fonts.\n\n### Font Loading (`root.tsx`)\n\n```tsx\nexport const links: LinksFunction = () => [\n { rel: \"preconnect\", href: \"https://fonts.googleapis.com\" },\n { rel: \"preconnect\", href: \"https://fonts.gstatic.com\", crossOrigin: \"anonymous\" },\n {\n rel: \"stylesheet\",\n href: \"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@400;500;700&family=VT323&display=swap\",\n },\n];\n```\n\n### CSS Module Composition Example\n\n```css\n/* my-component.module.css */\n.container {\n background: var(--color-surface-container);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n padding: var(--space-4);\n font-family: var(--family-body);\n color: var(--color-on-surface);\n}\n.container:focus-within {\n border-color: var(--color-border-interactive);\n}\n.label {\n color: var(--color-on-surface-muted);\n font-family: var(--family-mono);\n font-size: 0.75rem;\n}\n```\n\n---\n\n## Forbidden Technologies & Files\n\n### Never Use\n\n| ❌ Forbidden | Reason |\n|---|---|\n| Tailwind CSS | Do not use, mention, install, or reference — ever |\n| CSS `@import` for fonts | Use `links` export in `root.tsx` |\n| React Router v5 / v6 APIs | v7 framework mode only |\n| Direct Supabase queries in route components | Use service functions |\n| Any `*.server.ts` import in client components | Server-only modules |\n| External cookie libraries | Raw cookie parsing only for `sb_session` |\n\n### Read-Only (Context Only)\n\n| File | Notes |\n|---|---|\n| `package.json` | Check available packages/scripts. Use install tool to add deps. |\n| `reset.css` | Read before editing `global.css`. |\n\n### Strictly Off-Limits (No Read or Write)\n\n```\n.gitignore\npackage-lock.json\ntsconfig.json\nreact-router.config.ts\n.github/\n```\n\n---\n\n## Feature Development Checklist\n\n### New Page / Route\n\n- [ ] Create route module in `app/routes/` (kebab-case filename)\n- [ ] Write loader calling a service function (never raw DB)\n- [ ] Write action if form POST is needed (via service function)\n- [ ] Add `ErrorBoundary` export if the route can fail\n- [ ] Admin routes: call `requireAdmin` at the top of the loader\n- [ ] Update `app/routes.ts` **last**\n\n### New Component / Block\n\n- [ ] `component-name.tsx` + `component-name.module.css` (always both)\n- [ ] Import the CSS module in the component\n- [ ] Use only `var(--color-*)`, `var(--family-*)`, `var(--space-*)` — no hardcoded values\n- [ ] Use Radix UI for accessible interactive elements\n- [ ] Verify lucide-react icons exist before importing\n\n### New Database Operation\n\n- [ ] Verify table name, column names, and types in schema first\n- [ ] Add to the appropriate `app/services/*.server.ts` file\n- [ ] Call from a loader or action only — never from a component\n- [ ] Use/extend TypeScript types from `database.types.ts`\n\n---\n\n## Quick Reference\n\n```\nNew component? → component-name.tsx + component-name.module.css (always both)\nNew page? → app/routes/page-name.tsx → update routes.ts LAST\nAdmin route? → call requireAdmin() at top of loader\nDB query? → app/services/*.server.ts only, called from loaders/actions\nColor / Font? → var(--color-*) / var(--family-*)\nIcon? → verify named export in lucide-react first, else use Square\nFont loading? → links export in root.tsx — never @import\nTailwind? → NEVER\nCookie library? → NEVER — raw parsing only\nReact Router ver? → v7 framework mode ONLY\n```","tech_stack",[31],{"_32":33,"_34":35},"label","fastapi","value","python","timeline",[38,42,46,50],{"_32":39,"_23":40,"_21":41,"_27":40},"week-1","plan","IN_PROGRESS",{"_32":43,"_23":44,"_21":45,"_27":28},"week-2","dxicute","PENDING",{"_32":47,"_23":48,"_21":45,"_27":49},"week-3","test","# CLAUDE.md\n\n> Authoritative reference for Claude Code when working in this repository. Read fully before making any changes.\n\n---\n\n## Project Overview\n\nA **React Router 7 (SSR, `ssr: true`)** application built with the **Dazl** framework. Developer program site with authentication, project management, and a full admin dashboard. Backend is **Supabase** (Auth + Database).\n\n---\n\n## Commands\n\n```bash\nnpm run dev # Start dev server with HMR\nnpm run build # Production build\nnpm run start # Run production server (react-router-serve)\nnpm run typecheck # Type-check (react-router typegen + tsc)\n```\n\nNo test runner is configured.\n\n---\n\n## Tech Stack\n\n| Layer | Technology |\n|---|---|\n| UI Framework | React 19 |\n| Language | TypeScript |\n| Routing | React Router v7 — SSR, framework mode **only** |\n| Styling | CSS Modules + CSS custom properties (NO Tailwind) |\n| Form Handling | React Hook Form |\n| UI Primitives | Radix UI |\n| Icons | lucide-react |\n| Database / Auth | Supabase (`@supabase/supabase-js`) |\n| Build Tool | Vite |\n| Package Manager | npm / Node.js |\n\n---\n\n## Directory Structure\n\n```\napp/\n blocks/ # Reusable UI blocks grouped by page context\n │ # (home/*, projects/*, admin/*, __global/*)\n components/ # Shared, generic React components\n │ └── component-name/\n │ ├── component-name.tsx\n │ └── component-name.module.css\n data/ # Static fixture data — no business logic\n dev/ # Dev-time utilities only\n hooks/ # Client-side React hooks (one hook per file)\n lib/ # Low-level libraries\n │ ├── supabase.server.ts # Supabase server client — NEVER import in client\n │ └── database.types.ts # Generated DB types\n routes/ # Route modules (one file per route)\n services/ # Server-only business logic (*.server.ts)\n styles/ # Site-wide CSS\n │ ├── theme.css # Design tokens — single source of truth\n │ ├── global.css # Global defaults (never duplicate reset.css)\n │ └── reset.css # CSS reset — READ before editing global.css\n types/ # Shared TypeScript types\n root.tsx # App root — font links, NavigationHeader, SystemStatusFooter\n routes.ts # Route config — edit LAST, after all other changes\n```\n\n---\n\n## Code Patterns & Practices\n\n- **One class or component per file.** No exceptions.\n- **kebab-case** for all file and folder names.\n- **TypeScript** everywhere. Avoid `any`; comment it if unavoidable.\n- Every custom React component **must** have a co-located `.module.css` file, even if initially empty.\n- Hooks live in `app/hooks/`. Never define reusable hooks inside component files.\n- Use React Hook Form for all form state.\n- Use Radix UI primitives for accessible interactive elements (dialogs, dropdowns, tooltips, etc.).\n- Before importing any `lucide-react` icon, verify it is a named export. Fall back to `Square` if it isn't.\n\n### New Component Checklist\n\n```\napp/components/my-widget/\n├── my-widget.tsx ✅ Component logic\n└── my-widget.module.css ✅ Always create — even if empty at first\n```\n\n---\n\n## Routing\n\nAll routes are defined programmatically in `app/routes.ts` using `index`, `route`, `layout`, and `prefix` helpers.\n\n### Current Route Map\n\n- **Public / Auth**: `/` (home), `/login`, `/register`, `/logout`, `/onboarding`, `/profile`, `/projects`, `/projects/:id`, `/apply-action`\n- **Admin** (`/admin/*`): shared layout at `routes/admin/layout.tsx`. Every admin loader must call `requireAdmin` from `services/admin.server.ts`.\n\n### Root Layout\n\n`root.tsx` wraps everything with `` and `` **except** admin pages, which render raw `{children}` via their own layout.\n\n### Route Module Pattern\n\n```tsx\n// app/routes/example.tsx\nimport type { Route } from \"./+types/example\";\nimport { myService } from \"~/services/my-service.server\";\n\nexport async function loader({ params, request }: Route.LoaderArgs) {\n return { data: await myService.getData(params.id) };\n}\n\nexport async function action({ request }: Route.ActionArgs) {\n const formData = await request.formData();\n return await myService.handleAction(formData);\n}\n\nexport default function ExamplePage({ loaderData }: Route.ComponentProps) {\n return

{loaderData.data}

;\n}\n```\n\n### Navigation API\n\n| Use case | API |\n|---|---|\n| Standard links | `` |\n| Active-state nav links | `` |\n| Form submission / POST | `` |\n| Programmatic (non-user) | `useNavigate()` — use sparingly |\n| Inside loaders / actions | `redirect(\"/path\")` |\n\n### `routes.ts` Rule\n\nUpdate `app/routes.ts` **only after** all route module files, components, and services are created and stable.\n\n---\n\n## Authentication\n\nSession managed via a single HttpOnly cookie (`sb_session`) containing base64-encoded JSON `{ access_token, refresh_token }`. No external cookie library — raw cookie parsing only.\n\n| File | Responsibility |\n|---|---|\n| `app/lib/supabase.server.ts` | Supabase server client with cookie-based session. Never import in client components. |\n| `app/services/auth.server.ts` | `loginUser`, `registerUser`, `logoutUser`, `requireAuth`, `sanitizeAuthError` |\n| `app/services/admin.server.ts` | `requireAdmin`, `writeAuditLog`, `getDashboardStats`, `getAllApplications`, `getAllMembers`, `updateApplicationStatus`, `adjustMemberXP`, `toggleBanMember`, `toggleAdminStatus` |\n\n**Admin check** (in `root.tsx` loader): hardcoded founder email `amogh.vk.2005@gmail.com` **or** `profiles.is_admin === true` in DB.\n\n---\n\n## Database & Supabase\n\n### Environment Variables\n\n```\nSUPABASE_PROJECT_URL — e.g., https://your-project-id.supabase.co\nSUPABASE_API_KEY — API key for authentication\nSUPABASE_ANON_KEY — Anon key (alias)\n```\n\n### Layered Architecture (Mandatory)\n\n```\nRoute Loader / Action\n ↓ calls\nService function (app/services/*.server.ts)\n ↓ calls\nSupabase client (app/lib/supabase.server.ts)\n ↓ queries\nDatabase\n```\n\n**Hard rules:**\n\n1. Route loaders and actions call service functions only — never query Supabase directly.\n2. UI components **never** import or call anything from `supabase.server.ts` or any `*.server.ts` file.\n3. All database operations are **server-side only**.\n4. Use TypeScript types from `app/lib/database.types.ts` wherever available.\n5. **Always verify table names, column names, and types against the actual schema.** Never guess.\n\n### Service Pattern Example\n\n```ts\n// app/services/user-service.server.ts\nimport { createSupabaseServerClient } from \"~/lib/supabase.server\";\nimport type { Database } from \"~/lib/database.types\";\n\nexport async function getUserById(request: Request, id: string) {\n const supabase = createSupabaseServerClient(request);\n const { data, error } = await supabase\n .from(\"users\")\n .select(\"*\")\n .eq(\"id\", id)\n .single();\n if (error) throw new Error(error.message);\n return data;\n}\n```\n\n---\n\n## Design System\n\nDark-first. All tokens live in `app/styles/theme.css`. **Never hardcode colors, fonts, or spacing in component CSS.**\n\n### Color Tokens\n\n#### Surface (Backgrounds)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-surface` | `#000000` | Page background — deepest layer |\n| `--color-surface-elevated` | `#0d0d0d` | Slightly elevated surfaces |\n| `--color-surface-container-lowest` | `#0a0a0a` | Lowest container |\n| `--color-surface-container-low` | `#111111` | Low-priority container |\n| `--color-surface-container` | `#1a1a1a` | Default card / panel |\n| `--color-surface-container-high` | `#222222` | Higher-emphasis container |\n| `--color-surface-container-highest` | `#2a2a2a` | Topmost container layer |\n\n#### On-Surface (Text & Icons)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-on-surface` | `#f0f0ee` | Primary text and icons |\n| `--color-on-surface-muted` | `#7a7a78` | Secondary / supporting text |\n| `--color-on-surface-subtle` | `#4a4a48` | Placeholder, disabled states |\n\n#### Primary & Accent\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-primary` | `#f0f0ee` | Primary interactive elements, CTA labels |\n| `--color-primary-on` | `#000000` | Text/icons on primary background |\n| `--color-accent` | `#ffffff` | Pure white highlight accent |\n\n#### Borders\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-border` | `#2a2a2a` | Default borders, dividers |\n| `--color-border-interactive` | `#f0f0ee` | Focused / active element borders |\n\n### Typography\n\n| Token | Font | Usage |\n|---|---|---|\n| `--family-display` | Space Grotesk | Headings, hero text, large display |\n| `--family-body` | Space Grotesk | Body copy, UI labels |\n| `--family-mono` | JetBrains Mono | Code, technical labels, monospace data |\n| `--family-pixel` | VT323 | Decorative retro/pixel accents — use sparingly |\n\n### CSS Variable Naming Conventions\n\n| Category | Pattern | Example |\n|---|---|---|\n| Color | `--color-{semantic}-{*}` | `--color-primary`, `--color-on-surface-muted` |\n| Font Family | `--family-{*}` | `--family-display`, `--family-mono` |\n| Spacing | `--space-{*}` | `--space-4`, `--space-8` |\n| Font Size | `--text-{*}` | `--text-sm`, `--text-xl` |\n| Font shorthand | `--font-{*}` | `--font-heading` |\n| Border Radius | `--radius-{*}` | `--radius-md` |\n| Shadow | `--shadow-{*}` / `--inner-shadow-{*}` | `--shadow-lg` |\n\n> ✅ Semantic names only. `--color-primary` ✓ — `--color-blue` ✗\n\n### Full `theme.css` Definition\n\n```css\n/* app/styles/theme.css */\n:root {\n /* Surface */\n --color-surface: #000000;\n --color-surface-elevated: #0d0d0d;\n --color-surface-container-lowest: #0a0a0a;\n --color-surface-container-low: #111111;\n --color-surface-container: #1a1a1a;\n --color-surface-container-high: #222222;\n --color-surface-container-highest: #2a2a2a;\n\n /* On Surface */\n --color-on-surface: #f0f0ee;\n --color-on-surface-muted: #7a7a78;\n --color-on-surface-subtle: #4a4a48;\n\n /* Primary & Accent */\n --color-primary: #f0f0ee;\n --color-primary-on: #000000;\n --color-accent: #ffffff;\n\n /* Border */\n --color-border: #2a2a2a;\n --color-border-interactive: #f0f0ee;\n\n /* Typography */\n --family-display: 'Space Grotesk', sans-serif;\n --family-body: 'Space Grotesk', sans-serif;\n --family-mono: 'JetBrains Mono', monospace;\n --family-pixel: 'VT323', monospace;\n\n /* Spacing */\n --space-1: 4px; --space-2: 8px;\n --space-3: 12px; --space-4: 16px;\n --space-5: 20px; --space-6: 24px;\n --space-8: 32px; --space-10: 40px;\n --space-12: 48px; --space-16: 64px;\n\n /* Border Radius */\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-full: 9999px;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);\n}\n```\n\n---\n\n## Styling Rules\n\n- Every component has a co-located `.module.css`. Import it in the component — missing import = no styles applied.\n- Use `styles.className` — never inline styles or global selectors in module files.\n- `reset.css` is **read-only context**. Read it before editing `global.css` to avoid duplicating rules.\n- `global.css` — global defaults only. No component styles here.\n- `theme.css` — tokens only. No component or layout styles here.\n- Light/dark switching: **dark only by default**. Add `@dazl/color-scheme` only if explicitly requested.\n- Fonts loaded via `links` export in `root.tsx`. **Never** use CSS `@import` for fonts.\n\n### Font Loading (`root.tsx`)\n\n```tsx\nexport const links: LinksFunction = () => [\n { rel: \"preconnect\", href: \"https://fonts.googleapis.com\" },\n { rel: \"preconnect\", href: \"https://fonts.gstatic.com\", crossOrigin: \"anonymous\" },\n {\n rel: \"stylesheet\",\n href: \"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@400;500;700&family=VT323&display=swap\",\n },\n];\n```\n\n### CSS Module Composition Example\n\n```css\n/* my-component.module.css */\n.container {\n background: var(--color-surface-container);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n padding: var(--space-4);\n font-family: var(--family-body);\n color: var(--color-on-surface);\n}\n.container:focus-within {\n border-color: var(--color-border-interactive);\n}\n.label {\n color: var(--color-on-surface-muted);\n font-family: var(--family-mono);\n font-size: 0.75rem;\n}\n```\n\n---\n\n## Forbidden Technologies & Files\n\n### Never Use\n\n| ❌ Forbidden | Reason |\n|---|---|\n| Tailwind CSS | Do not use, mention, install, or reference — ever |\n| CSS `@import` for fonts | Use `links` export in `root.tsx` |\n| React Router v5 / v6 APIs | v7 framework mode only |\n| Direct Supabase queries in route components | Use service functions |\n| Any `*.server.ts` import in client components | Server-only modules |\n| External cookie libraries | Raw cookie parsing only for `sb_session` |\n\n### Read-Only (Context Only)\n\n| File | Notes |\n|---|---|\n| `package.json` | Check available packages/scripts. Use install tool to add deps. |\n| `reset.css` | Read before editing `global.css`. |\n\n### Strictly Off-Limits (No Read or Write)\n\n```\n.gitignore\npackage-lock.json\ntsconfig.json\nreact-router.config.ts\n.github/\n```\n\n---\n\n## Feature Development Checklist\n\n### New Page / Route\n\n- [ ] Create route module in `app/routes/` (kebab-case filename)\n- [ ] Write loader calling a service function (never raw DB)\n- [ ] Write action if form POST is needed (via service function)\n- [ ] Add `ErrorBoundary` export if the route can fail\n- [ ] Admin routes: call `requireAdmin` at the top of the loader\n- [ ] Update `app/routes.ts` **last**\n\n### New Component / Block\n\n- [ ] `component-name.tsx` + `component-name.module.css` (always both)\n- [ ] Import the CSS module in the component\n- [ ] Use only `var(--color-*)`, `var(--family-*)`, `var(--space-*)` — no hardcoded values\n- [ ] Use Radix UI for accessible interactive elements\n- [ ] Verify lucide-react icons exist before importing\n\n### New Database Operation\n\n- [ ] Verify table name, column names, and types in schema first\n- [ ] Add to the appropriate `app/services/*.server.ts` file\n- [ ] Call from a loader or action only — never from a component\n- [ ] Use/extend TypeScript types from `database.types.ts`\n\n---\n\n## Quick Reference\n\n```\nNew component? → component-name.tsx + component-name.module.css (always both)\nNew page? → app/routes/page-name.tsx → update routes.ts LAST\nAdmin route? → call requireAdmin() at top of loader\nDB query? → app/services/*.server.ts only, called from loaders/actions\nColor / Font? → var(--color-*) / var(--family-*)\nIcon? → verify named export in lucide-react first, else use Square\nFont loading? → links export in root.tsx — never @import\nTailwind? → NEVER\nCookie library? → NEVER — raw parsing only\nReact Router ver? → v7 framework mode ONLY\n```# CLAUDE.md\n\n> Authoritative reference for Claude Code when working in this repository. Read fully before making any changes.\n\n---\n\n## Project Overview\n\nA **React Router 7 (SSR, `ssr: true`)** application built with the **Dazl** framework. Developer program site with authentication, project management, and a full admin dashboard. Backend is **Supabase** (Auth + Database).\n\n---\n\n## Commands\n\n```bash\nnpm run dev # Start dev server with HMR\nnpm run build # Production build\nnpm run start # Run production server (react-router-serve)\nnpm run typecheck # Type-check (react-router typegen + tsc)\n```\n\nNo test runner is configured.\n\n---\n\n## Tech Stack\n\n| Layer | Technology |\n|---|---|\n| UI Framework | React 19 |\n| Language | TypeScript |\n| Routing | React Router v7 — SSR, framework mode **only** |\n| Styling | CSS Modules + CSS custom properties (NO Tailwind) |\n| Form Handling | React Hook Form |\n| UI Primitives | Radix UI |\n| Icons | lucide-react |\n| Database / Auth | Supabase (`@supabase/supabase-js`) |\n| Build Tool | Vite |\n| Package Manager | npm / Node.js |\n\n---\n\n## Directory Structure\n\n```\napp/\n blocks/ # Reusable UI blocks grouped by page context\n │ # (home/*, projects/*, admin/*, __global/*)\n components/ # Shared, generic React components\n │ └── component-name/\n │ ├── component-name.tsx\n │ └── component-name.module.css\n data/ # Static fixture data — no business logic\n dev/ # Dev-time utilities only\n hooks/ # Client-side React hooks (one hook per file)\n lib/ # Low-level libraries\n │ ├── supabase.server.ts # Supabase server client — NEVER import in client\n │ └── database.types.ts # Generated DB types\n routes/ # Route modules (one file per route)\n services/ # Server-only business logic (*.server.ts)\n styles/ # Site-wide CSS\n │ ├── theme.css # Design tokens — single source of truth\n │ ├── global.css # Global defaults (never duplicate reset.css)\n │ └── reset.css # CSS reset — READ before editing global.css\n types/ # Shared TypeScript types\n root.tsx # App root — font links, NavigationHeader, SystemStatusFooter\n routes.ts # Route config — edit LAST, after all other changes\n```\n\n---\n\n## Code Patterns & Practices\n\n- **One class or component per file.** No exceptions.\n- **kebab-case** for all file and folder names.\n- **TypeScript** everywhere. Avoid `any`; comment it if unavoidable.\n- Every custom React component **must** have a co-located `.module.css` file, even if initially empty.\n- Hooks live in `app/hooks/`. Never define reusable hooks inside component files.\n- Use React Hook Form for all form state.\n- Use Radix UI primitives for accessible interactive elements (dialogs, dropdowns, tooltips, etc.).\n- Before importing any `lucide-react` icon, verify it is a named export. Fall back to `Square` if it isn't.\n\n### New Component Checklist\n\n```\napp/components/my-widget/\n├── my-widget.tsx ✅ Component logic\n└── my-widget.module.css ✅ Always create — even if empty at first\n```\n\n---\n\n## Routing\n\nAll routes are defined programmatically in `app/routes.ts` using `index`, `route`, `layout`, and `prefix` helpers.\n\n### Current Route Map\n\n- **Public / Auth**: `/` (home), `/login`, `/register`, `/logout`, `/onboarding`, `/profile`, `/projects`, `/projects/:id`, `/apply-action`\n- **Admin** (`/admin/*`): shared layout at `routes/admin/layout.tsx`. Every admin loader must call `requireAdmin` from `services/admin.server.ts`.\n\n### Root Layout\n\n`root.tsx` wraps everything with `` and `` **except** admin pages, which render raw `{children}` via their own layout.\n\n### Route Module Pattern\n\n```tsx\n// app/routes/example.tsx\nimport type { Route } from \"./+types/example\";\nimport { myService } from \"~/services/my-service.server\";\n\nexport async function loader({ params, request }: Route.LoaderArgs) {\n return { data: await myService.getData(params.id) };\n}\n\nexport async function action({ request }: Route.ActionArgs) {\n const formData = await request.formData();\n return await myService.handleAction(formData);\n}\n\nexport default function ExamplePage({ loaderData }: Route.ComponentProps) {\n return

{loaderData.data}

;\n}\n```\n\n### Navigation API\n\n| Use case | API |\n|---|---|\n| Standard links | `` |\n| Active-state nav links | `` |\n| Form submission / POST | `` |\n| Programmatic (non-user) | `useNavigate()` — use sparingly |\n| Inside loaders / actions | `redirect(\"/path\")` |\n\n### `routes.ts` Rule\n\nUpdate `app/routes.ts` **only after** all route module files, components, and services are created and stable.\n\n---\n\n## Authentication\n\nSession managed via a single HttpOnly cookie (`sb_session`) containing base64-encoded JSON `{ access_token, refresh_token }`. No external cookie library — raw cookie parsing only.\n\n| File | Responsibility |\n|---|---|\n| `app/lib/supabase.server.ts` | Supabase server client with cookie-based session. Never import in client components. |\n| `app/services/auth.server.ts` | `loginUser`, `registerUser`, `logoutUser`, `requireAuth`, `sanitizeAuthError` |\n| `app/services/admin.server.ts` | `requireAdmin`, `writeAuditLog`, `getDashboardStats`, `getAllApplications`, `getAllMembers`, `updateApplicationStatus`, `adjustMemberXP`, `toggleBanMember`, `toggleAdminStatus` |\n\n**Admin check** (in `root.tsx` loader): hardcoded founder email `amogh.vk.2005@gmail.com` **or** `profiles.is_admin === true` in DB.\n\n---\n\n## Database & Supabase\n\n### Environment Variables\n\n```\nSUPABASE_PROJECT_URL — e.g., https://your-project-id.supabase.co\nSUPABASE_API_KEY — API key for authentication\nSUPABASE_ANON_KEY — Anon key (alias)\n```\n\n### Layered Architecture (Mandatory)\n\n```\nRoute Loader / Action\n ↓ calls\nService function (app/services/*.server.ts)\n ↓ calls\nSupabase client (app/lib/supabase.server.ts)\n ↓ queries\nDatabase\n```\n\n**Hard rules:**\n\n1. Route loaders and actions call service functions only — never query Supabase directly.\n2. UI components **never** import or call anything from `supabase.server.ts` or any `*.server.ts` file.\n3. All database operations are **server-side only**.\n4. Use TypeScript types from `app/lib/database.types.ts` wherever available.\n5. **Always verify table names, column names, and types against the actual schema.** Never guess.\n\n### Service Pattern Example\n\n```ts\n// app/services/user-service.server.ts\nimport { createSupabaseServerClient } from \"~/lib/supabase.server\";\nimport type { Database } from \"~/lib/database.types\";\n\nexport async function getUserById(request: Request, id: string) {\n const supabase = createSupabaseServerClient(request);\n const { data, error } = await supabase\n .from(\"users\")\n .select(\"*\")\n .eq(\"id\", id)\n .single();\n if (error) throw new Error(error.message);\n return data;\n}\n```\n\n---\n\n## Design System\n\nDark-first. All tokens live in `app/styles/theme.css`. **Never hardcode colors, fonts, or spacing in component CSS.**\n\n### Color Tokens\n\n#### Surface (Backgrounds)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-surface` | `#000000` | Page background — deepest layer |\n| `--color-surface-elevated` | `#0d0d0d` | Slightly elevated surfaces |\n| `--color-surface-container-lowest` | `#0a0a0a` | Lowest container |\n| `--color-surface-container-low` | `#111111` | Low-priority container |\n| `--color-surface-container` | `#1a1a1a` | Default card / panel |\n| `--color-surface-container-high` | `#222222` | Higher-emphasis container |\n| `--color-surface-container-highest` | `#2a2a2a` | Topmost container layer |\n\n#### On-Surface (Text & Icons)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-on-surface` | `#f0f0ee` | Primary text and icons |\n| `--color-on-surface-muted` | `#7a7a78` | Secondary / supporting text |\n| `--color-on-surface-subtle` | `#4a4a48` | Placeholder, disabled states |\n\n#### Primary & Accent\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-primary` | `#f0f0ee` | Primary interactive elements, CTA labels |\n| `--color-primary-on` | `#000000` | Text/icons on primary background |\n| `--color-accent` | `#ffffff` | Pure white highlight accent |\n\n#### Borders\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-border` | `#2a2a2a` | Default borders, dividers |\n| `--color-border-interactive` | `#f0f0ee` | Focused / active element borders |\n\n### Typography\n\n| Token | Font | Usage |\n|---|---|---|\n| `--family-display` | Space Grotesk | Headings, hero text, large display |\n| `--family-body` | Space Grotesk | Body copy, UI labels |\n| `--family-mono` | JetBrains Mono | Code, technical labels, monospace data |\n| `--family-pixel` | VT323 | Decorative retro/pixel accents — use sparingly |\n\n### CSS Variable Naming Conventions\n\n| Category | Pattern | Example |\n|---|---|---|\n| Color | `--color-{semantic}-{*}` | `--color-primary`, `--color-on-surface-muted` |\n| Font Family | `--family-{*}` | `--family-display`, `--family-mono` |\n| Spacing | `--space-{*}` | `--space-4`, `--space-8` |\n| Font Size | `--text-{*}` | `--text-sm`, `--text-xl` |\n| Font shorthand | `--font-{*}` | `--font-heading` |\n| Border Radius | `--radius-{*}` | `--radius-md` |\n| Shadow | `--shadow-{*}` / `--inner-shadow-{*}` | `--shadow-lg` |\n\n> ✅ Semantic names only. `--color-primary` ✓ — `--color-blue` ✗\n\n### Full `theme.css` Definition\n\n```css\n/* app/styles/theme.css */\n:root {\n /* Surface */\n --color-surface: #000000;\n --color-surface-elevated: #0d0d0d;\n --color-surface-container-lowest: #0a0a0a;\n --color-surface-container-low: #111111;\n --color-surface-container: #1a1a1a;\n --color-surface-container-high: #222222;\n --color-surface-container-highest: #2a2a2a;\n\n /* On Surface */\n --color-on-surface: #f0f0ee;\n --color-on-surface-muted: #7a7a78;\n --color-on-surface-subtle: #4a4a48;\n\n /* Primary & Accent */\n --color-primary: #f0f0ee;\n --color-primary-on: #000000;\n --color-accent: #ffffff;\n\n /* Border */\n --color-border: #2a2a2a;\n --color-border-interactive: #f0f0ee;\n\n /* Typography */\n --family-display: 'Space Grotesk', sans-serif;\n --family-body: 'Space Grotesk', sans-serif;\n --family-mono: 'JetBrains Mono', monospace;\n --family-pixel: 'VT323', monospace;\n\n /* Spacing */\n --space-1: 4px; --space-2: 8px;\n --space-3: 12px; --space-4: 16px;\n --space-5: 20px; --space-6: 24px;\n --space-8: 32px; --space-10: 40px;\n --space-12: 48px; --space-16: 64px;\n\n /* Border Radius */\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-full: 9999px;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);\n}\n```\n\n---\n\n## Styling Rules\n\n- Every component has a co-located `.module.css`. Import it in the component — missing import = no styles applied.\n- Use `styles.className` — never inline styles or global selectors in module files.\n- `reset.css` is **read-only context**. Read it before editing `global.css` to avoid duplicating rules.\n- `global.css` — global defaults only. No component styles here.\n- `theme.css` — tokens only. No component or layout styles here.\n- Light/dark switching: **dark only by default**. Add `@dazl/color-scheme` only if explicitly requested.\n- Fonts loaded via `links` export in `root.tsx`. **Never** use CSS `@import` for fonts.\n\n### Font Loading (`root.tsx`)\n\n```tsx\nexport const links: LinksFunction = () => [\n { rel: \"preconnect\", href: \"https://fonts.googleapis.com\" },\n { rel: \"preconnect\", href: \"https://fonts.gstatic.com\", crossOrigin: \"anonymous\" },\n {\n rel: \"stylesheet\",\n href: \"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@400;500;700&family=VT323&display=swap\",\n },\n];\n```\n\n### CSS Module Composition Example\n\n```css\n/* my-component.module.css */\n.container {\n background: var(--color-surface-container);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n padding: var(--space-4);\n font-family: var(--family-body);\n color: var(--color-on-surface);\n}\n.container:focus-within {\n border-color: var(--color-border-interactive);\n}\n.label {\n color: var(--color-on-surface-muted);\n font-family: var(--family-mono);\n font-size: 0.75rem;\n}\n```\n\n---\n\n## Forbidden Technologies & Files\n\n### Never Use\n\n| ❌ Forbidden | Reason |\n|---|---|\n| Tailwind CSS | Do not use, mention, install, or reference — ever |\n| CSS `@import` for fonts | Use `links` export in `root.tsx` |\n| React Router v5 / v6 APIs | v7 framework mode only |\n| Direct Supabase queries in route components | Use service functions |\n| Any `*.server.ts` import in client components | Server-only modules |\n| External cookie libraries | Raw cookie parsing only for `sb_session` |\n\n### Read-Only (Context Only)\n\n| File | Notes |\n|---|---|\n| `package.json` | Check available packages/scripts. Use install tool to add deps. |\n| `reset.css` | Read before editing `global.css`. |\n\n### Strictly Off-Limits (No Read or Write)\n\n```\n.gitignore\npackage-lock.json\ntsconfig.json\nreact-router.config.ts\n.github/\n```\n\n---\n\n## Feature Development Checklist\n\n### New Page / Route\n\n- [ ] Create route module in `app/routes/` (kebab-case filename)\n- [ ] Write loader calling a service function (never raw DB)\n- [ ] Write action if form POST is needed (via service function)\n- [ ] Add `ErrorBoundary` export if the route can fail\n- [ ] Admin routes: call `requireAdmin` at the top of the loader\n- [ ] Update `app/routes.ts` **last**\n\n### New Component / Block\n\n- [ ] `component-name.tsx` + `component-name.module.css` (always both)\n- [ ] Import the CSS module in the component\n- [ ] Use only `var(--color-*)`, `var(--family-*)`, `var(--space-*)` — no hardcoded values\n- [ ] Use Radix UI for accessible interactive elements\n- [ ] Verify lucide-react icons exist before importing\n\n### New Database Operation\n\n- [ ] Verify table name, column names, and types in schema first\n- [ ] Add to the appropriate `app/services/*.server.ts` file\n- [ ] Call from a loader or action only — never from a component\n- [ ] Use/extend TypeScript types from `database.types.ts`\n\n---\n\n## Quick Reference\n\n```\nNew component? → component-name.tsx + component-name.module.css (always both)\nNew page? → app/routes/page-name.tsx → update routes.ts LAST\nAdmin route? → call requireAdmin() at top of loader\nDB query? → app/services/*.server.ts only, called from loaders/actions\nColor / Font? → var(--color-*) / var(--family-*)\nIcon? → verify named export in lucide-react first, else use Square\nFont loading? → links export in root.tsx — never @import\nTailwind? → NEVER\nCookie library? → NEVER — raw parsing only\nReact Router ver? → v7 framework mode ONLY\n```",{"_32":51,"_23":52,"_21":53,"_27":54},"week-4","deploy","COMPLETED","# CLAUDE.md\n\n> Authoritative reference for Claude Code when working in this repository. Read fully before making any changes.\n\n---\n\n## Project Overview\n\nA **React Router 7 (SSR, `ssr: true`)** application built with the **Dazl** framework. Developer program site with authentication, project management, and a full admin dashboard. Backend is **Supabase** (Auth + Database).\n\n---\n\n## Commands\n\n```bash\nnpm run dev # Start dev server with HMR\nnpm run build # Production build\nnpm run start # Run production server (react-router-serve)\nnpm run typecheck # Type-check (react-router typegen + tsc)\n```\n\nNo test runner is configured.\n\n---\n\n## Tech Stack\n\n| Layer | Technology |\n|---|---|\n| UI Framework | React 19 |\n| Language | TypeScript |\n| Routing | React Router v7 — SSR, framework mode **only** |\n| Styling | CSS Modules + CSS custom properties (NO Tailwind) |\n| Form Handling | React Hook Form |\n| UI Primitives | Radix UI |\n| Icons | lucide-react |\n| Database / Auth | Supabase (`@supabase/supabase-js`) |\n| Build Tool | Vite |\n| Package Manager | npm / Node.js |\n\n---\n\n## Directory Structure\n\n```\napp/\n blocks/ # Reusable UI blocks grouped by page context\n │ # (home/*, projects/*, admin/*, __global/*)\n components/ # Shared, generic React components\n │ └── component-name/\n │ ├── component-name.tsx\n │ └── component-name.module.css\n data/ # Static fixture data — no business logic\n dev/ # Dev-time utilities only\n hooks/ # Client-side React hooks (one hook per file)\n lib/ # Low-level libraries\n │ ├── supabase.server.ts # Supabase server client — NEVER import in client\n │ └── database.types.ts # Generated DB types\n routes/ # Route modules (one file per route)\n services/ # Server-only business logic (*.server.ts)\n styles/ # Site-wide CSS\n │ ├── theme.css # Design tokens — single source of truth\n │ ├── global.css # Global defaults (never duplicate reset.css)\n │ └── reset.css # CSS reset — READ before editing global.css\n types/ # Shared TypeScript types\n root.tsx # App root — font links, NavigationHeader, SystemStatusFooter\n routes.ts # Route config — edit LAST, after all other changes\n```\n\n---\n\n## Code Patterns & Practices\n\n- **One class or component per file.** No exceptions.\n- **kebab-case** for all file and folder names.\n- **TypeScript** everywhere. Avoid `any`; comment it if unavoidable.\n- Every custom React component **must** have a co-located `.module.css` file, even if initially empty.\n- Hooks live in `app/hooks/`. Never define reusable hooks inside component files.\n- Use React Hook Form for all form state.\n- Use Radix UI primitives for accessible interactive elements (dialogs, dropdowns, tooltips, etc.).\n- Before importing any `lucide-react` icon, verify it is a named export. Fall back to `Square` if it isn't.\n\n### New Component Checklist\n\n```\napp/components/my-widget/\n├── my-widget.tsx ✅ Component logic\n└── my-widget.module.css ✅ Always create — even if empty at first\n```\n\n---\n\n## Routing\n\nAll routes are defined programmatically in `app/routes.ts` using `index`, `route`, `layout`, and `prefix` helpers.\n\n### Current Route Map\n\n- **Public / Auth**: `/` (home), `/login`, `/register`, `/logout`, `/onboarding`, `/profile`, `/projects`, `/projects/:id`, `/apply-action`\n- **Admin** (`/admin/*`): shared layout at `routes/admin/layout.tsx`. Every admin loader must call `requireAdmin` from `services/admin.server.ts`.\n\n### Root Layout\n\n`root.tsx` wraps everything with `` and `` **except** admin pages, which render raw `{children}` via their own layout.\n\n### Route Module Pattern\n\n```tsx\n// app/routes/example.tsx\nimport type { Route } from \"./+types/example\";\nimport { myService } from \"~/services/my-service.server\";\n\nexport async function loader({ params, request }: Route.LoaderArgs) {\n return { data: await myService.getData(params.id) };\n}\n\nexport async function action({ request }: Route.ActionArgs) {\n const formData = await request.formData();\n return await myService.handleAction(formData);\n}\n\nexport default function ExamplePage({ loaderData }: Route.ComponentProps) {\n return

{loaderData.data}

;\n}\n```\n\n### Navigation API\n\n| Use case | API |\n|---|---|\n| Standard links | `` |\n| Active-state nav links | `` |\n| Form submission / POST | `` |\n| Programmatic (non-user) | `useNavigate()` — use sparingly |\n| Inside loaders / actions | `redirect(\"/path\")` |\n\n### `routes.ts` Rule\n\nUpdate `app/routes.ts` **only after** all route module files, components, and services are created and stable.\n\n---\n\n## Authentication\n\nSession managed via a single HttpOnly cookie (`sb_session`) containing base64-encoded JSON `{ access_token, refresh_token }`. No external cookie library — raw cookie parsing only.\n\n| File | Responsibility |\n|---|---|\n| `app/lib/supabase.server.ts` | Supabase server client with cookie-based session. Never import in client components. |\n| `app/services/auth.server.ts` | `loginUser`, `registerUser`, `logoutUser`, `requireAuth`, `sanitizeAuthError` |\n| `app/services/admin.server.ts` | `requireAdmin`, `writeAuditLog`, `getDashboardStats`, `getAllApplications`, `getAllMembers`, `updateApplicationStatus`, `adjustMemberXP`, `toggleBanMember`, `toggleAdminStatus` |\n\n**Admin check** (in `root.tsx` loader): hardcoded founder email `amogh.vk.2005@gmail.com` **or** `profiles.is_admin === true` in DB.\n\n---\n\n## Database & Supabase\n\n### Environment Variables\n\n```\nSUPABASE_PROJECT_URL — e.g., https://your-project-id.supabase.co\nSUPABASE_API_KEY — API key for authentication\nSUPABASE_ANON_KEY — Anon key (alias)\n```\n\n### Layered Architecture (Mandatory)\n\n```\nRoute Loader / Action\n ↓ calls\nService function (app/services/*.server.ts)\n ↓ calls\nSupabase client (app/lib/supabase.server.ts)\n ↓ queries\nDatabase\n```\n\n**Hard rules:**\n\n1. Route loaders and actions call service functions only — never query Supabase directly.\n2. UI components **never** import or call anything from `supabase.server.ts` or any `*.server.ts` file.\n3. All database operations are **server-side only**.\n4. Use TypeScript types from `app/lib/database.types.ts` wherever available.\n5. **Always verify table names, column names, and types against the actual schema.** Never guess.\n\n### Service Pattern Example\n\n```ts\n// app/services/user-service.server.ts\nimport { createSupabaseServerClient } from \"~/lib/supabase.server\";\nimport type { Database } from \"~/lib/database.types\";\n\nexport async function getUserById(request: Request, id: string) {\n const supabase = createSupabaseServerClient(request);\n const { data, error } = await supabase\n .from(\"users\")\n .select(\"*\")\n .eq(\"id\", id)\n .single();\n if (error) throw new Error(error.message);\n return data;\n}\n```\n\n---\n\n## Design System\n\nDark-first. All tokens live in `app/styles/theme.css`. **Never hardcode colors, fonts, or spacing in component CSS.**\n\n### Color Tokens\n\n#### Surface (Backgrounds)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-surface` | `#000000` | Page background — deepest layer |\n| `--color-surface-elevated` | `#0d0d0d` | Slightly elevated surfaces |\n| `--color-surface-container-lowest` | `#0a0a0a` | Lowest container |\n| `--color-surface-container-low` | `#111111` | Low-priority container |\n| `--color-surface-container` | `#1a1a1a` | Default card / panel |\n| `--color-surface-container-high` | `#222222` | Higher-emphasis container |\n| `--color-surface-container-highest` | `#2a2a2a` | Topmost container layer |\n\n#### On-Surface (Text & Icons)\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-on-surface` | `#f0f0ee` | Primary text and icons |\n| `--color-on-surface-muted` | `#7a7a78` | Secondary / supporting text |\n| `--color-on-surface-subtle` | `#4a4a48` | Placeholder, disabled states |\n\n#### Primary & Accent\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-primary` | `#f0f0ee` | Primary interactive elements, CTA labels |\n| `--color-primary-on` | `#000000` | Text/icons on primary background |\n| `--color-accent` | `#ffffff` | Pure white highlight accent |\n\n#### Borders\n\n| Token | Hex | Usage |\n|---|---|---|\n| `--color-border` | `#2a2a2a` | Default borders, dividers |\n| `--color-border-interactive` | `#f0f0ee` | Focused / active element borders |\n\n### Typography\n\n| Token | Font | Usage |\n|---|---|---|\n| `--family-display` | Space Grotesk | Headings, hero text, large display |\n| `--family-body` | Space Grotesk | Body copy, UI labels |\n| `--family-mono` | JetBrains Mono | Code, technical labels, monospace data |\n| `--family-pixel` | VT323 | Decorative retro/pixel accents — use sparingly |\n\n### CSS Variable Naming Conventions\n\n| Category | Pattern | Example |\n|---|---|---|\n| Color | `--color-{semantic}-{*}` | `--color-primary`, `--color-on-surface-muted` |\n| Font Family | `--family-{*}` | `--family-display`, `--family-mono` |\n| Spacing | `--space-{*}` | `--space-4`, `--space-8` |\n| Font Size | `--text-{*}` | `--text-sm`, `--text-xl` |\n| Font shorthand | `--font-{*}` | `--font-heading` |\n| Border Radius | `--radius-{*}` | `--radius-md` |\n| Shadow | `--shadow-{*}` / `--inner-shadow-{*}` | `--shadow-lg` |\n\n> ✅ Semantic names only. `--color-primary` ✓ — `--color-blue` ✗\n\n### Full `theme.css` Definition\n\n```css\n/* app/styles/theme.css */\n:root {\n /* Surface */\n --color-surface: #000000;\n --color-surface-elevated: #0d0d0d;\n --color-surface-container-lowest: #0a0a0a;\n --color-surface-container-low: #111111;\n --color-surface-container: #1a1a1a;\n --color-surface-container-high: #222222;\n --color-surface-container-highest: #2a2a2a;\n\n /* On Surface */\n --color-on-surface: #f0f0ee;\n --color-on-surface-muted: #7a7a78;\n --color-on-surface-subtle: #4a4a48;\n\n /* Primary & Accent */\n --color-primary: #f0f0ee;\n --color-primary-on: #000000;\n --color-accent: #ffffff;\n\n /* Border */\n --color-border: #2a2a2a;\n --color-border-interactive: #f0f0ee;\n\n /* Typography */\n --family-display: 'Space Grotesk', sans-serif;\n --family-body: 'Space Grotesk', sans-serif;\n --family-mono: 'JetBrains Mono', monospace;\n --family-pixel: 'VT323', monospace;\n\n /* Spacing */\n --space-1: 4px; --space-2: 8px;\n --space-3: 12px; --space-4: 16px;\n --space-5: 20px; --space-6: 24px;\n --space-8: 32px; --space-10: 40px;\n --space-12: 48px; --space-16: 64px;\n\n /* Border Radius */\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-full: 9999px;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);\n}\n```\n\n---\n\n## Styling Rules\n\n- Every component has a co-located `.module.css`. Import it in the component — missing import = no styles applied.\n- Use `styles.className` — never inline styles or global selectors in module files.\n- `reset.css` is **read-only context**. Read it before editing `global.css` to avoid duplicating rules.\n- `global.css` — global defaults only. No component styles here.\n- `theme.css` — tokens only. No component or layout styles here.\n- Light/dark switching: **dark only by default**. Add `@dazl/color-scheme` only if explicitly requested.\n- Fonts loaded via `links` export in `root.tsx`. **Never** use CSS `@import` for fonts.\n\n### Font Loading (`root.tsx`)\n\n```tsx\nexport const links: LinksFunction = () => [\n { rel: \"preconnect\", href: \"https://fonts.googleapis.com\" },\n { rel: \"preconnect\", href: \"https://fonts.gstatic.com\", crossOrigin: \"anonymous\" },\n {\n rel: \"stylesheet\",\n href: \"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@400;500;700&family=VT323&display=swap\",\n },\n];\n```\n\n### CSS Module Composition Example\n\n```css\n/* my-component.module.css */\n.container {\n background: var(--color-surface-container);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n padding: var(--space-4);\n font-family: var(--family-body);\n color: var(--color-on-surface);\n}\n.container:focus-within {\n border-color: var(--color-border-interactive);\n}\n.label {\n color: var(--color-on-surface-muted);\n font-family: var(--family-mono);\n font-size: 0.75rem;\n}\n```\n\n---\n\n## Forbidden Technologies & Files\n\n### Never Use\n\n| ❌ Forbidden | Reason |\n|---|---|\n| Tailwind CSS | Do not use, mention, install, or reference — ever |\n| CSS `@import` for fonts | Use `links` export in `root.tsx` |\n| React Router v5 / v6 APIs | v7 framework mode only |\n| Direct Supabase queries in route components | Use service functions |\n| Any `*.server.ts` import in client components | Server-only modules |\n| External cookie libraries | Raw cookie parsing only for `sb_session` |\n\n### Read-Only (Context Only)\n\n| File | Notes |\n|---|---|\n| `package.json` | Check available packages/scripts. Use install tool to add deps. |\n| `reset.css` | Read before editing `global.css`. |\n\n### Strictly Off-Limits (No Read or Write)\n\n```\n.gitignore\npackage-lock.json\ntsconfig.json\nreact-router.config.ts\n.github/\n```\n\n---\n\n## Feature Development Checklist\n\n### New Page / Route\n\n- [ ] Create route module in `app/routes/` (kebab-case filename)\n- [ ] Write loader calling a service function (never raw DB)\n- [ ] Write action if form POST is needed (via service function)\n- [ ] Add `ErrorBoundary` export if the route can fail\n- [ ] Admin routes: call `requireAdmin` at the top of the loader\n- [ ] Update `app/routes.ts` **last**\n\n### New Component / Block\n\n- [ ] `component-name.tsx` + `component-name.module.css` (always both)\n- [ ] Import the CSS module in the component\n- [ ] Use only `var(--color-*)`, `var(--family-*)`, `var(--space-*)` — no hardcoded values\n- [ ] Use Radix UI for accessible interactive elements\n- [ ] Verify lucide-react icons exist before importing\n\n### New Database Operation\n\n- [ ] Verify table name, column names, and types in schema first\n- [ ] Add to the appropriate `app/services/*.server.ts` file\n- [ ] Call from a loader or action only — never from a component\n- [ ] Use/extend TypeScript types from `database.types.ts`\n\n---\n\n## Quick Reference\n\n```\nNew component? → component-name.tsx + component-name.module.css (always both)\nNew page? → app/routes/page-name.tsx → update routes.ts LAST\nAdmin route? → call requireAdmin() at top of loader\nDB query? → app/services/*.server.ts only, called from loaders/actions\nColor / Font? → var(--color-*) / var(--family-*)\nIcon? → verify named export in lucide-react first, else use Square\nFont loading? → links export in root.tsx — never @import\nTailwind? → NEVER\nCookie library? → NEVER — raw parsing only\nReact Router ver? → v7 framework mode ONLY\n```","roles",[57],{"_15":58,"_23":59,"_60":9,"_61":62,"_63":64,"_27":28,"_99":100},"role_1775482199061","swe","locked","questions",[],"formFields",[65,76,80,89,94],{"_15":66,"_67":68,"_32":69,"_70":71,"_72":73,"_74":75},"field_1775482216843_czho","type","text","question-1","options",[],"required",true,"placeholder","",{"_15":77,"_67":78,"_32":69,"_70":79,"_72":73,"_74":75},"field_1775482224772_0obz","textarea",[],{"_15":81,"_67":82,"_32":83,"_70":84,"_72":73,"_74":75},"field_1775482231429_iye7","radio","question-2",[85,86,87,88],"1","2","3","4",{"_15":90,"_67":91,"_32":92,"_70":93,"_72":73,"_74":75},"field_1775482245888_szyv","checkbox","question-3",[85,86,87,88],{"_15":95,"_67":96,"_32":97,"_70":98,"_72":73,"_74":75},"field_1775482268066_vica","select","question-5",[85,86,87,88],"availability","5/5","team_size",5,"open_slots","tags",[106],"REACT-PYTHON","is_published","actionData","errors"]