# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Skills

Read and follow these skills before writing any code:

- `.claude/skills/base/SKILL.md`
- `.claude/skills/security/SKILL.md`
- `.claude/skills/typescript/SKILL.md`
- `.claude/skills/react-native/SKILL.md`
- `.claude/skills/project-tooling/SKILL.md`
- `.claude/skills/session-management/SKILL.md`
- `.claude/skills/code-graph/SKILL.md`
- `.claude/skills/existing-repo/SKILL.md`

## Project

Ce projet est une application mobile développée en react-native. C'est un monorepo (front + back). Elle permet de créer des mots et de lui associer des définitons. L'utilisateur ajoute un mot ou une phrase, Il peut alors associer une définitions. Chaque définitions à une date et un contexte (optionnel). Un contexte contient un lieu, un texte, un lien, une video, une photo... Un mot contient plusieurs définitions classées par date. Une option permet de filter les contextes.
La page d accueil présente un text field qui me permet de chercher un mot, je commence a taper et au bout de 3 lettres j ai une liste des derniers mots utilises/crees. Un lien me permet de créer le mot si le mot n'existe pas, ou de le créer et d'aller l'éditer. Un moteur desuggestion me suggere des mots proches qui peuvent resembler au mot que j'essaye de créer/chercher.
Si l'utilisateur crée le mot sans entrer de définition, il va dans une liste spéciale des mots à chercher/remplir.

## Stack

# Front :

React Native
TypeScript
Styled Components
Styled System
Jotai
TanStack Query
Zod
Vite
React Testing Library
Mock Service Worker
pnpm

# Backend :

Nest JS
Zod
MySQL
TypeORM
JWT - JSON Web Tokens

## Couleurs/Palette :

background: '#F0FDF4', // Fond principal
surface: '#FDFFFE', // Cartes, surfaces
textPrimary: '#1E3A2E', // Texte principal
textSecondary: '#52796F', // Texte secondaire

greenMint: '#D1FAE5', // Vert menthe
greenSage: '#BBF7D0', // Sauge
greenTea: '#A7F3D0', // Thé vert
greenJade: '#86EFAC', // Jade (accent principal)
greenEmerald: '#6EE7B7', // Émeraude
greenForest: '#34D399', // Forêt

success: '#10B981',
warning: '#BEF264',
error: '#FCA5A5',
info: '#67E8F9',

## React Coding standards

- Never use Any type.
- Embed business or shared code in hooks.
- Test logic with test in dedicated test folder.

## React Security Rules

- Never use `dangerouslySetInnerHTML`, `innerHTML`, or direct `eval()`.
- Always sanitize/validate API responses before rendering (type checking, length limits).
- Any Source files (`.tsx`) must not be publicly accessible; only built `.js` served.

## General Coding standards

- Use simple code with KISS principle.
- Single responsability.
- Nice usage of design pattern and type for more complex scenarios.
- Code must be commented as much as possible.
- Variable names and comments must be in English.
- Avoid else
- No use of <table>
- No inline style, and reuse style when already there.

## Key Commands

```bash
# Install all dependencies (run from repo root)
pnpm install

# Start mobile app (Expo)
pnpm --filter mobile start

# Start API in watch mode
pnpm --filter api start:dev

# Run all tests
pnpm test

# Run mobile tests only
pnpm --filter mobile test

# Run API tests only
pnpm --filter api test

# Run a single test file
pnpm --filter api test -- words.service.spec.ts

# Lint API
pnpm --filter api lint

# Lint all (root ESLint)
pnpm lint
pnpm lint:fix

# Format all (Prettier)
pnpm format
pnpm format:check

# Verify tooling setup
./scripts/verify-tooling.sh
```

## Atomic Todos

All work is tracked in `_project_specs/todos/`:

- `active.md` - Current work
- `backlog.md` - Future work
- `completed.md` - Done (for reference)

## Session Management

Maintain session state in `_project_specs/session/`:

- `current-state.md` - Live session state
- `decisions.md` - Key decisions (append-only)
- `archive/` - Past session summaries

## Architecture

```
lexibrain/
├── package.json              # root pnpm workspace
├── pnpm-workspace.yaml       # declares apps/*
├── tsconfig.base.json        # shared strict TypeScript config
├── apps/
│   ├── mobile/               # Expo (React Native + TypeScript)
│   │   ├── App.tsx           # Root — QueryClientProvider
│   │   └── src/
│   │       ├── screens/      # One file per screen
│   │       ├── hooks/        # Business logic (useWordSearch, …)
│   │       ├── components/   # Shared UI components
│   │       ├── store/        # Jotai atoms + QueryClient
│   │       └── theme.ts      # Colour palette & design tokens
│   └── api/                  # NestJS REST API
│       └── src/
│           ├── app.module.ts # TypeORM + ConfigModule wired here
│           ├── main.ts       # Bootstrap (port from env)
│           └── words/        # Words feature module (CRUD)
│               ├── entities/ # word.entity.ts, definition.entity.ts
│               ├── words.service.ts
│               └── words.controller.ts
```