Add detailed README with badges, architecture docs, and .env.example · 99af52c · spb-cloud

1

−This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

1

+

2

+ <img src="https://img.shields.io/badge/SPB_Cloud-v2.0-blue?style=for-the-badge&logo=cloud&logoColor=white" alt="Version" />

3

+

2

4

3

−## Getting Started

5

+<h1 align="center">SPB Private Cloud</h1>

4

6

5

−First, run the development server:

7

+

8

+ Cloud personnel privé, souverain, sécurisé et mobile-first.

9

+ Plus clean que Dropbox. Plus privé que Google Drive. 100% local-first.

10

+

11

+

12

+

13

+ <img src="https://img.shields.io/badge/Next.js-14-black?style=flat-square&logo=nextdotjs&logoColor=white" alt="Next.js" />

14

+ <img src="https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />

15

+ <img src="https://img.shields.io/badge/Tailwind_CSS-3.4-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white" alt="Tailwind" />

16

+ <img src="https://img.shields.io/badge/Prisma-ORM-2D3748?style=flat-square&logo=prisma&logoColor=white" alt="Prisma" />

17

+ <img src="https://img.shields.io/badge/SQLite-Database-003B57?style=flat-square&logo=sqlite&logoColor=white" alt="SQLite" />

18

+ <img src="https://img.shields.io/badge/Claude_AI-Sonnet_4.5-D97706?style=flat-square&logo=anthropic&logoColor=white" alt="Claude AI" />

19

+

20

+

21

+

22

+ <img src="https://img.shields.io/badge/License-Private-red?style=flat-square" alt="License" />

23

+ <img src="https://img.shields.io/badge/Platform-macOS%20%7C%20Linux%20%7C%20VPS-lightgrey?style=flat-square" alt="Platform" />

24

+ <img src="https://img.shields.io/badge/Mobile-Responsive-green?style=flat-square&logo=apple&logoColor=white" alt="Mobile" />

25

+ <img src="https://img.shields.io/badge/Auth-2FA%20TOTP-purple?style=flat-square&logo=keycdn&logoColor=white" alt="2FA" />

26

+ <img src="https://img.shields.io/badge/Encryption-AES--256--GCM-orange?style=flat-square&logo=letsencrypt&logoColor=white" alt="Encryption" />

27

+ <img src="https://img.shields.io/badge/API-REST%20v1-blue?style=flat-square&logo=fastapi&logoColor=white" alt="API" />

28

+

29

+

30

+---

31

+

32

+## Qu'est-ce que SPB Cloud ?

33

+

34

+SPB Private Cloud est un cloud personnel auto-hébergé conçu pour offrir un contrôle total sur vos données. Aucune dépendance à Google, Dropbox ou iCloud. Vos fichiers restent chez vous, chiffrés, accessibles depuis n'importe quel appareil.

35

+

36

+### Pourquoi SPB Cloud ?

37

+

38

39

+|---|---|---|---|

40

41

42

43

44

45

46

+| **Multi-utilisateur** | Oui (roles) | Oui | Oui |

47

+| **2FA TOTP** | Oui | Oui | Oui |

48

+| **API REST** | Oui | Oui | Oui |

49

+

50

+---

51

+

52

+## Fonctionnalités

53

+

54

+### Gestion de fichiers

55

+- Upload multi-fichiers avec drag & drop

56

+- Upload depuis caméra mobile

57

+- Rename, delete, move, duplicate

58

+- Organisation en dossiers imbriqués

59

+- Breadcrumb navigation

60

+- Vue grille et liste

61

+- Sélection multiple + actions en lot

62

+- Téléchargement de dossiers en ZIP

63

+- Progress bar d'upload

64

+

65

+### Preview de fichiers

66

+- Images (JPG, PNG, GIF, WebP, SVG)

67

+- Vidéos (MP4, WebM, MOV)

68

+- Audio (MP3, WAV, OGG) avec waveform

69

+- PDF avec navigation de pages

70

+- Code source avec syntax highlighting (20+ langages)

71

+- Markdown avec rendu

72

+- CSV/JSON avec tableau interactif

73

+- Archives ZIP (exploration du contenu)

74

+

75

+### Intelligence Artificielle (Claude Sonnet 4.5)

76

+- **Recherche sémantique** : trouvez des fichiers par description naturelle

77

+- **Chat IA** : posez des questions sur vos fichiers

78

+- **Auto-tagging** : classification automatique par contenu

79

+- **OCR intelligent** : extraction de texte depuis images et PDFs

80

+- **Description IA** : génération automatique de descriptions

81

+

82

+### Sécurité

83

+- Hash bcrypt pour les mots de passe

84

+- Authentification 2FA TOTP (Google Authenticator, Authy)

85

+- Chiffrement AES-256-GCM at-rest

86

+- Sessions HTTP-only cookies (iron-session)

87

+- Rate limiting sur le login

88

+- CSRF protection

89

+- Validation des types de fichiers

90

+

91

+### Multi-utilisateur

92

+- Système de rôles : Admin, User, Viewer

93

+- Gestion CRUD des utilisateurs

94

+- Permissions par rôle

95

+- Logs d'activité par utilisateur

96

+

97

+### Partage sécurisé

98

+- Liens de partage avec token unique

99

+- Protection par mot de passe optionnel

100

+- Date d'expiration configurable

101

+- Mode téléchargement ou aperçu seul

102

+- Désactivation instantanée

103

+- Gestion centralisée des liens

104

+

105

+### Système de backup

106

+- Backup complet (DB + fichiers) en ZIP

107

+- Backup incrémental

108

+- Historique des backups avec statut

109

+- Suppression des anciens backups

110

+

111

+### Notifications

112

+- Notifications en temps réel (polling 30s)

113

+- Badge avec compteur non-lus

114

+- Types : upload, backup, IA, partage

115

+- Marquer comme lu / tout lire

116

+

117

+### API REST publique

118

+- Authentification par clé API (Bearer token)

119

+- Génération et révocation de clés

120

+- Permissions configurable (read, write, admin)

121

+- Expiration optionnelle des clés

122

+- Endpoint : `GET /api/v1/files`

123

+

124

+### Interface

125

+- Design mobile-first (iPhone optimisé)

126

+- Mode clair / sombre avec persistance

127

+- Touch targets 44px minimum

128

+- Bottom sheet modals sur mobile

129

+- Safe area support (notch iPhone)

130

+- Sidebar collapsible

131

+- Animations Framer Motion

132

+- Typographie Inter

133

+

134

+---

135

+

136

+## Stack technique

137

+

138

+

139

+ <img src="https://img.shields.io/badge/Frontend-Next.js_14-000000?style=for-the-badge&logo=nextdotjs" alt="Next.js" />

140

+ <img src="https://img.shields.io/badge/Language-TypeScript_5-3178C6?style=for-the-badge&logo=typescript" alt="TypeScript" />

141

+ <img src="https://img.shields.io/badge/Styling-Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss" alt="Tailwind" />

142

+ <img src="https://img.shields.io/badge/Animation-Framer_Motion-FF0055?style=for-the-badge&logo=framer" alt="Framer" />

143

+

144

+

145

+ <img src="https://img.shields.io/badge/ORM-Prisma-2D3748?style=for-the-badge&logo=prisma" alt="Prisma" />

146

+ <img src="https://img.shields.io/badge/Database-SQLite-003B57?style=for-the-badge&logo=sqlite" alt="SQLite" />

147

+ <img src="https://img.shields.io/badge/Auth-iron--session-FF6600?style=for-the-badge" alt="iron-session" />

148

+ <img src="https://img.shields.io/badge/AI-Anthropic_Claude-D97706?style=for-the-badge&logo=anthropic" alt="Claude" />

149

+

150

+

151

+---

152

+

153

+## Installation

154

+

155

+### Prérequis

156

+

157

+- **Node.js** 18+

158

+- **npm** 9+

159

+- Clé API Anthropic (pour les fonctionnalités IA)

160

+

161

+### Installation rapide

6

162

7

163

```bash

164

+# 1. Cloner le repo

165

+git clone https://github.com/simonpierreboucher02/spb-private-cloud.git

166

+cd spb-private-cloud

167

+

168

+# 2. Installer les dépendances

169

+npm install

170

+

171

+# 3. Configurer l'environnement

172

+cp .env.example .env

173

+# Éditer .env avec vos valeurs

174

+

175

+# 4. Initialiser la base de données

176

+npx prisma db push

177

+npx tsx prisma/seed.ts

178

+

179

+# 5. Lancer l'application

8

180

npm run dev

9

−# or

10

−yarn dev

11

−# or

12

−pnpm dev

13

−# or

14

−bun dev

15

181

```

16

182

17

−Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

183

+L'application sera accessible sur [http://localhost:3000](http://localhost:3000).

184

+

185

+### Configuration (.env)

186

+

187

+```env

188

+DATABASE_URL="file:./dev.db"

189

+SESSION_PASSWORD="votre-secret-session-min-32-caracteres"

190

+ANTHROPIC_API_KEY="sk-ant-api03-..."

191

+ENCRYPTION_KEY="votre-cle-encryption-32-caracteres"

192

+BACKUP_DIR="./backups"

193

+UPLOAD_DIR="./uploads"

194

+MAX_FILE_SIZE="524288000"

195

+```

196

+

197

+### Identifiants par défaut

198

+

199

+| Champ | Valeur |

200

+|---|---|

201

+| **Email** | `admin@spbcloud.local` |

202

+| **Mot de passe** | `admin123` |

203

+| **Rôle** | Admin |

204

+

205

+> **Important** : Changez le mot de passe après la première connexion via Admin > Utilisateurs.

206

+

207

+---

208

+

209

+## Architecture

210

+

211

+```

212

+spb-private-cloud/

213

+├── app/

214

+│ ├── admin/ # Pages administration

215

+│ │ ├── activity/ # Historique d'activité

216

+│ │ ├── api-keys/ # Gestion clés API

217

+│ │ ├── backup/ # Gestion backups

218

+│ │ ├── settings/ # Paramètres (2FA)

219

+│ │ ├── shares/ # Liens partagés

220

+│ │ └── users/ # Gestion utilisateurs

221

+│ ├── api/

222

+│ │ ├── ai/ # Endpoints IA (search, chat, tag, ocr, describe)

223

+│ │ ├── auth/ # Login, logout, 2FA

224

+│ │ ├── backup/ # CRUD backups

225

+│ │ ├── files/ # CRUD fichiers + bulk + versions

226

+│ │ ├── folders/ # CRUD dossiers + ZIP download

227

+│ │ ├── keys/ # CRUD clés API

228

+│ │ ├── notifications/# Notifications

229

+│ │ ├── shares/ # Liens de partage

230

+│ │ ├── tags/ # Tags

231

+│ │ ├── users/ # Gestion utilisateurs

232

+│ │ └── v1/ # API REST publique

233

+│ ├── dashboard/ # File explorer

234

+│ ├── login/ # Page de connexion

235

+│ └── shared/ # Pages de partage public

236

+├── components/

237

+│ ├── admin/ # Composants admin

238

+│ ├── ai/ # Panel IA

239

+│ ├── files/ # FileCard, FileExplorer, BulkActions

240

+│ ├── folders/ # FolderCard, CreateFolderModal

241

+│ ├── layout/ # AppShell, Sidebar, MobileNav, Notifications

242

+│ ├── preview/ # Preview engine + plugins (image, video, pdf...)

243

+│ ├── tags/ # TagBadge, TagSelector

244

+│ ├── theme/ # ThemeProvider, ThemeToggle

245

+│ └── ui/ # Button, Modal, SearchBar

246

+├── lib/

247

+│ ├── ai.ts # Intégration Claude API

248

+│ ├── auth.ts # Authentification multi-user

249

+│ ├── backup.ts # Système de backup

250

+│ ├── encryption.ts # Chiffrement AES-256-GCM

251

+│ ├── notifications.ts # Système de notifications

252

+│ ├── prisma.ts # Client Prisma

253

+│ ├── rate-limit.ts # Rate limiting

254

+│ ├── session.ts # Configuration sessions

255

+│ ├── storage.ts # Gestion fichiers sur disque

256

+│ └── utils.ts # Utilitaires

257

+├── prisma/

258

+│ ├── schema.prisma # Schéma de base de données

259

+│ └── seed.ts # Seed admin user

260

+├── types/

261

+│ └── files.ts # Types TypeScript

262

+└── uploads/ # Stockage fichiers (git-ignored)

263

+```

264

+

265

+---

266

+

267

+## Base de données

268

+

269

+### Modèles Prisma

270

+

271

+| Modèle | Description |

272

+|---|---|

273

+| `User` | Utilisateurs avec rôles et 2FA |

274

+| `File` | Fichiers avec métadonnées, IA, chiffrement |

275

+| `Folder` | Dossiers imbriqués (arbre récursif) |

276

+| `SharedLink` | Liens de partage sécurisés |

277

+| `Permission` | Permissions par dossier/utilisateur |

278

+| `ActivityLog` | Journal d'activité |

279

+| `FileMetadata` | Métadonnées étendues (favoris, annotations) |

280

+| `Tag` / `FileTag` | Système de tags |

281

+| `FileVersion` | Versioning de fichiers |

282

+| `Notification` | Notifications utilisateur |

283

+| `ApiKey` | Clés API REST |

284

+| `BackupLog` | Historique des backups |

285

+

286

+---

287

+

288

+## API REST

289

+

290

+### Authentification

291

+

292

+Toutes les requêtes à l'API publique nécessitent un header `Authorization` :

293

+

294

+```bash

295

+curl -H "Authorization: Bearer spb_votre_cle_api" \

296

+ https://votre-domaine/api/v1/files

297

+```

298

+

299

+### Endpoints

300

+

301

+| Méthode | Endpoint | Description |

302

+|---|---|---|

303

+| `GET` | `/api/v1/files` | Lister les fichiers |

304

+| `GET` | `/api/v1/files?folderId=xxx` | Fichiers d'un dossier |

305

+

306

+### Générer une clé API

307

+

308

+1. Connectez-vous en tant qu'admin

309

+2. Allez dans **Administration > Clés API**

310

+3. Cliquez **Nouvelle clé**

311

+4. Copiez la clé générée (affichée une seule fois)

312

+

313

+---

314

+

315

+## Déploiement

316

+

317

+### Mac Studio / NAS (local)

318

+

319

+```bash

320

+# Build de production

321

+npm run build

322

+

323

+# Lancer en production

324

+PORT=3001 npm start

325

+```

326

+

327

+### VPS (avec Nginx)

328

+

329

+```nginx

330

+server {

331

+ listen 443 ssl;

332

+ server_name cloud.votredomaine.com;

333

+

334

+ ssl_certificate /etc/letsencrypt/live/cloud.votredomaine.com/fullchain.pem;

335

+ ssl_certificate_key /etc/letsencrypt/live/cloud.votredomaine.com/privkey.pem;

336

+

337

+ client_max_body_size 500M;

338

+

339

+ location / {

340

+ proxy_pass http://127.0.0.1:3001;

341

+ proxy_http_version 1.1;

342

+ proxy_set_header Upgrade $http_upgrade;

343

+ proxy_set_header Connection 'upgrade';

344

+ proxy_set_header Host $host;

345

+ proxy_set_header X-Real-IP $remote_addr;

346

+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

347

+ proxy_set_header X-Forwarded-Proto $scheme;

348

+ proxy_cache_bypass $http_upgrade;

349

+ }

350

+}

351

+```

352

+

353

+### Docker (optionnel)

354

+

355

+```dockerfile

356

+FROM node:18-alpine

357

+WORKDIR /app

358

+COPY package*.json ./

359

+RUN npm ci

360

+COPY . .

361

+RUN npx prisma generate

362

+RUN npm run build

363

+EXPOSE 3000

364

+CMD ["npm", "start"]

365

+```

366

+

367

+---

368

+

369

+## Roadmap

370

+

371

+### Fait

372

+- [x] Upload multi-fichiers + drag & drop

373

+- [x] Organisation en dossiers imbriqués

374

+- [x] Preview 10+ formats (PDF, images, vidéo, audio, code, markdown...)

375

+- [x] Partage sécurisé avec expiration et mot de passe

376

+- [x] Mode clair / sombre

377

+- [x] Multi-utilisateur avec rôles

378

+- [x] 2FA TOTP

379

+- [x] Recherche IA (Claude Sonnet 4.5)

380

+- [x] Chat IA intégré

381

+- [x] Auto-tagging IA

382

+- [x] OCR intelligent (images + PDF)

383

+- [x] Chiffrement AES-256-GCM

384

+- [x] Système de backup

385

+- [x] Notifications

386

+- [x] API REST avec clés

387

+- [x] Actions en lot (supprimer, déplacer, ZIP, chiffrer)

388

+- [x] Interface mobile-first (iPhone optimisé)

389

+

390

+### À venir

391

+- [ ] Migration PostgreSQL

392

+- [ ] HTTPS / SSL intégré

393

+- [ ] Corbeille (soft delete)

394

+- [ ] Thumbnails auto-générés

395

+- [ ] Video streaming HLS

396

+- [ ] Infinite scroll

397

+- [ ] Docker Compose

398

+- [ ] WebDAV

399

+- [ ] Sync multi-device

400

+

401

+---

402

+

403

+## Sécurité

404

+

405

+SPB Cloud est conçu avec la sécurité en priorité :

406

+

407

+| Mesure | Détail |

408

+|---|---|

409

+| **Mots de passe** | Hash bcrypt (12 rounds) |

410

+| **2FA** | TOTP RFC 6238 (Google Authenticator) |

411

+| **Sessions** | Cookies HTTP-only, SameSite, expiration 24h |

412

+| **Chiffrement** | AES-256-GCM avec clé dérivée (scrypt) |

413

+| **Rate limiting** | 5 tentatives/min sur login |

414

+| **API Keys** | SHA-256 hash, jamais stockées en clair |

415

+| **Upload** | Limite de taille configurable |

416

+

417

+---

418

+

419

+## Auteurs

420

+

421

+<table>

422

+ <tr>

423

+ <td align="center">

424

+ Simon-Pierre Boucher

425

+ Créateur & Propriétaire

426

+ <a href="https://www.spboucher.ai">www.spboucher.ai</a>

427

+ <a href="mailto:spbou4@protonmail.com">spbou4@protonmail.com</a>

428

+ </td>

429

+ <td align="center">

430

+ Claude Opus 4.6

431

+ Co-auteur & Développeur IA

432

+ <a href="https://anthropic.com">Anthropic</a>

433

+ Architecture, code, optimisation mobile

434

+ </td>

435

+ </tr>

436

+</table>

18

437

19

−You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

438

+---

20

439

21

−This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

440

+## Statistiques du projet

22

441

23

−## Learn More

442

+

443

+ <img src="https://img.shields.io/badge/Fichiers-139-blue?style=for-the-badge" alt="Files" />

444

+ <img src="https://img.shields.io/badge/Lignes_de_code-21%2C456-green?style=for-the-badge" alt="Lines" />

445

+ <img src="https://img.shields.io/badge/API_Routes-32-orange?style=for-the-badge" alt="API Routes" />

446

+ <img src="https://img.shields.io/badge/Composants-28-purple?style=for-the-badge" alt="Components" />

447

+

24

448

25

−To learn more about Next.js, take a look at the following resources:

449

+

450

+ <img src="https://img.shields.io/badge/Preview_Plugins-10-teal?style=flat-square" alt="Plugins" />

451

+ <img src="https://img.shields.io/badge/Mod%C3%A8les_DB-12-red?style=flat-square" alt="DB Models" />

452

+ <img src="https://img.shields.io/badge/Fonctions_IA-5-yellow?style=flat-square" alt="AI Functions" />

453

+ <img src="https://img.shields.io/badge/D%C3%A9pendances-42-grey?style=flat-square" alt="Dependencies" />

454

+

26

455

27

−- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

28

−- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

456

+---

29

457

30

−You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

458

+## Contact

31

459

32

−## Deploy on Vercel

460

+- **Email** : [spbou4@protonmail.com](mailto:spbou4@protonmail.com)

461

+- **Site web** : [www.spboucher.ai](https://www.spboucher.ai)

462

+- **GitHub** : [github.com/simonpierreboucher02](https://github.com/simonpierreboucher02)

33

463

34

−The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

464

+---

35

465

36

−Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

466

+

467

+ Built with passion by Simon-Pierre Boucher & Claude Opus 4.6

468

469

+

37

470

		`@@ -0,0 +1,7 @@`
	1	+DATABASE_URL="file:./dev.db"
	2	+SESSION_PASSWORD="change-me-min-32-characters-long-secret-key"
	3	+ANTHROPIC_API_KEY="sk-ant-api03-your-key-here"
	4	+ENCRYPTION_KEY="change-me-32-characters-encryption"
	5	+BACKUP_DIR="./backups"
	6	+UPLOAD_DIR="./uploads"
	7	+MAX_FILE_SIZE="524288000"

		`@@ -1,36 +1,469 @@`
1		−This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
	1	+<p align="center">
	2	+ <img src="https://img.shields.io/badge/SPB_Cloud-v2.0-blue?style=for-the-badge&logo=cloud&logoColor=white" alt="Version" />
	3	+</p>
2	4
3		−## Getting Started
	5	+<h1 align="center">SPB Private Cloud</h1>
4	6
5		−First, run the development server:
	7	+<p align="center">
	8	+ <strong>Cloud personnel privé, souverain, sécurisé et mobile-first.</strong><br/>
	9	+ Plus clean que Dropbox. Plus privé que Google Drive. 100% local-first.
	10	+</p>
	11	+
	12	+<p align="center">
	13	+ <img src="https://img.shields.io/badge/Next.js-14-black?style=flat-square&logo=nextdotjs&logoColor=white" alt="Next.js" />
	14	+ <img src="https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
	15	+ <img src="https://img.shields.io/badge/Tailwind_CSS-3.4-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white" alt="Tailwind" />
	16	+ <img src="https://img.shields.io/badge/Prisma-ORM-2D3748?style=flat-square&logo=prisma&logoColor=white" alt="Prisma" />
	17	+ <img src="https://img.shields.io/badge/SQLite-Database-003B57?style=flat-square&logo=sqlite&logoColor=white" alt="SQLite" />
	18	+ <img src="https://img.shields.io/badge/Claude_AI-Sonnet_4.5-D97706?style=flat-square&logo=anthropic&logoColor=white" alt="Claude AI" />
	19	+</p>
	20	+
	21	+<p align="center">
	22	+ <img src="https://img.shields.io/badge/License-Private-red?style=flat-square" alt="License" />
	23	+ <img src="https://img.shields.io/badge/Platform-macOS%20%7C%20Linux%20%7C%20VPS-lightgrey?style=flat-square" alt="Platform" />
	24	+ <img src="https://img.shields.io/badge/Mobile-Responsive-green?style=flat-square&logo=apple&logoColor=white" alt="Mobile" />
	25	+ <img src="https://img.shields.io/badge/Auth-2FA%20TOTP-purple?style=flat-square&logo=keycdn&logoColor=white" alt="2FA" />
	26	+ <img src="https://img.shields.io/badge/Encryption-AES--256--GCM-orange?style=flat-square&logo=letsencrypt&logoColor=white" alt="Encryption" />
	27	+ <img src="https://img.shields.io/badge/API-REST%20v1-blue?style=flat-square&logo=fastapi&logoColor=white" alt="API" />
	28	+</p>
	29	+
	30	+---
	31	+
	32	+## Qu'est-ce que SPB Cloud ?
	33	+
	34	+SPB Private Cloud est un cloud personnel auto-hébergé conçu pour offrir un contrôle total sur vos données. Aucune dépendance à Google, Dropbox ou iCloud. Vos fichiers restent chez vous, chiffrés, accessibles depuis n'importe quel appareil.
	35	+
	36	+### Pourquoi SPB Cloud ?
	37	+
	38	+\| \| SPB Cloud \| Google Drive \| Dropbox \|
	39	+\|---\|---\|---\|---\|
	40	+\| Propriété des données \| Vous \| Google \| Dropbox \|
	41	+\| Chiffrement at-rest \| AES-256-GCM \| Oui (leur clé) \| Oui (leur clé) \|
	42	+\| IA intégrée \| Claude Sonnet 4.5 \| Gemini (limité) \| Non \|
	43	+\| OCR intelligent \| Oui (Vision IA) \| Basique \| Non \|
	44	+\| Coût mensuel \| 0$ (auto-hébergé) \| 2.99$/mois+ \| 11.99$/mois+ \|
	45	+\| Code source \| Accès complet \| Fermé \| Fermé \|
	46	+\| Multi-utilisateur \| Oui (roles) \| Oui \| Oui \|
	47	+\| 2FA TOTP \| Oui \| Oui \| Oui \|
	48	+\| API REST \| Oui \| Oui \| Oui \|
	49	+
	50	+---
	51	+
	52	+## Fonctionnalités
	53	+
	54	+### Gestion de fichiers
	55	+- Upload multi-fichiers avec drag & drop
	56	+- Upload depuis caméra mobile
	57	+- Rename, delete, move, duplicate
	58	+- Organisation en dossiers imbriqués
	59	+- Breadcrumb navigation
	60	+- Vue grille et liste
	61	+- Sélection multiple + actions en lot
	62	+- Téléchargement de dossiers en ZIP
	63	+- Progress bar d'upload
	64	+
	65	+### Preview de fichiers
	66	+- Images (JPG, PNG, GIF, WebP, SVG)
	67	+- Vidéos (MP4, WebM, MOV)
	68	+- Audio (MP3, WAV, OGG) avec waveform
	69	+- PDF avec navigation de pages
	70	+- Code source avec syntax highlighting (20+ langages)
	71	+- Markdown avec rendu
	72	+- CSV/JSON avec tableau interactif
	73	+- Archives ZIP (exploration du contenu)
	74	+
	75	+### Intelligence Artificielle (Claude Sonnet 4.5)
	76	+- Recherche sémantique : trouvez des fichiers par description naturelle
	77	+- Chat IA : posez des questions sur vos fichiers
	78	+- Auto-tagging : classification automatique par contenu
	79	+- OCR intelligent : extraction de texte depuis images et PDFs
	80	+- Description IA : génération automatique de descriptions
	81	+
	82	+### Sécurité
	83	+- Hash bcrypt pour les mots de passe
	84	+- Authentification 2FA TOTP (Google Authenticator, Authy)
	85	+- Chiffrement AES-256-GCM at-rest
	86	+- Sessions HTTP-only cookies (iron-session)
	87	+- Rate limiting sur le login
	88	+- CSRF protection
	89	+- Validation des types de fichiers
	90	+
	91	+### Multi-utilisateur
	92	+- Système de rôles : Admin, User, Viewer
	93	+- Gestion CRUD des utilisateurs
	94	+- Permissions par rôle
	95	+- Logs d'activité par utilisateur
	96	+
	97	+### Partage sécurisé
	98	+- Liens de partage avec token unique
	99	+- Protection par mot de passe optionnel
	100	+- Date d'expiration configurable
	101	+- Mode téléchargement ou aperçu seul
	102	+- Désactivation instantanée
	103	+- Gestion centralisée des liens
	104	+
	105	+### Système de backup
	106	+- Backup complet (DB + fichiers) en ZIP
	107	+- Backup incrémental
	108	+- Historique des backups avec statut
	109	+- Suppression des anciens backups
	110	+
	111	+### Notifications
	112	+- Notifications en temps réel (polling 30s)
	113	+- Badge avec compteur non-lus
	114	+- Types : upload, backup, IA, partage
	115	+- Marquer comme lu / tout lire
	116	+
	117	+### API REST publique
	118	+- Authentification par clé API (Bearer token)
	119	+- Génération et révocation de clés
	120	+- Permissions configurable (read, write, admin)
	121	+- Expiration optionnelle des clés
	122	+- Endpoint : `GET /api/v1/files`
	123	+
	124	+### Interface
	125	+- Design mobile-first (iPhone optimisé)
	126	+- Mode clair / sombre avec persistance
	127	+- Touch targets 44px minimum
	128	+- Bottom sheet modals sur mobile
	129	+- Safe area support (notch iPhone)
	130	+- Sidebar collapsible
	131	+- Animations Framer Motion
	132	+- Typographie Inter
	133	+
	134	+---
	135	+
	136	+## Stack technique
	137	+
	138	+<p align="center">
	139	+ <img src="https://img.shields.io/badge/Frontend-Next.js_14-000000?style=for-the-badge&logo=nextdotjs" alt="Next.js" />
	140	+ <img src="https://img.shields.io/badge/Language-TypeScript_5-3178C6?style=for-the-badge&logo=typescript" alt="TypeScript" />
	141	+ <img src="https://img.shields.io/badge/Styling-Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss" alt="Tailwind" />
	142	+ <img src="https://img.shields.io/badge/Animation-Framer_Motion-FF0055?style=for-the-badge&logo=framer" alt="Framer" />
	143	+</p>
	144	+<p align="center">
	145	+ <img src="https://img.shields.io/badge/ORM-Prisma-2D3748?style=for-the-badge&logo=prisma" alt="Prisma" />
	146	+ <img src="https://img.shields.io/badge/Database-SQLite-003B57?style=for-the-badge&logo=sqlite" alt="SQLite" />
	147	+ <img src="https://img.shields.io/badge/Auth-iron--session-FF6600?style=for-the-badge" alt="iron-session" />
	148	+ <img src="https://img.shields.io/badge/AI-Anthropic_Claude-D97706?style=for-the-badge&logo=anthropic" alt="Claude" />
	149	+</p>
	150	+
	151	+---
	152	+
	153	+## Installation
	154	+
	155	+### Prérequis
	156	+
	157	+- Node.js 18+
	158	+- npm 9+
	159	+- Clé API Anthropic (pour les fonctionnalités IA)
	160	+
	161	+### Installation rapide
6	162
7	163	```bash
	164	+# 1. Cloner le repo
	165	+git clone https://github.com/simonpierreboucher02/spb-private-cloud.git
	166	+cd spb-private-cloud
	167	+
	168	+# 2. Installer les dépendances
	169	+npm install
	170	+
	171	+# 3. Configurer l'environnement
	172	+cp .env.example .env
	173	+# Éditer .env avec vos valeurs
	174	+
	175	+# 4. Initialiser la base de données
	176	+npx prisma db push
	177	+npx tsx prisma/seed.ts
	178	+
	179	+# 5. Lancer l'application
8	180	npm run dev
9		−# or
10		−yarn dev
11		−# or
12		−pnpm dev
13		−# or
14		−bun dev
15	181	```
16	182
17		−Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
	183	+L'application sera accessible sur [http://localhost:3000](http://localhost:3000).
	184	+
	185	+### Configuration (.env)
	186	+
	187	+```env
	188	+DATABASE_URL="file:./dev.db"
	189	+SESSION_PASSWORD="votre-secret-session-min-32-caracteres"
	190	+ANTHROPIC_API_KEY="sk-ant-api03-..."
	191	+ENCRYPTION_KEY="votre-cle-encryption-32-caracteres"
	192	+BACKUP_DIR="./backups"
	193	+UPLOAD_DIR="./uploads"
	194	+MAX_FILE_SIZE="524288000"
	195	+```
	196	+
	197	+### Identifiants par défaut
	198	+
	199	+\| Champ \| Valeur \|
	200	+\|---\|---\|
	201	+\| Email \| `admin@spbcloud.local` \|
	202	+\| Mot de passe \| `admin123` \|
	203	+\| Rôle \| Admin \|
	204	+
	205	+> Important : Changez le mot de passe après la première connexion via Admin > Utilisateurs.
	206	+
	207	+---
	208	+
	209	+## Architecture
	210	+
	211	+```
	212	+spb-private-cloud/
	213	+├── app/
	214	+│ ├── admin/ # Pages administration
	215	+│ │ ├── activity/ # Historique d'activité
	216	+│ │ ├── api-keys/ # Gestion clés API
	217	+│ │ ├── backup/ # Gestion backups
	218	+│ │ ├── settings/ # Paramètres (2FA)
	219	+│ │ ├── shares/ # Liens partagés
	220	+│ │ └── users/ # Gestion utilisateurs
	221	+│ ├── api/
	222	+│ │ ├── ai/ # Endpoints IA (search, chat, tag, ocr, describe)
	223	+│ │ ├── auth/ # Login, logout, 2FA
	224	+│ │ ├── backup/ # CRUD backups
	225	+│ │ ├── files/ # CRUD fichiers + bulk + versions
	226	+│ │ ├── folders/ # CRUD dossiers + ZIP download
	227	+│ │ ├── keys/ # CRUD clés API
	228	+│ │ ├── notifications/# Notifications
	229	+│ │ ├── shares/ # Liens de partage
	230	+│ │ ├── tags/ # Tags
	231	+│ │ ├── users/ # Gestion utilisateurs
	232	+│ │ └── v1/ # API REST publique
	233	+│ ├── dashboard/ # File explorer
	234	+│ ├── login/ # Page de connexion
	235	+│ └── shared/ # Pages de partage public
	236	+├── components/
	237	+│ ├── admin/ # Composants admin
	238	+│ ├── ai/ # Panel IA
	239	+│ ├── files/ # FileCard, FileExplorer, BulkActions
	240	+│ ├── folders/ # FolderCard, CreateFolderModal
	241	+│ ├── layout/ # AppShell, Sidebar, MobileNav, Notifications
	242	+│ ├── preview/ # Preview engine + plugins (image, video, pdf...)
	243	+│ ├── tags/ # TagBadge, TagSelector
	244	+│ ├── theme/ # ThemeProvider, ThemeToggle
	245	+│ └── ui/ # Button, Modal, SearchBar
	246	+├── lib/
	247	+│ ├── ai.ts # Intégration Claude API
	248	+│ ├── auth.ts # Authentification multi-user
	249	+│ ├── backup.ts # Système de backup
	250	+│ ├── encryption.ts # Chiffrement AES-256-GCM
	251	+│ ├── notifications.ts # Système de notifications
	252	+│ ├── prisma.ts # Client Prisma
	253	+│ ├── rate-limit.ts # Rate limiting
	254	+│ ├── session.ts # Configuration sessions
	255	+│ ├── storage.ts # Gestion fichiers sur disque
	256	+│ └── utils.ts # Utilitaires
	257	+├── prisma/
	258	+│ ├── schema.prisma # Schéma de base de données
	259	+│ └── seed.ts # Seed admin user
	260	+├── types/
	261	+│ └── files.ts # Types TypeScript
	262	+└── uploads/ # Stockage fichiers (git-ignored)
	263	+```
	264	+
	265	+---
	266	+
	267	+## Base de données
	268	+
	269	+### Modèles Prisma
	270	+
	271	+\| Modèle \| Description \|
	272	+\|---\|---\|
	273	+\| `User` \| Utilisateurs avec rôles et 2FA \|
	274	+\| `File` \| Fichiers avec métadonnées, IA, chiffrement \|
	275	+\| `Folder` \| Dossiers imbriqués (arbre récursif) \|
	276	+\| `SharedLink` \| Liens de partage sécurisés \|
	277	+\| `Permission` \| Permissions par dossier/utilisateur \|
	278	+\| `ActivityLog` \| Journal d'activité \|
	279	+\| `FileMetadata` \| Métadonnées étendues (favoris, annotations) \|
	280	+\| `Tag` / `FileTag` \| Système de tags \|
	281	+\| `FileVersion` \| Versioning de fichiers \|
	282	+\| `Notification` \| Notifications utilisateur \|
	283	+\| `ApiKey` \| Clés API REST \|
	284	+\| `BackupLog` \| Historique des backups \|
	285	+
	286	+---
	287	+
	288	+## API REST
	289	+
	290	+### Authentification
	291	+
	292	+Toutes les requêtes à l'API publique nécessitent un header `Authorization` :
	293	+
	294	+```bash
	295	+curl -H "Authorization: Bearer spb_votre_cle_api" \
	296	+ https://votre-domaine/api/v1/files
	297	+```
	298	+
	299	+### Endpoints
	300	+
	301	+\| Méthode \| Endpoint \| Description \|
	302	+\|---\|---\|---\|
	303	+\| `GET` \| `/api/v1/files` \| Lister les fichiers \|
	304	+\| `GET` \| `/api/v1/files?folderId=xxx` \| Fichiers d'un dossier \|
	305	+
	306	+### Générer une clé API
	307	+
	308	+1. Connectez-vous en tant qu'admin
	309	+2. Allez dans Administration > Clés API
	310	+3. Cliquez Nouvelle clé
	311	+4. Copiez la clé générée (affichée une seule fois)
	312	+
	313	+---
	314	+
	315	+## Déploiement
	316	+
	317	+### Mac Studio / NAS (local)
	318	+
	319	+```bash
	320	+# Build de production
	321	+npm run build
	322	+
	323	+# Lancer en production
	324	+PORT=3001 npm start
	325	+```
	326	+
	327	+### VPS (avec Nginx)
	328	+
	329	+```nginx
	330	+server {
	331	+ listen 443 ssl;
	332	+ server_name cloud.votredomaine.com;
	333	+
	334	+ ssl_certificate /etc/letsencrypt/live/cloud.votredomaine.com/fullchain.pem;
	335	+ ssl_certificate_key /etc/letsencrypt/live/cloud.votredomaine.com/privkey.pem;
	336	+
	337	+ client_max_body_size 500M;
	338	+
	339	+ location / {
	340	+ proxy_pass http://127.0.0.1:3001;
	341	+ proxy_http_version 1.1;
	342	+ proxy_set_header Upgrade $http_upgrade;
	343	+ proxy_set_header Connection 'upgrade';
	344	+ proxy_set_header Host $host;
	345	+ proxy_set_header X-Real-IP $remote_addr;
	346	+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	347	+ proxy_set_header X-Forwarded-Proto $scheme;
	348	+ proxy_cache_bypass $http_upgrade;
	349	+ }
	350	+}
	351	+```
	352	+
	353	+### Docker (optionnel)
	354	+
	355	+```dockerfile
	356	+FROM node:18-alpine
	357	+WORKDIR /app
	358	+COPY package*.json ./
	359	+RUN npm ci
	360	+COPY . .
	361	+RUN npx prisma generate
	362	+RUN npm run build
	363	+EXPOSE 3000
	364	+CMD ["npm", "start"]
	365	+```
	366	+
	367	+---
	368	+
	369	+## Roadmap
	370	+
	371	+### Fait
	372	+- [x] Upload multi-fichiers + drag & drop
	373	+- [x] Organisation en dossiers imbriqués
	374	+- [x] Preview 10+ formats (PDF, images, vidéo, audio, code, markdown...)
	375	+- [x] Partage sécurisé avec expiration et mot de passe
	376	+- [x] Mode clair / sombre
	377	+- [x] Multi-utilisateur avec rôles
	378	+- [x] 2FA TOTP
	379	+- [x] Recherche IA (Claude Sonnet 4.5)
	380	+- [x] Chat IA intégré
	381	+- [x] Auto-tagging IA
	382	+- [x] OCR intelligent (images + PDF)
	383	+- [x] Chiffrement AES-256-GCM
	384	+- [x] Système de backup
	385	+- [x] Notifications
	386	+- [x] API REST avec clés
	387	+- [x] Actions en lot (supprimer, déplacer, ZIP, chiffrer)
	388	+- [x] Interface mobile-first (iPhone optimisé)
	389	+
	390	+### À venir
	391	+- [ ] Migration PostgreSQL
	392	+- [ ] HTTPS / SSL intégré
	393	+- [ ] Corbeille (soft delete)
	394	+- [ ] Thumbnails auto-générés
	395	+- [ ] Video streaming HLS
	396	+- [ ] Infinite scroll
	397	+- [ ] Docker Compose
	398	+- [ ] WebDAV
	399	+- [ ] Sync multi-device
	400	+
	401	+---
	402	+
	403	+## Sécurité
	404	+
	405	+SPB Cloud est conçu avec la sécurité en priorité :
	406	+
	407	+\| Mesure \| Détail \|
	408	+\|---\|---\|
	409	+\| Mots de passe \| Hash bcrypt (12 rounds) \|
	410	+\| 2FA \| TOTP RFC 6238 (Google Authenticator) \|
	411	+\| Sessions \| Cookies HTTP-only, SameSite, expiration 24h \|
	412	+\| Chiffrement \| AES-256-GCM avec clé dérivée (scrypt) \|
	413	+\| Rate limiting \| 5 tentatives/min sur login \|
	414	+\| API Keys \| SHA-256 hash, jamais stockées en clair \|
	415	+\| Upload \| Limite de taille configurable \|
	416	+
	417	+---
	418	+
	419	+## Auteurs
	420	+
	421	+<table>
	422	+ <tr>
	423	+ <td align="center">
	424	+ <strong>Simon-Pierre Boucher</strong><br/>
	425	+ Créateur & Propriétaire<br/>
	426	+ <a href="https://www.spboucher.ai">www.spboucher.ai</a><br/>
	427	+ <a href="mailto:spbou4@protonmail.com">spbou4@protonmail.com</a>
	428	+ </td>
	429	+ <td align="center">
	430	+ <strong>Claude Opus 4.6</strong><br/>
	431	+ Co-auteur & Développeur IA<br/>
	432	+ <a href="https://anthropic.com">Anthropic</a><br/>
	433	+ Architecture, code, optimisation mobile
	434	+ </td>
	435	+ </tr>
	436	+</table>
18	437
19		−You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
	438	+---
20	439
21		−This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
	440	+## Statistiques du projet
22	441
23		−## Learn More
	442	+<p align="center">
	443	+ <img src="https://img.shields.io/badge/Fichiers-139-blue?style=for-the-badge" alt="Files" />
	444	+ <img src="https://img.shields.io/badge/Lignes_de_code-21%2C456-green?style=for-the-badge" alt="Lines" />
	445	+ <img src="https://img.shields.io/badge/API_Routes-32-orange?style=for-the-badge" alt="API Routes" />
	446	+ <img src="https://img.shields.io/badge/Composants-28-purple?style=for-the-badge" alt="Components" />
	447	+</p>
24	448
25		−To learn more about Next.js, take a look at the following resources:
	449	+<p align="center">
	450	+ <img src="https://img.shields.io/badge/Preview_Plugins-10-teal?style=flat-square" alt="Plugins" />
	451	+ <img src="https://img.shields.io/badge/Mod%C3%A8les_DB-12-red?style=flat-square" alt="DB Models" />
	452	+ <img src="https://img.shields.io/badge/Fonctions_IA-5-yellow?style=flat-square" alt="AI Functions" />
	453	+ <img src="https://img.shields.io/badge/D%C3%A9pendances-42-grey?style=flat-square" alt="Dependencies" />
	454	+</p>
26	455
27		−- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28		−- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
	456	+---
29	457
30		−You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
	458	+## Contact
31	459
32		−## Deploy on Vercel
	460	+- Email : [spbou4@protonmail.com](mailto:spbou4@protonmail.com)
	461	+- Site web : [www.spboucher.ai](https://www.spboucher.ai)
	462	+- GitHub : [github.com/simonpierreboucher02](https://github.com/simonpierreboucher02)
33	463
34		−The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
	464	+---
35	465
36		−Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
	466	+<p align="center">
	467	+ <sub>Built with passion by Simon-Pierre Boucher & Claude Opus 4.6</sub><br/>
	468	+ <sub>© 2024-2026 SPB Private Cloud. Tous droits réservés.</sub>
	469	+</p>
37	470