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

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.

3.5 KiB Raw Blame History