102 lines
3.5 KiB
Markdown
102 lines
3.5 KiB
Markdown
# Notes — Application web SPA PWA
|
|
|
|
Application de prise de notes personnelle, installable et utilisable hors connexion.
|
|
Les données restent dans le **localStorage** du navigateur : aucune donnée n'est partagée ni transmise à un serveur externe.
|
|
|
|
## Fonctionnalités
|
|
|
|
- Créer, lire, modifier et supprimer des notes
|
|
- Stockage local (localStorage) — données 100 % privées
|
|
- Modale RGPD accessible depuis le bouton **?** dans le header
|
|
- Modale de confirmation avant suppression
|
|
- PWA installable avec service worker (hors connexion)
|
|
- Design responsive mobile-first (Tailwind CSS)
|
|
- Protection des routes inconnues (page d'erreur 404)
|
|
|
|
## Stack technique
|
|
|
|
| Technologie | Rôle |
|
|
| --- | --- |
|
|
| React 19 + TypeScript | UI |
|
|
| Vite 8 | Build tool |
|
|
| Tailwind CSS 4 | Style |
|
|
| Vitest | Tests unitaires |
|
|
| vite-plugin-pwa | Service worker + manifest |
|
|
| nginx | Serveur de production (Docker) |
|
|
|
|
## Prérequis
|
|
|
|
- Node.js >= 20.19.0
|
|
- pnpm >= 9
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
## Commandes
|
|
|
|
| Commande | Description |
|
|
| -------------------- | ------------------------------------------------------------- |
|
|
| `pnpm dev` | Serveur de développement |
|
|
| `pnpm build` | Build de production + PWA (dist/) |
|
|
| `pnpm preview` | Prévisualisation du build en local |
|
|
| `pnpm test` | Tests unitaires (Vitest) |
|
|
| `pnpm test:watch` | Tests en mode watch |
|
|
| `pnpm test:coverage` | Tests + rapport de couverture (coverage/) |
|
|
| `pnpm lint` | Lint ESLint |
|
|
| `pnpm format` | Formatage Prettier |
|
|
| `pnpm typecheck` | Vérification TypeScript |
|
|
| `pnpm check` | Chaîne qualité : lint → format → typecheck → tests → coverage |
|
|
|
|
## Docker
|
|
|
|
### Build et exécution locale
|
|
|
|
```bash
|
|
docker build -t notes .
|
|
docker run -d --name notes -p 8080:80 notes
|
|
```
|
|
|
|
L'app sera accessible sur http://localhost:8080.
|
|
|
|
### Publication sur Docker Hub
|
|
|
|
```bash
|
|
# 1. Construire l'image avec le tag Docker Hub
|
|
docker build -t <votre-pseudo>/notes:latest .
|
|
|
|
# 2. Se connecter à Docker Hub
|
|
docker login
|
|
|
|
# 3. Pousser l'image
|
|
docker push <votre-pseudo>/notes:latest
|
|
```
|
|
|
|
Remplacez `<votre-pseudo>` par votre identifiant Docker Hub.
|
|
|
|
## Architecture
|
|
|
|
```
|
|
src/
|
|
├── components/ # Composants React (UI)
|
|
│ ├── ErrorPage # Page d'erreur 404
|
|
│ ├── FloatingButton # Bouton d'ajout de note
|
|
│ ├── DeleteModal # Modale de confirmation suppression
|
|
│ ├── NoteEditor # Formulaire de création/édition
|
|
│ ├── NoteList # Liste des notes
|
|
│ ├── NoteReadView # Vue lecture d'une note
|
|
│ └── RgpdInfo # Modal RGPD (informations données)
|
|
├── hooks/ # Hook personnalisé useNotes
|
|
├── interfaces/ # Types des props (typeScript)
|
|
├── lib/ # Logique métier (validation, stockage)
|
|
├── types/ # Types shared (Note, NotePatch)
|
|
├── App.tsx # Composant racine
|
|
├── main.tsx # Point d'entrée
|
|
└── style.css # Tailwind + styles globaux
|
|
```
|
|
|
|
## Licence
|
|
|
|
MIT — voir [LICENSE](LICENSE). |