Task Manager - Application de Gestion de Tâches Full-Stack
Début: 10 Jan 2024
Introduction
Ce projet est une application web complète de gestion de tâches, conçue pour offrir une expérience utilisateur fluide et moderne. L'architecture est basée sur une séparation claire entre le backend (API RESTful) développé avec Node.js/Express et le frontend (Single Page Application) construit avec Vue.js 3. Le tout est entièrement conteneurisé avec Docker, garantissant une mise en place et un déploiement simplifiés, que ce soit en environnement de développement ou de production.
Fonctionnalités Clés
L'application intègre un ensemble de fonctionnalités robustes pour une gestion de projet efficace :
- Assistant IA :
- Génération automatique de listes de tâches : Une fonctionnalité innovante permet de créer des listes de tâches structurées à partir d'un simple prompt en langage naturel, accélérant ainsi la planification des projets.
- Suivi du Temps et Rapports :
- Imputation du temps : Les utilisateurs peuvent enregistrer le temps passé sur chaque tâche, avec la possibilité d'ajouter des commentaires.
- Tableaux de Bord Détaillés : L'application génère des rapports visuels et interactifs, incluant des statistiques globales par tableau Kanban, des rapports mensuels détaillés par utilisateur, et des tableaux paginés pour explorer chaque imputation.
- Gestion de Projet Structurée :
- Organisation par Produits : Les projets (Kanbans) peuvent être regroupés au sein de "Produits", offrant un niveau d'organisation supérieur pour les équipes gérant plusieurs flux de travail.
- Tableaux Kanban personnalisables : Créez et gérez plusieurs tableaux Kanban, avec des colonnes (étapes) entièrement configurables pour s'adapter à n'importe quel workflow.
- Collaboration et Partage Facilité :
- Espace de Discussion Intégré : Chaque tâche dispose de son propre fil de commentaires, permettant des échanges contextuels et un suivi clair des décisions.
- Partage par QR Code : Une fonctionnalité moderne permet de générer un QR Code unique pour chaque tableau Kanban, simplifiant le partage vers des appareils mobiles ou lors de présentations.
- Gestion des Utilisateurs et Sécurité :
- Authentification sécurisée via JSON Web Tokens (JWT) avec Refresh Tokens.
- Gestion des rôles et des permissions.
- Panel d'Administration :
- Interface d'administration AdminJS pour une gestion simplifiée des données de l'application.
Stack Technique
Ce projet met en œuvre un écosystème de technologies modernes et performantes :
- Backend :
- Node.js avec le framework Express.js pour la création de l'API REST.
- Sequelize comme ORM pour interagir avec la base de données MySQL.
- JWT (jsonwebtoken) pour la gestion de l'authentification.
- Frontend :
- Vue.js 3 utilisant l'API Composition
- Vite comme bundler, offrant une expérience de développement ultra-rapide.
- Pinia pour la gestion d'état centralisée (state management).
- Vue Router pour la gestion des routes côté client.
- Tailwind CSS et Sass pour un design moderne, responsive et personnalisable.
- Axios pour les requêtes HTTP vers le backend.
- Infrastructure & DevOps :
- Docker & Docker Compose pour la conteneurisation de l'ensemble des services (backend, frontend, base de données).
- Traefik comme reverse proxy pour le déploiement en production, gérant automatiquement les certificats SSL/TLS.
- Environnements de développement et de production distincts et optimisés.
- Qualité de Code et Tests :
- ESLint et Prettier pour garantir la cohérence et la qualité du code.
- Infrastructure de tests avec Vitest (tests unitaires)
Conclusion
Le développement de ce gestionnaire de tâches a été une excellente occasion de mettre en pratique des compétences full-stack, de la conception de l'API à l'intégration de l'interface utilisateur. Les défis principaux ont été la mise en place d'un système d'authentification JWT sécurisé avec refresh tokens, ainsi que la création d'un pipeline de déploiement robuste et reproductible avec Docker et Traefik. Ce projet démontre ma capacité à construire des applications web complexes, maintenables et prêtes pour la production, en utilisant les meilleures pratiques de l'écosystème JavaScript moderne.
Technologies Utilisées


