📝 Todo App - Guide de Gestion des Données

🎯 Vue d'ensemble

Cette application Todo utilise Next.js, Prisma et Neon (PostgreSQL). Ce guide vous aide à gérer et diagnostiquer les problèmes de données.

🛠️ Scripts disponibles

Script	Description	Préserve vos tâches ?	Usage
`check-db-advanced.js`	🔍 Diagnostic complet de la base	N/A	Analyser l'état actuel
`smart-reset.js`	🧠 Reset intelligent	✅ OUI	Résoudre les problèmes de sync
`clean-defaults.js`	🧹 Supprime uniquement les tâches de test	✅ OUI	Nettoyer les données de test
`seed.js`	🌱 Ajoute les 5 tâches par défaut	✅ OUI	Restaurer les tâches de demo
`repair.js`	🔧 Réparation intelligente	✅ OUI	Réparer sans casser
`reset-and-seed.js`	🔥 Reset complet	❌ NON	Remise à zéro totale

🚀 Résolution de problèmes courants

1. 🔄 Problème de synchronisation PC/Mobile

Symptôme : Les données diffèrent entre vos appareils

# Étape 1 : Diagnostic
node scripts/check-db-advanced.js

# Étape 2 : Reset intelligent (préserve vos tâches)
node scripts/smart-reset.js

# Étape 3 : Vérification
node scripts/check-db-advanced.js

Puis côté navigateur :

PC : Ctrl + F5 (Windows) ou Cmd + Shift + R (Mac)
Mobile : Fermer complètement l'app → Rouvrir

2. 👻 Mes tâches ont disparu de l'interface

Symptôme : L'app affiche vide mais les données sont en base

# Vérifier si les données sont bien en base
node scripts/check-db-advanced.js

# Si les données sont là, c'est un problème de cache
# Faire Ctrl + F5 sur PC / Relancer sur mobile

Solutions supplémentaires :

# Si le problème persiste, reset intelligent
node scripts/smart-reset.js

# Puis forcer le rechargement
# PC: Ctrl + F5 / Mobile: Fermer et rouvrir

3. 🧹 Trop de tâches de test polluent mon interface

Symptôme : Les 5 tâches par défaut gênent

# Supprimer uniquement les tâches de test
node scripts/clean-defaults.js

# Vérification
node scripts/check-db-advanced.js

Note : Cette commande préserve toutes vos tâches personnelles et supprime seulement :

"Apprendre Next.js"
"Configurer Prisma avec Neon"
"Créer une todo app"
"Déployer sur Vercel"
"Tester les fonctionnalités"

4. 🌱 Remettre les tâches de démonstration

Symptôme : Je veux les 5 tâches par défaut pour tester

# Ajouter les tâches par défaut
node scripts/seed.js

# Ou réparation si elles ont été supprimées par erreur
node scripts/repair.js

Différence entre les deux :

seed.js : Supprime TOUT puis recrée les 5 tâches par défaut
repair.js : Ajoute les tâches par défaut manquantes sans toucher au reste

5. 🔥 L'application ne fonctionne plus du tout

Symptôme : Erreurs partout, données corrompues

# ⚠️ ATTENTION : Supprime TOUTES vos tâches personnelles
node scripts/reset-and-seed.js

# Puis vider le cache navigateur
# PC: Ctrl + F5 / Mobile: Relancer l'app

⚠️ DERNIER RECOURS UNIQUEMENT - Utiliser smart-reset.js en priorité !

📋 Workflow recommandé

🔧 Pour diagnostiquer un problème :

# 1. Toujours commencer par un diagnostic
node scripts/check-db-advanced.js

# 2. Identifier le problème dans le résultat
# 3. Appliquer la solution appropriée
# 4. Vérifier le résultat
node scripts/check-db-advanced.js

# 5. Vider le cache navigateur

🎯 Pour le développement quotidien :

# Diagnostic rapide
node scripts/check-db-advanced.js

# Nettoyer les tests si besoin
node scripts/clean-defaults.js

# Remettre les démos si besoin
node scripts/seed.js

🚀 Workflow de résolution standard :

# Séquence recommandée pour 99% des problèmes
node scripts/check-db-advanced.js    # Diagnostic
node scripts/smart-reset.js          # Solution
# Ctrl + F5 (PC) / Relancer (Mobile) # Cache
node scripts/check-db-advanced.js    # Vérification

⚠️ Règles importantes

✅ À FAIRE :

Toujours faire check-db-advanced.js AVANT toute action
Privilégier smart-reset.js plutôt que reset-and-seed.js
Vider le cache après tout changement en base
Utiliser repair.js pour réparer sans casser
Tester sur PC ET mobile après chaque modification

❌ À ÉVITER :

# ❌ MAUVAIS : Ne pas enchaîner ces deux commandes
node scripts/smart-reset.js      # Crée les tâches par défaut
node scripts/clean-defaults.js   # Puis les supprime !

# ❌ MAUVAIS : Utiliser reset-and-seed.js sans réflexion
node scripts/reset-and-seed.js   # Supprime VOS tâches personnelles !

💡 Après chaque modification de base :

PC : Ctrl + F5 (force le rechargement)
Mobile : Fermer complètement → Rouvrir
Développement : Vérifier la console navigateur (F12)
Test : Ajouter une nouvelle tâche pour vérifier la synchronisation

🧪 Les 5 tâches par défaut

Quand vous utilisez les scripts, voici les tâches de test qui sont créées :

Apprendre Next.js ⏳
- Suivre un tutoriel complet sur Next.js avec Prisma
Configurer Prisma avec Neon ✅
- Installer et configurer Prisma avec une base de données Neon.tech
Créer une todo app ⏳
- Construire une application de gestion de tâches complète
Déployer sur Vercel ⏳
- Mettre en ligne l'application sur Vercel
Tester les fonctionnalités ✅
- Vérifier que toutes les fonctionnalités marchent correctement

🚨 Guide de dépannage rapide

Problème	Symptôme	Solution rapide
🔄 Sync PC/Mobile	Données différentes sur appareils	`smart-reset.js` + vider cache
👻 Interface vide	App vide mais données en base	`check-db-advanced.js` + `Ctrl+F5`
🧹 Trop de tests	5 tâches par défaut gênantes	`clean-defaults.js`
🌱 Manque les démos	Pas de tâches pour tester	`seed.js` ou `repair.js`
🔥 App cassée	Erreurs partout	`reset-and-seed.js` (dernier recours)
🔄 Après déploiement	Changements pas visibles	Vider cache + attendre propagation

📊 Architecture technique

📁 scripts/
├── 🔍 check-db-advanced.js    # Diagnostic détaillé
├── 🧠 smart-reset.js          # Reset intelligent
├── 🧹 clean-defaults.js       # Nettoyage sélectif
├── 🌱 seed.js                 # Données par défaut
├── 🔧 repair.js               # Réparation
└── 🔥 reset-and-seed.js       # Reset total

📁 src/app/
├── 📄 page.js                 # Page principale
├── 📄 globals.css             # Styles globaux
└── 📁 api/tasks/              # API Routes
    ├── route.js               # GET, POST
    └── [id]/route.js          # PUT, DELETE

📁 src/components/
├── 🎯 TaskList.js             # Composant principal
└── 🎨 TaskList.module.css     # Styles du composant

📁 prisma/
├── schema.prisma              # Schéma de base de données
└── 📁 src/generated/          # Client Prisma généré

🔗 Liens utiles

Base de données : Neon Console
Prisma Studio : npx prisma studio
Déploiement : Vercel Dashboard
Documentation Prisma : prisma.io/docs

📝 Commandes utiles

# Développement
npm run dev                    # Lancer l'app en local
npx prisma studio             # Interface graphique de la DB
npx prisma generate           # Générer le client Prisma

# Base de données
npx prisma db push            # Pousser le schéma vers la DB
npx prisma db pull            # Récupérer le schéma depuis la DB

# Production
npm run build                 # Build pour production
npm start                    # Lancer en production

# Scripts personnalisés (si ajoutés au package.json)
npm run seed                  # Équivalent à node scripts/seed.js
npm run check-db             # Équivalent à node scripts/check-db-advanced.js
npm run smart-reset          # Équivalent à node scripts/smart-reset.js

🎯 Guide de démarrage rapide

Premier lancement :

# 1. Installer les dépendances
npm install

# 2. Générer le client Prisma
npx prisma generate

# 3. Créer les données de test
node scripts/seed.js

# 4. Lancer l'application
npm run dev

En cas de problème immédiat :

# Diagnostic complet
node scripts/check-db-advanced.js

# Solution universelle
node scripts/smart-reset.js

# Vider le cache et tester

🐛 Résolution de problèmes avancés

Erreur de connexion à la base :

# Vérifier les variables d'environnement
cat .env

# Régénérer le client Prisma
npx prisma generate

# Tester la connexion
npx prisma db push

Erreur de build/déploiement :

# Nettoyer et reconstruire
rm -rf .next
npm run build

# Vérifier les dépendances
npm audit fix

Problème de permissions :

# Vérifier les permissions des fichiers
ls -la scripts/

# Rendre les scripts exécutables si nécessaire
chmod +x scripts/*.js

📈 Monitoring et maintenance

Surveillance régulière :

# Vérification hebdomadaire
node scripts/check-db-advanced.js

# Nettoyage mensuel
node scripts/clean-defaults.js
node scripts/seed.js

Sauvegarde des données personnelles :

# Exporter vos tâches avant maintenance
npx prisma studio
# Puis Export → JSON

📝 Changelog

2025-07-02 13:36 - Version complète avec guide avancé
2025-07-02 13:34 - Mise à jour avec solutions détaillées
2025-07-02 - Ajout des workflow et bonnes pratiques
2025-07-02 - Création du guide initial
Utilisateur : fannysaez
Version : 3.0

👨‍💻 Informations projet

Développeur : fannysaez
Dernière mise à jour : 2025-07-02 13:36:06 UTC
Technologies : Next.js 14, Prisma, Neon PostgreSQL
Déploiement : Vercel
Status : Production Ready ✅

📌 Gardez ce README.md à portée de main pour résoudre rapidement tous vos problèmes de données !

🎯 Conseil pro : Marquez ce fichier en favori et consultez-le dès que quelque chose ne va pas. La plupart des problèmes se résolvent avec smart-reset.js + vider le cache.

🚀 Astuce : Ajoutez ces scripts à votre package.json pour les utiliser avec npm run :

{
  "scripts": {
    "check-db": "node scripts/check-db-advanced.js",
    "smart-reset": "node scripts/smart-reset.js",
    "clean-defaults": "node scripts/clean-defaults.js",
    "repair": "node scripts/repair.js",
    "seed": "node scripts/seed.js"
  }
}

📞 Support : Si un problème persiste après avoir suivi ce guide, vérifiez :

Les logs de la console navigateur (F12)
Les variables d'environnement (.env)
La connectivité à Neon
Les permissions des fichiers# guide-gestion-donnees-app-todo-nextjs

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
README.md		README.md

fannysaez/guide-gestion-donnees-app-todo-nextjs

Folders and files

Latest commit

History

Repository files navigation