# Canevas d'Atelier Design - Programme Pionniers

Une plateforme web interactive pour les ateliers de design fiction du Programme Pionniers. Cette application permet aux participants d'explorer, compléter et exporter 30 canevas d'exercices interactifs.

## ✨ Fonctionnalités

- 📋 **30 canevas interactifs** organisés par semaine et jour
- ✏️ **Édition en temps réel** avec sauvegarde automatique
- 🔄 **Collaboration en temps réel** avec curseurs multi-utilisateurs
- 🖱️ **Drag-and-drop** pour les canevas de positionnement
- 📄 **Export PDF** en format A3 paysage
- 💾 **Stockage local** via IndexedDB (fonctionne hors-ligne)
- 🎨 **Design fidèle** à la maquette Figma originale

## 🚀 Démarrage rapide

### Prérequis

- Node.js 18+ 
- npm ou pnpm

### Installation

```bash
# Cloner le projet
git clone <repo-url>
cd caneva_design_motion

# Installer les dépendances
npm install

# Lancer le serveur de développement
npm run dev
```

Ouvrir [http://localhost:3000](http://localhost:3000) dans votre navigateur.

## 📁 Structure du projet

```
src/
├── app/                      # Pages Next.js (App Router)
│   ├── page.tsx             # Homepage
│   ├── canvas/[id]/         # Canvas viewer
│   └── api/pdf/             # PDF generation API
├── components/
│   ├── ui/                  # Composants UI réutilisables
│   ├── layout/              # Header, Footer, etc.
│   ├── canvas/              # Composants canvas
│   │   ├── templates/       # Templates spécialisés par type
│   │   └── dragdrop/        # Composants drag-and-drop
│   ├── collaboration/       # Curseurs, présence utilisateurs
│   └── pdf/                 # Export PDF
├── lib/
│   ├── store.ts             # Zustand state management
│   ├── db.ts                # Dexie.js IndexedDB
│   ├── canvas-data.ts       # Définitions des 30 canevas
│   ├── types.ts             # Types TypeScript
│   ├── utils.ts             # Utilitaires
│   └── liveblocks.config.ts # Configuration collaboration
```

## 🎨 Canevas disponibles

### Semaine 2 (20 canevas)
- **Jour 1**: Carte des Parties Prenantes, Notes d'Entretien (x3)
- **Jour 2**: Chaîne de Valeur, Tensions & Paradoxes, Signaux Faibles, Analyse des Tendances
- **Jour 3**: Persona du Futur (x2), Cartes Scénarios, Scénarios Futurs
- **Jour 4**: Carte du Parcours (x2), Cartographie d'Expérience, Analyse des Points de Contact
- **Jour 5**: Tableau de Synthèse, Esquisse de Concept (x2), Réflexion de la Semaine

### Semaine 3 (10 canevas)
- **Jour 1**: Brief de Prototype, Plan de Prototype
- **Jour 2**: Protocole de Test, Grille de Feedback
- **Jour 3**: Journal d'Itération, Analyse de Pivot
- **Jour 4**: Concept Final, Feuille de Route
- **Jour 5**: Canvas de Pitch, Rétrospective

## 🛠️ Technologies

- **Framework**: Next.js 14 (App Router)
- **Langage**: TypeScript
- **Styling**: Tailwind CSS
- **State**: Zustand
- **Database**: Dexie.js (IndexedDB)
- **Drag & Drop**: dnd-kit
- **Collaboration**: Liveblocks
- **PDF**: @react-pdf/renderer + Puppeteer

## 📝 Configuration

### Variables d'environnement

Créer un fichier `.env.local`:

```env
# Liveblocks (collaboration en temps réel)
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_your_key_here

# Base URL (pour génération PDF)
NEXT_PUBLIC_BASE_URL=http://localhost:3000
```

## 🚢 Déploiement

Ce projet est optimisé pour [Vercel](https://vercel.com):

```bash
# Build de production
npm run build

# ou déployer sur Vercel
npx vercel
```

## 📄 Licence

Projet développé pour le Programme Pionniers.

---

Développé avec ❤️ pour les ateliers de design fiction.