Wan's TodoList : application de gestion de tâches complète et épurée en React

Contexte et objectifs

Dans le cadre d'un projet de semestre 4 de BUT Informatique, j'ai développé une application Todo List avancée en React. Au-delà d'une simple liste de tâches, j'ai voulu créer un outil complet avec un systeme de filtrage puissant, une visualisation par calendrier et une totale confidentialité grace au stockage local.

L'application est en effet intégralement stockée en local via le LocalStorage du navigateur. Aucune donnée n'est envoyée au serveur, garantissant ainsi une confidentialite totale. Le projet était egalement l'occasion de demonstrer ma maîtrise de React et la création d'applications web complexes.

Fonctionnalités principales

L'application propose un ensemble complet de fonctionnalités pour gerer efficacement ses taches au quotidien.

Gestion complète des tâches

Le système permet de créer, modifier et supprimer des tâches facilement. Chaque tâche peut contenir un titre, une description détaillée, une date d'échéance et des contacts associés. La marque de complétion se fait d'un simple clic avec un indicateur visuel clair.

Systeme de catégories personnalisables

Les catégories permettent d'organiser les tâches de manière visuelle. Chaque catégorie dispose d'un nom personnalisable et d'une couleur au choix parmi une palette complete. Les catégories peuvent être associées à plusieurs catégories, affichées sous forme de badges colorés.

Filtrage et tri avancés

Le système de filtrage est particulièrement complet et permet de combiner plusieurs critères simultanément :

• Filtre par statut : toutes les tâches, non terminées ou terminées uniquement
• Filtre par date de création ou d'échéance
• Filtre par catégories selectionnees
• Filtre par contacts
• Recherche textuelle dans le titre et la description

Les filtres actifs sont affichés sous forme de badges, facilement supprimables individuellement ou globalement.

Vue calendrier

La visualisation calendaire offre une perspective mensuelle des tâches à venir. Chaque jour affiche un compteur des tâches prévues. En cliquant sur un jour, une modale présente la liste complète des tâches avec possibilité d'édition directe.

Alertes visuelles intelligentes

Le système d'alertes prévient visuellement l'utilisateur selon l'urgence des tâches :

• Bordure rouge et icône sablier pour les échéances à moins de 7 jours
• Affichage spécifique pour les échéances récemment dépassees
• Style distinct pour les taches tres anciennes

Une option permet d'afficher ou masquer les taches dont l'écheance est largement dépassée (plus de 7 jours).

Gestion des données

La persistance des données repose entièrement sur le LocalStorage du navigateur. La sauvegarde est automatique et instantanée à chaque modification.

L'application propose plusieurs fonctionnalités de gestion :

• Export au format JSON : sauvegarde complète des taches, catégories et relations
• Import depuis un fichier JSON : restauration avec validation du format
• Réinitialisation : retour aux données par défaut pour démonstration
• Vidage complet : suppression de toutes les tâches

Au premier lancement, une modale de bienvenue propose de démarrer avec des données vierges ou un jeu de données d'exemple.

Architecture technique

Le projet suit une architecture modulaire avec une separation claire des responsabilites :

La gestion d'état s'appuie entièrement sur les React Hooks (useState, useEffect) pour maintenir la cohérence entre les composants. Le projet, massif, compte plus de 25 composants React et environ 3000 lignes de code, ce qui montre la séparation claire du code en de nombreux composants.

Défis techniques relevés

Gestion d'état complexe

L'application gère de multiples états interdépendants : tâches, catégories, relations, filtres actifs et états des modales. La synchronisation entre ces états a nécéssité une architecture réfléchie pour éviter les incoherences.

Système de filtrage combiné

L'implémentation du filtrage permet de combiner tous les critères simultanément avec mise à jour en temps réel. La logique de combinaison (équivalent à un ET logique entre les filtres) garantit des résultats pertinents.

Calculs de dates

Les utilitaires de dates détectent les échéances proches, récemment dépassées ou très anciennes. Le formatage cohérent en JJ/MM/AAAA s'adapte au contexte d'affichage.

Améliorations envisagées

Plusieurs evolutions sont envisageables pour enrichir l'application :

• Responsiveness du site
• Notifications push pour les échéances
• Mode clair
• Statistiques et tableaux de bord
• Système de tâches régulières
• Integration avec Google Calendar ou Outlook (fichiers ical)