Application de gestion de tâches (style todolist) construite avec React, Vite et une stack front moderne. Le dépôt est prêt à évoluer vers un usage en ligne multi-utilisateurs : backend Node.js et MySQL sont la cible documentée (voir dossier docs/).
✅ Inscription / Connexion (démo côté client — à remplacer par une API réelle)
🏠 Dashboard avec statistiques en temps réel
📋 Liste de tâches avec CRUD complet
🏷️ Catégories de tâches (6 catégories disponibles)
📅 Dates d'échéance avec alertes en retard
🔍 Recherche avancée en temps réel
🔎 Système de filtrage par statut et catégorie
🌐 TanStack Query pour le cycle de vie des données (aujourd’hui branché sur une couche locale type API)
🔔 Notifications toast pour les actions
🪄 Animations avec Framer Motion
⚙️ Modal de confirmation avant suppression
🔒 Protection des routes (côté UI uniquement tant qu’il n’y a pas de backend)
💾 Mode sombre / clair
🎨 Interface moderne avec Tailwind CSS
| Étape | Statut |
|---|---|
SPA React + persistance locale (localStorage) |
✅ Actuel |
API Node.js + MySQL (utilisateurs, tâches par user_id) |
🔜 Prévu |
| Auth sécurisée (hash mot de passe, JWT ou session httpOnly) | 🔜 Prévu |
| Déploiement front + API + base | 🔜 Prévu |
Détails techniques : docs/Architecture.md et docs/Plan-backend-et-deploiement.md.
- Pages Connexion et Inscription avec validation de formulaire
- Cookie
th_auth+ profilth_uservia js-cookie / localStorage (session démo, sans vérification serveur) - Store Zustand pour l’état d’authentification côté client
- ProtectedRoute : redirection vers
/loginsi non « connecté » - Déconnexion
- Comptes réels, mots de passe hashés en base, jetons ou sessions gérés par le futur backend Node.js
- Design responsive avec Tailwind CSS
- Mode sombre / clair (
ThemeContext) - Navigation React Router DOM
- Animations Framer Motion
- Toasts react-hot-toast
- CRUD complet (liste, ajout, statut complété, suppression avec modal)
- Séparation tâches actives / terminées
- Persistance locale :
localStorage(cléth_tasks) viasrc/api/tasksApi.js - Catégories : Général, Travail, Personnel, Shopping, Santé, Urgent
- Dates d’échéance, alertes visuelles si en retard
- Badges de catégorie
- Recherche temps réel (titre, description)
- Filtres statut et catégorie, combinaison, compteur de résultats
- Totaux : toutes / actives / terminées, résumé textuel
- TanStack Query (
useQuery,useMutation) avec invalidation du cache - Couche
tasksApi.js: fausse API (délais simulés +localStorage) - Remplacement par appels HTTP vers l’API Node + MySQL (voir
docs/)
- Animation d'apparition des cartes
- Animation au survol des boutons
- Animation au clic (tap)
- Sortie avec
AnimatePresence - Transitions fluides
- TaskCard — catégorie, échéance, actions
- Modal — confirmation de suppression
- ProtectedRoute — routes privées
- ThemeProvider — thème clair / sombre
- Validation des formulaires
- Messages d'erreur et de succès
- États de chargement et vides
- ESLint (
npm run lint)
- Hooks :
useState,useEffect,useContext,useMemo - État global : Zustand
- Context API : thème
- Routing : React Router DOM
- Données asynchrones : TanStack Query (
useQuery,useMutation) - Animations : Framer Motion
- Formulaires contrôlés et validation
- Routes protégées (niveau UI)
- Composants réutilisables : Modal, TaskCard
- Filtrage / recherche optimisés avec
useMemo - Dates : objet
DateJavaScript - Rendu conditionnel
npm installnpm run devApplication : http://localhost:5173 (port par défaut Vite).
npm run buildnpm run lintLe projet utilise base: '/Taskhub/' et un répertoire de build adapté au déploiement sous sous-chemin (ex. GitHub Pages). Pour une racine de domaine, il faudra ajuster base et la configuration du serveur statique.
Aujourd’hui
- React 19, Vite, React Router DOM, Zustand, TanStack Query, Framer Motion, react-hot-toast, Tailwind CSS, js-cookie, PostCSS
Prévu (documenté)
- Node.js (API HTTP), MySQL (données relationnelles), auth et CORS décrits dans
docs/.
docs/
├── Architecture.md # Schémas actuel / cible
└── Plan-backend-et-deploiement.md
src/
├── api/ # tasksApi.js — localStorage (remplaçable par fetch API)
├── components/
│ ├── Modal.jsx
│ ├── ProtectedRoute.jsx
│ └── TaskCard.jsx
├── contexts/
│ └── ThemeContext.jsx
├── pages/
│ ├── Dashboard.jsx
│ ├── Home.jsx
│ ├── Login.jsx
│ ├── Register.jsx
│ ├── NotFound.jsx
│ └── Tasks.jsx
├── stores/
│ └── authStore.js
├── App.jsx
├── main.jsx
└── index.css
Pour tester l’UI, vous pouvez saisir n’importe quel email et mot de passe sur la page de connexion : il n’y a pas encore de serveur qui valide les identifiants. Après mise en place du backend, cette section sera remplacée par la procédure réelle (création de compte, mot de passe oublié si ajouté, etc.).
- Général, Travail, Personnel, Shopping, Santé, Urgent — badges colorés sur les cartes.
- Date limite optionnelle, affichage sur la carte, mise en évidence si la tâche est en retard (et non terminée).
- Recherche en direct sur titre et description ; filtres par statut et catégorie ; compteur de résultats.
- Les tâches sont aujourd’hui dans le localStorage du navigateur (pas de sync entre appareils ni entre utilisateurs).
- L’auth est une coquille pour le routage et les écrans : elle ne suffit pas pour un service public.
- Ne pas considérer le stockage actuel du profil comme un modèle de sécurité ; le plan dans
docs/décrit le passage à MySQL + Node.
| Fichier | Contenu |
|---|---|
| README.md | Vue d’ensemble, démarrage, structure |
| docs/Architecture.md | Architecture actuelle et cible, schéma données |
| docs/Plan-backend-et-deploiement.md | Étapes backend, auth, API, déploiement |
Pour toute question, collaboration ou devis :
- Email : makadenis370@gmail.com
- Téléphone : +243 818 252 385 / +243 997 435 030
- Réseaux sociaux :
Merci pour votre visite et votre intérêt ! ✨
Développé avec ❤️ par Denis Maka pour l'apprentissage de React