TaskFlow est une application web moderne de gestion des tâches développée pour optimiser la productivité des équipes. Cette solution complète permet de créer, organiser, prioriser et suivre les tâches avec une interface fluide et intuitive.
Conçue pour la start-up TaskFlow, cette application aide les utilisateurs à simplifier la planification de leurs projets grâce à un système de priorités visuelles et des fonctionnalités avancées de tri et filtrage.
- ➕ Ajouter des tâches - Modal avec titre, description, statut, date et priorité
- 👀 Affichage organisé - Liste claire avec priorités visuelles
- ✏️ Modifier des tâches - Édition complète des informations
- 🗑️ Supprimer des tâches - Suppression avec animations fluides
- 🔄 Changer le statut - To Do, Doing, Done
- 🔍 Recherche intelligente - Barre de recherche par titre/mot-clé
- 🏷️ Système de priorités - P1 (Rouge), P2 (Orange), P3 (Vert)
- 📊 Statistiques détaillées - Nombre de tâches par statut
- 📅 Tri automatique - Par date d'échéance ou priorité
- 🎛️ Filtrage avancé - Par priorité et statut
- 🖱️ Drag & Drop - Réorganisation intuitive
- 🔒 LocalStorage - Sauvegarde automatique des modifications
- 🔄 Récupération - Données conservées après actualisation
- 💼 Session persistante - Travail continu entre les visites
Stack Technique :
- Frontend : HTML5 sémantique, CSS3 moderne
- Framework : Bootstrap/Tailwind CSS responsive
- JavaScript : ES6+ avec API LocalStorage
- Animations : CSS transitions et JavaScript
- Accessibilité : Normes WCAG 2.1
# Cloner le repository
git clone https://github.com/hajarwalfi/taskflow-todo.git
# Naviguer dans le dossier
cd taskflow-todoLe site est hébergé sur GitHub Pages et mis à jour automatiquement.
URL du site : https://hajarwalfi.github.io/taskflow-todo
taskflow-todo/
├── 📁 img/
│ ├── icons/ # Icônes de priorités
│ ├── illustrations/ # Images d'illustration
│ └── screenshots/ # Captures d'écran
├── 📄 index.html # Page principale To Do List
├── 📄 contact.html # Page contact support
├── 📄 script.js # JavaScript principal
└── 📄 README.md # Documentation
Modal d'ajout avec champs :
- 📝 Titre - Nom de la tâche (obligatoire)
- 📄 Description - Détails complémentaires
- 🏷️ Statut - To Do, Doing, Done
- 📅 Date d'échéance - Planning temporel
- 🎯 Priorité - P1 (Urgent), P2 (Important), P3 (Normal)
- 🔴 P1 (Rouge) - Tâches urgentes et critiques
- 🟠 P2 (Orange) - Tâches importantes
- 🟢 P3 (Vert) - Tâches normales
- Barre de recherche - Recherche instantanée par titre
- Filtres par priorité - P1, P2, P3
- Filtres par statut - To Do, Doing, Done
- Tri intelligent - Date, priorité, statut
Breakpoints optimisés :
- 📱 Mobile : Jusqu'à 767px
- 📟 Tablette : 768px - 1023px
- 💻 Petit Desktop : 1024px - 1279px
- 🖥️ Grand Desktop : À partir de 1280px
Adaptations mobiles :
- Interface tactile optimisée
- Modals adaptés aux petits écrans
- Navigation simplifiée
- Boutons et zones de clic agrandis
- Vérification des champs obligatoires
- Validation des dates (pas de dates passées)
- Messages d'erreur explicites
- Prévention des doublons
Standards respectés :
- ✅ W3C Validator : HTML/CSS validé
- ✅ WCAG 2.1 : Accessibilité complète
- ✅ Contraste couleurs : Normes d'accessibilité
- ✅ Labels formulaires : Navigation clavier
- ✅ Balises sémantiques : Structure claire
- ✅ SEO Optimized : Meta tags et descriptions
- 🔵 Primaire : #3B82F6 (Bleu productivité)
- 🟢 Success : #10B981 (Vert accomplissement)
- 🟠 Warning : #F59E0B (Orange attention)
- 🔴 Danger : #EF4444 (Rouge urgence)
- ⚪ Neutre : #F8FAFC (Gris clair)
- Titres : Inter (Moderne et lisible)
- Corps : System UI (Performance optimale)
- Monospace : Source Code Pro (Code et données)
UX/UI Design :
- 🎯 User Experience - Parcours utilisateur optimisé
- ♿ Accessibilité - Inclusion et standards WCAG
- 🎨 Visual Design - Système de couleurs cohérent