🛒 Liste d'Achats - PWA

Application web personnelle de gestion de liste d'achats avec priorités, filtres avancés, et récupération automatique d'images. Fonctionne 100% hors-ligne.

📸 Aperçu

Une application moderne pour gérer vos achats futurs avec :

✅ Priorités visuelles (Haute/Moyenne/Basse)
✅ Images produits automatiques via Microlink API
✅ Filtrage et tri avancés
✅ 100% offline - Aucune donnée envoyée en ligne
✅ PWA installable sur PC et mobile
✅ Export CSV et JSON

🚀 Fonctionnalités

🎯 Gestion des Articles

Champs complets : Titre, URL, Prix, Priorité, Catégorie, Date cible, Notes
Attributs personnalisés : Ajouter des champs clé-valeur personnalisés
Images produits : Récupération automatique depuis les URLs
États : Marquer comme "Acheté" ou "À acheter"
Actions : Éditer, Supprimer, Copier le lien

🔍 Filtrage et Tri

Recherche textuelle : Chercher dans titre, catégorie, notes, URL, attributs
Filtres :
- Par priorité (Haute/Moyenne/Basse/Toutes)
- Par état (Tous/À acheter/Achetés)
- Par catégorie (générées dynamiquement)
Tri :
- Par priorité, prix, date cible, date d'ajout, ou titre
- Ordre ascendant ou descendant

💰 Gestion Budgétaire

Budget total : Somme de tous les articles
Budget restant : Somme des articles non achetés
Affichage en EUR avec 2 décimales

💾 Import / Export

Export CSV : Tous les champs avec date dans le nom (liste_achats_YYYY-MM-DD.csv)
Export JSON : Sauvegarde complète
Import JSON : Restauration avec validation des données

📱 Progressive Web App

Installable : Sur desktop (Chrome, Edge) et mobile (iOS, Android)
Offline-first : Fonctionne sans connexion internet
Auto-update : Service Worker avec mise à jour automatique
Icônes : 192x192 et 512x512 pour tous les écrans

🎨 Interface

Design épuré : CSS pur avec variables pour theming
Responsive : Fonctionne sur tous les écrans
Badges colorés : Identification visuelle rapide des priorités
Grid layout : Organisation claire et moderne

📦 Installation

Prérequis

Node.js : Version 18+ (télécharger)
npm : Version 9+ (inclus avec Node.js)

1. Cloner le Projet

git clone https://github.com/dexteee-r/AchatLIST-WebAPP.git
cd Perso-WEB_APP-LISTE_ACHAT

2. Installer les Dépendances

npm install

3. Lancer en Développement

npm run dev

L'application sera accessible sur : http://localhost:5173

4. Build de Production

npm run build

Les fichiers de production seront dans le dossier dist/

5. Prévisualiser le Build

npm run preview

📁 Structure du Projet

Perso-WEB_APP-LISTE_ACHAT/
├── public/                       # Assets statiques
│   ├── pwa-192.png              # Icône PWA 192x192
│   ├── pwa-512.png              # Icône PWA 512x512
│   └── vite.svg
│
├── src/
│   ├── components/              # Composants React
│   │   ├── ItemForm.jsx        # Formulaire d'ajout/édition (169 lignes)
│   │   ├── ItemCard.jsx        # Carte d'article (94 lignes)
│   │   ├── ItemList.jsx        # Liste d'articles (28 lignes)
│   │   ├── FilterBar.jsx       # Filtres et tri (89 lignes)
│   │   ├── BudgetSummary.jsx   # Résumé budgétaire (8 lignes)
│   │   ├── AchatForm.jsx       # Re-export legacy
│   │   └── AchatList.jsx       # Re-export legacy
│   │
│   ├── utils/                   # Utilitaires
│   │   ├── constants.js        # Constantes (PRIORITIES, STORAGE_KEY)
│   │   ├── helpers.js          # Fonctions utilitaires
│   │   └── storages.js         # Gestion JSON
│   │
│   ├── App.jsx                  # Composant racine (163 lignes)
│   ├── main.jsx                 # Point d'entrée + PWA
│   └── styles.css               # Styles globaux
│
├── docs/                        # 📚 Documentation complète
│   ├── ARCHITECTURE.md         # Architecture technique
│   ├── CHANGELOG.md            # Historique des modifications
│   ├── GUIDE_DEVELOPPEMENT.md  # Guide développeur
│   ├── COMPOSANTS.md           # Documentation des composants
│   └── ROADMAP.md              # Feuille de route
│
├── index.html                   # HTML racine
├── vite.config.js              # Configuration Vite + PWA
├── package.json                # Dépendances
├── eslint.config.js            # Configuration ESLint
└── README.md                   # Ce fichier

🛠️ Technologies Utilisées

Technologie	Version	Usage
React	19.1.1	Framework UI
Vite	7.2.2	Build tool ultra-rapide
vite-plugin-pwa	1.1.0	Support PWA
Workbox	7.3.0	Service Worker
ESLint	9.33.0	Linter
Microlink API	-	Récupération images Open Graph

📖 Documentation

Documentation Complète

Toute la documentation est disponible dans le dossier docs/ :

Document	Description
ARCHITECTURE.md	Architecture technique détaillée, flux de données, modèles
GUIDE_DEVELOPPEMENT.md	Guide pour développeurs, ajout de features, debugging
COMPOSANTS.md	Documentation complète de chaque composant
CHANGELOG.md	Historique des modifications
ROADMAP.md	Fonctionnalités futures prévues

Guides Rapides

Ajouter un Nouvel Article

Remplir le champ Titre (requis)
Coller l'URL du produit (optionnel) - L'image sera récupérée automatiquement
Ajouter le prix en EUR
Choisir la priorité (Haute/Moyenne/Basse)
Cliquer sur Ajouter

Filtrer la Liste

Utiliser la barre de recherche pour chercher par mots-clés
Sélectionner un filtre de priorité
Choisir l'état (Tous/À acheter/Achetés)
Sélectionner une catégorie
Choisir un tri (Priorité, Prix, Date, Titre)

Exporter vos Données

CSV : Cliquer sur "Exporter CSV" dans le header
JSON : Cliquer sur "Sauvegarder la liste (load a JSON)"

Les fichiers seront téléchargés avec la date : liste_achats_2025-11-20.csv

Importer des Données

Cliquer sur Import JSON dans le header
Sélectionner votre fichier .json
Les données seront validées et chargées

🎨 Personnalisation

Changer les Couleurs

Modifier les variables CSS dans src/styles.css :

:root {
  --primary: #3b82f6;      /* Couleur primaire */
  --border: #e5e7eb;       /* Couleur des bordures */
  --muted: #6b7280;        /* Texte secondaire */
  --background: #f9fafb;   /* Fond de page */
}

Ajouter une Priorité

Modifier src/utils/constants.js :

export const PRIORITIES = [
  { id: 'critical', label: 'Critique', weight: 4, cls: 'badge purple' },
  { id: 'high', label: 'Haute', weight: 3, cls: 'badge red' },
  // ... autres priorités
];

Ajouter le style dans src/styles.css :

.badge.purple {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #ddd6fe;
}

Changer le Nom de l'App

Modifier dans :

package.json : "name"
index.html : <title>
vite.config.js : manifest.name
src/App.jsx : <div className="title">

🚀 Déploiement

Option 1 : Vercel (Recommandé)

npm install -g vercel
npm run build
vercel --prod

Option 2 : Netlify

Connecter votre repo GitHub à Netlify
Build command : npm run build
Publish directory : dist

Option 3 : Serveur Proxmox (Intranet)

Voir note_a_moi_meme.md pour le guide complet.

Résumé :

# Sur votre VM Linux
npm run build

# Copier dans nginx
sudo cp -r dist/* /var/www/html/
sudo systemctl restart nginx

Accès via l'IP locale : http://192.168.x.x

🔐 Sécurité et Confidentialité

Aucune Donnée Envoyée en Ligne

✅ Toutes les données sont stockées localement dans votre navigateur (localStorage)
✅ Aucun serveur ne reçoit vos informations
✅ Pas de tracking, pas d'analytics
✅ Pas de compte requis

API Externe

L'application utilise Microlink API (https://api.microlink.io) pour récupérer les images Open Graph des produits. Seule l'URL du produit est envoyée à cette API.

Backup Recommandé

Vos données sont dans localStorage. Pour éviter toute perte :

Exporter régulièrement en JSON
Sauvegarder le fichier sur un cloud (Google Drive, Dropbox)
Ou utiliser la synchronisation (feature future)

🐛 Problèmes Connus et Solutions

Les Images ne se Chargent Pas

Causes possibles :

L'API Microlink est lente ou down
Le site cible n'a pas d'image Open Graph
Problème de connexion internet

Solution :

Cliquer sur le bouton 🔍 pour forcer la recherche
Attendre quelques secondes
Vérifier que l'URL est correcte

Mes Données ont Disparu

Causes possibles :

localStorage effacé par le navigateur
Navigation privée utilisée

Solution :

Importer votre dernier backup JSON
Éviter le mode navigation privée
Exporter régulièrement

L'App ne s'Installe Pas (PWA)

Causes possibles :

Navigateur non compatible
Pas en HTTPS (sauf localhost)

Solution :

Utiliser Chrome, Edge, ou Safari (iOS)
S'assurer que le site est en HTTPS en production

📈 Performances

Optimisations Actuelles

✅ useMemo pour calculs coûteux (filtrage, tri, budgets)
✅ localStorage pour persistance rapide
✅ Service Worker pour cache offline
✅ Vite pour build ultra-rapide

Optimisations Futures

React.memo sur ItemCard
Virtualisation pour listes longues (react-window)
Lazy loading des images
Code splitting

🗺️ Roadmap

Consultez ROADMAP.md pour la liste complète des fonctionnalités prévues.

Prochaines Versions

v1.2.0 (fin novembre 2025)

Notifications modernes (react-toastify)
Cache d'images
Export JSON avec date

v1.3.0 (décembre 2025)

Système de tags multiples
Tutoriel interactif
Scraping amélioré

v2.0.0 (Q1 2026)

Listes multiples
Extension navigateur
Mode "Plus envie"

🤝 Contribution

Ce projet est actuellement personnel et privé. Si vous souhaitez contribuer :

Forker le projet
Créer une branche (git checkout -b feature/AmazingFeature)
Commit vos changements (git commit -m 'feat: Add AmazingFeature')
Push vers la branche (git push origin feature/AmazingFeature)
Ouvrir une Pull Request

Conventions de Commit

Utiliser Conventional Commits :

feat: Nouvelle fonctionnalité
fix: Correction de bug
docs: Documentation
style: Changements CSS/visuels
refactor: Refactorisation
test: Tests
chore: Maintenance

📝 Changelog

Voir CHANGELOG.md pour l'historique détaillé des versions.

Version Actuelle : 1.1.0 (20/11/2025)

Refactorisation majeure :

Extraction de 5 composants depuis App.jsx
Création du dossier utils/ avec helpers
Réduction de App.jsx de 430 à 163 lignes
Documentation complète dans docs/

📄 Licence

Pour toute question sur l'utilisation, contactez l'auteur.

👤 Auteur

momoe

GitHub : @dexteee-r
Projet : AchatLIST-WebAPP

🙏 Remerciements

Microlink API pour la récupération d'images
Vite pour le build ultra-rapide
React Team pour React 19
Workbox pour le Service Worker
Claude (Anthropic) pour l'assistance à la refactorisation v1.1.0

📚 Ressources Utiles

Documentation Officielle

Tutoriels

Outils de Développement

React DevTools
Lighthouse (audit PWA)
Can I Use (compatibilité)

🆘 Support

Besoin d'Aide ?

Consultez la documentation complète
Cherchez dans les issues GitHub
Créez une nouvelle issue si nécessaire

Questions Fréquentes

Voir GUIDE_DEVELOPPEMENT.md - FAQ

Fait avec ❤️ et beaucoup de ☕

Dernière mise à jour : 20 novembre 2025 Version : 1.1.0

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
cloudflare-worker		cloudflare-worker
docs		docs
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

🛒 Liste d'Achats - PWA

📸 Aperçu

🚀 Fonctionnalités

🎯 Gestion des Articles

🔍 Filtrage et Tri

💰 Gestion Budgétaire

💾 Import / Export

📱 Progressive Web App

🎨 Interface

📦 Installation

Prérequis

1. Cloner le Projet

2. Installer les Dépendances

3. Lancer en Développement

4. Build de Production

5. Prévisualiser le Build

📁 Structure du Projet

🛠️ Technologies Utilisées

📖 Documentation

Documentation Complète

Guides Rapides

Ajouter un Nouvel Article

Filtrer la Liste

Exporter vos Données

Importer des Données

🎨 Personnalisation

Changer les Couleurs

Ajouter une Priorité

Changer le Nom de l'App

🚀 Déploiement

Option 1 : Vercel (Recommandé)

Option 2 : Netlify

Option 3 : Serveur Proxmox (Intranet)

🔐 Sécurité et Confidentialité

Aucune Donnée Envoyée en Ligne

API Externe

Backup Recommandé

🐛 Problèmes Connus et Solutions

Les Images ne se Chargent Pas

Mes Données ont Disparu

L'App ne s'Installe Pas (PWA)

📈 Performances

Optimisations Actuelles

Optimisations Futures

🗺️ Roadmap

Prochaines Versions

🤝 Contribution

Conventions de Commit

📝 Changelog

Version Actuelle : 1.1.0 (20/11/2025)

📄 Licence

👤 Auteur

🙏 Remerciements

📚 Ressources Utiles

Documentation Officielle

Tutoriels

Outils de Développement

🆘 Support

Besoin d'Aide ?

Questions Fréquentes

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages