Organisateur personnel élégant
Un site web moderne qui transforme la gestion quotidienne des tâches en une expérience fluide et intuitive. Conçu pour fonctionner entièrement offline avec persistance locale des données.
Contexte & Vision
Ce projet est né d'un constat simple : les gestionnaires de tâches existants sont souvent surchargés de fonctionnalités inutiles ou nécessitent une connexion permanente. L'objectif était de créer un site minimaliste, rapide, et accessible sans dépendance serveur.
En exploitant l'API LocalStorage du navigateur, le site garantit une disponibilité 100% offline tout en offrant une interface moderne avec système de priorités, dates d'échéance et recherche en temps réel.
Fonctionnalités clés
Création instantanée
Ajout de tâches avec titre, détails, priorité et date limite en un clic.
Filtres avancés
Vue par statut, priorité ou date. Recherche dynamique multi‑critères.
Édition en ligne
Modification directe sans popup, validation automatique.
Design adaptatif
Interface optimisée mobile/desktop avec thème sombre élégant.
Gestion sélective
Suppression unique ou en masse avec confirmation visuelle.
100% Offline
Aucune connexion requise, données stockées localement.
Implémentation technique
Architecture modulaire
- Gestionnaire d'état : objet central synchronisant UI et storage
- Rendu déclaratif : génération DOM optimisée par templates
- Event delegation : gestion performante des interactions
- Persistance automatique : sauvegarde à chaque modification
Technologies clés
Front‑end
HTML5 sémantique, CSS3 Grid/Flexbox
Logique
JavaScript ES6+ (classes, modules)
Stockage
LocalStorage avec sérialisation JSON
UX
Transitions CSS, états hover/focus
Fonctionnalités détaillées
Système de priorités
Trois niveaux (Aucune, Moyenne, Haute) avec indicateurs visuels et tri automatique.
Dates d'échéance
Sélecteur natif HTML5, format localisé, et alertes visuelles pour les deadlines.
Recherche intelligente
Filtrage temps réel sur titre et détails, insensible à la casse.
Compteurs dynamiques
Statistiques en temps réel : tâches en cours vs terminées.
Défis techniques
Synchronisation état/localStorage sans latence perceptible
Debounce sur sauvegardes + fallback gracieux
Gestion des edge cases (quota storage, corruption JSON)
Validation stricte et sanitization des entrées
Performance avec listes de 100+ tâches
Virtual scrolling et lazy rendering
Édition inline sans conflit focus/blur
State machine pour les modes d'interaction
Apprentissages & Évolutions
Ce projet a été une opportunité d'approfondir la manipulation du DOM sans framework, de maîtriser les API natives du navigateur, et de concevoir une architecture maintenable pour du JavaScript vanilla. Il a également permis de développer une sensibilité UX forte, notamment sur la gestion des états de chargement et les feedbacks visuels.
Les évolutions futures envisagées incluent : synchronisation cloud optionnelle, PWA avec service worker, tags/catégories pour tâches, et export/import au format JSON.