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
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
Avec Docker Compose (recommandé) :
docker compose up -d
Le port peut être changé via la variable d'environnement PORT (par défaut 8080) :
PORT=9090 docker compose up -d.
Ou avec les commandes Docker :
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
# 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.