Todo List MVC Application

Une application moderne et intuitive de gestion des tâches développée en JavaScript vanilla, suivant le modèle MVC et utilisant Webpack.

🌟 Fonctionnalités

• ✨ Interface moderne inspirée par shadcn/ui
• 📱 Design responsive
• 🎯 Gestion complète des tâches (CRUD)
• 🎨 Multiples vues :
  • Liste classique
  • Kanban avec glisser-déposer
  • Calendrier interactif
• 🔍 Filtrage avancé et recherche
• 🏷️ Catégories personnalisées
• 🌓 Thème clair/sombre
• 🔔 Notifications de dates d'échéance
• 💾 Persistance des données (localStorage)

🚀 Démarrage rapide

# Cloner le dépôt
git clone https://github.com/Logipek/TodoList-NodeJs/todo-mvc.git

# Accéder au dossier
cd TodoList-NodeJs

# Installer les dépendances
npm install

🔧 Configuration

Prérequis

• Node.js (v14 ou supérieur)
• npm (v6 ou supérieur)

Dépendances principales

• Webpack (bundling)
• Tailwind CSS (styling)
• FullCalendar (vue calendrier)
• Babel (compilation JavaScript)

📦 Structure du projet

todo-mvc/
├── src/
│   ├── models/
│   │   └── TodoModel.js
│   ├── views/
│   │   ├── ListView.js
│   │   ├── KanbanView.js
│   │   └── CalendarView.js
│   ├── controllers/
│   │   └── TodoController.js
│   ├── index.html
│   ├── index.js
│   └── styles.css
├── webpack.config.js
├── package.json
└── README.md

🚦 Utilisation

Développement

# Lancer le serveur de développement
npm run start

L'application sera disponible sur http://localhost:8081

Production

# Construire pour la production
npm run build

💡 Fonctionnalités détaillées

Gestion des tâches

• Création de tâches avec titre, date d'échéance, priorité et catégorie
• Modification et suppression de tâches
• Marquage des tâches comme complétées
• Glisser-déposer dans la vue Kanban

Filtres et recherche

• Filtrage par catégorie et priorité
• Recherche en temps réel
• Tri par date, priorité ou catégorie

Personnalisation

• Thème clair/sombre personnalisable
• Catégories personnalisées
• Préférences sauvegardées localement

🔒 Sécurité

• Validation des entrées utilisateur
• Sanitation des données
• Protection contre les attaques XSS
• Gestion sécurisée du localStorage

🛠 Stack technique

• JavaScript (ES6+)
• Modèle MVC
• Webpack 5
• Tailwind CSS
• FullCalendar
• API LocalStorage
• API Notifications

📱 Compatibilité navigateurs

• ✅ Chrome (dernières versions)
• ✅ Firefox (dernières versions)
• ✅ Safari (dernières versions)
• ✅ Edge (dernières versions)
• 📱 Support mobile complet

🤝 Contribution

1. Forker le projet
2. Créer une branche (git checkout -b feature/AmazingFeature)
3. Commiter les modifications (git commit -m 'Ajout de AmazingFeature')
4. Pousser vers la branche (git push origin feature/AmazingFeature)
5. Ouvrir une Pull Request

📋 Directives de développement

Style de code

• Utilisation des fonctionnalités ES6+
• Respect du modèle MVC
• Maintien des principes de code propre
• Commentaires pour les logiques complexes
• Noms de variables significatifs

Tests

# Exécuter les tests
npm test

# Exécuter les tests avec couverture
npm run test:coverage

Build

# Build en développement
npm run build:dev

# Build en production
npm run build:prod

🐛 Problèmes connus

• Aucun problème signalé actuellement

📈 Améliorations futures

• [ ] Ajout de la récurrence des tâches
• [ ] Implémentation d'une authentification utilisateur
• [ ] Ajout de l'exportation/importation des données
• [ ] Création d'une version mobile de l'application
• [ ] Ajout de fonctionnalités de collaboration en équipe

📝 Licence

Distribué sous la licence MIT. Voir LICENSE pour plus d'informations.

📮 Contact

Logipek - hugo-damion.me

Lien du projet : GitHub

🙏 Remerciements

• Tailwind CSS - Framework CSS
• shadcn/ui - Inspiration UI
• FullCalendar - Composant calendrier
• Webpack - Bundler