---
id: T02
parent: S01
milestone: M011
provides: []
requires: []
affects: []
key_files: ["backend/routers/techniques.py", "frontend/src/api/public-client.ts", "frontend/src/pages/Home.tsx", "frontend/src/App.css"]
key_decisions: ["Dedicated /random endpoint returning just {slug} rather than reusing sort=random on list endpoint", "Route placed before /{slug} to avoid slug capture"]
patterns_established: []
drill_down_paths: []
observability_surfaces: []
duration: ""
verification_result: "npx tsc --noEmit passes. npm run build succeeds (50 modules). grep confirms fetchRandomTechnique in client, /random in backend router, Random in Home.tsx. All slice-level verification checks pass including stagger-index in all 5 pages."
completed_at: 2026-03-31T08:24:27.607Z
blocker_discovered: false
---

# T02: Added GET /api/v1/techniques/random endpoint returning {slug}, fetchRandomTechnique() client function, and 🎲 Random Technique button with loading/error states on homepage

> Added GET /api/v1/techniques/random endpoint returning {slug}, fetchRandomTechnique() client function, and 🎲 Random Technique button with loading/error states on homepage

## What Happened
---
id: T02
parent: S01
milestone: M011
key_files:
  - backend/routers/techniques.py
  - frontend/src/api/public-client.ts
  - frontend/src/pages/Home.tsx
  - frontend/src/App.css
key_decisions:
  - Dedicated /random endpoint returning just {slug} rather than reusing sort=random on list endpoint
  - Route placed before /{slug} to avoid slug capture
duration: ""
verification_result: passed
completed_at: 2026-03-31T08:24:27.607Z
blocker_discovered: false
---

# T02: Added GET /api/v1/techniques/random endpoint returning {slug}, fetchRandomTechnique() client function, and 🎲 Random Technique button with loading/error states on homepage

**Added GET /api/v1/techniques/random endpoint returning {slug}, fetchRandomTechnique() client function, and 🎲 Random Technique button with loading/error states on homepage**

## What Happened

Added a dedicated GET /techniques/random endpoint in backend/routers/techniques.py before the /{slug} route to avoid slug capture. The endpoint runs SELECT slug FROM technique_pages ORDER BY random() LIMIT 1 and returns 404 if no techniques exist. Added fetchRandomTechnique() in the API client. On the homepage, added a Random Technique button between the nav-cards and featured technique sections with loading state during fetch, error state with auto-reset, and navigation on success. Added .btn--random and .home-random CSS.

## Verification

npx tsc --noEmit passes. npm run build succeeds (50 modules). grep confirms fetchRandomTechnique in client, /random in backend router, Random in Home.tsx. All slice-level verification checks pass including stagger-index in all 5 pages.

## Verification Evidence

| # | Command | Exit Code | Verdict | Duration |
|---|---------|-----------|---------|----------|
| 1 | `cd frontend && npx tsc --noEmit` | 0 | ✅ pass | 3300ms |
| 2 | `cd frontend && npm run build` | 0 | ✅ pass | 2600ms |
| 3 | `grep -q 'fetchRandomTechnique' frontend/src/api/public-client.ts` | 0 | ✅ pass | 50ms |
| 4 | `grep -q '/random' backend/routers/techniques.py` | 0 | ✅ pass | 50ms |
| 5 | `grep -q 'Random' frontend/src/pages/Home.tsx` | 0 | ✅ pass | 50ms |
| 6 | `grep -q 'cardEnter' frontend/src/App.css` | 0 | ✅ pass | 50ms |
| 7 | `grep -q 'card-stagger' frontend/src/App.css` | 0 | ✅ pass | 50ms |
| 8 | `grep -c 'stagger-index' (5 pages)` | 0 | ✅ pass | 50ms |


## Deviations

None.

## Known Issues

None.

## Files Created/Modified

- `backend/routers/techniques.py`
- `frontend/src/api/public-client.ts`
- `frontend/src/pages/Home.tsx`
- `frontend/src/App.css`


## Deviations
None.

## Known Issues
None.
