Vous avez déjà entendu parler de Trello, Asana ou Notion ? Moi aussi. Et un jour, je me suis dit : « Pourquoi ne pas créer mon propre outil de gestion de projets collaboratifs ? » Pas un clone parfait, mais une application qui me permettrait de créer des projets, d’y associer des tâches, de suivre l’avancement avec un dashboard visuel, et de gérer les utilisateurs impliqués. Bref, un projet complet, utile, et formateur.
Je me suis lancé dans ce challenge en utilisant Python Flask pour le backend, MySQL pour la base de données, Bootstrap 5 pour l’interface, et Chart.js pour le dashboard. Un cocktail parfait pour apprendre en profondeur les bases du développement web.
Dans cet article, je vais vous détailler chaque étape du projet : la structure, les choix techniques, les fonctionnalités, les défis, et surtout, comment vous pouvez vous en inspirer pour créer votre propre application Flask.
Objectifs du projet
Avant de coder, j’ai défini des objectifs clairs :
- Gérer des projets avec un titre, une description, des dates de début/fin.
- Créer des tâches liées à un projet, avec un statut (« à faire », « en cours », « terminé »), une priorité, une échéance.
- Assigner des utilisateurs à chaque tâche.
- Permettre l’authentification avec gestion des rôles (admin, utilisateur).
- Intégrer un dashboard analytics qui donne une vue globale de l’activité.
- Proposer une interface moderne et responsive utilisable sur desktop et mobile.
Stack technique utilisée
Voici les technos que j’ai choisies (et pourquoi) :
- Python Flask : léger, modulaire, parfait pour prototyper rapidement.
- SQLAlchemy : ORM puissant pour modéliser les tables MySQL.
- MySQL : robuste et bien intégré à Flask via PyMySQL.
- Bootstrap 5 : CSS responsive sans prise de tête.
- Chart.js : pour des graphes dynamiques et esthétiques.
- Flask-Login : pour gérer l’authentification en toute simplicité.
Aperçu visuel de l’application
L’application s’ouvre sur un tableau de bord clair et visuel :
- 4 cartes statistiques : projets, tâches, utilisateurs, tâches en retard.
- 1 graphique en ligne : évolution des tâches créées par mois.
- 1 graphique doughnut : répartition des tâches par statut.
L’interface est fluide, les données se mettent à jour automatiquement. C’est propre, moderne, efficace.
Backend : une structure solide
J’ai adopté une architecture MVC avec Blueprints pour isoler les routes :
routes/: auth, dashboard, projets, tâches, utilisateursmodels/: User, Project, Task, Assignmentforms/: formulaires Flask-WTFtemplates/: fichiers HTML Jinja2 bien organisésconfig.py: paramétrage propre de l’URI MySQL et des secrets
J’ai aussi utilisé Flask-Migrate pour gérer les migrations de base de données facilement.
Les relations entre les entités sont bien définies, avec des foreign keys, des tables d’assignation, et une séparation nette des logiques (aucune logique de contrôle dans les templates).
Frontend : ergonomie et esthétique
J’ai utilisé Bootstrap 5 pour créer une interface épurée et réactive. Chaque composant (navbar, tableau, bouton, alert) est adapté au mobile. Les formulaires sont validés côté serveur avec WTForms, mais aussi visuellement grâce aux classes Bootstrap.
Des icônes FontAwesome rendent l’UI plus parlante (ex : ⚡ pour les priorités, 🔴 pour les tâches en retard).
Dashboard analytics : de vraies données
J’ai décidé d’intégrer un dashboard 100% dynamique avec Chart.js. Voici les données réelles que j’y affiche :
Cartes :
- Projets : {{ stats.projects }}
- Tâches : {{ stats.tasks }}
- Utilisateurs : {{ stats.users }}
- Tâches en retard : {{ stats.overdue }}
Graphiques :
- Tâches créées/mois : basé sur la date de création dans la BDD.
- Statuts : à faire / en cours / terminé, comptabilisés par SQL GROUP BY.
Ces données ne sont pas simulées, elles viennent directement de la base. On peut ainsi observer la charge de travail, les retards, et la progression en temps réel.
Sécurité et accès
L’application distingue deux rôles : admin et utilisateur. Certaines routes (comme la suppression de projets ou la création d’utilisateurs) sont restreintes aux admins.
J’ai utilisé Flask-Login pour la gestion des sessions, avec CSRF activé via Flask-WTF pour protéger tous les formulaires.
Les mots de passe sont hashés avec werkzeug.security. Aucun mot de passe en clair n’est stocké.
Idées d’amélioration
- Ajouter un système de commentaires par tâche.
- Envoyer des notifications email ou web.
- Ajouter un mode « kanban » avec drag & drop.
- Export PDF ou CSV du reporting.
Étapes de réalisation du projet
Voici les grandes étapes que j’ai suivies :
- Initialiser le projet Flask avec un environnement virtuel et la structure de base MVC
- Installer les extensions nécessaires :
pip install flask flask-sqlalchemy flask-migrate flask-login flask-wtf pymysql python-dotenv - Créer la base de données MySQL (via phpMyAdmin ou en ligne de commande)
- Définir les modèles : User, Project, Task, Assignment
- Créer les Blueprints pour organiser les routes (auth, dashboard, projets, tâches, utilisateurs)
- Développer les formulaires avec Flask-WTF
- Créer les templates HTML avec Jinja2 + Bootstrap 5
- Ajouter le dashboard dynamique avec Chart.js
- Configurer les migrations de la base avec Flask-Migrate
- Tester toutes les fonctionnalités en local
Cloner et tester le projet depuis GitHub
Pour tester ce projet sur votre propre machine :
# Cloner le dépôt
git clone https://github.com/mon-projet-flask-projets.git
cd mon-projet-flask-projets
# Créer un environnement virtuel
python -m venv venv
venv\Scripts\activate
# Installer les dépendances
pip install -r requirements.txt
# Configurer la base de données
# (via config.py ou fichier .env si fourni)
# Initialiser la base
flask db init
flask db migrate -m "init"
flask db upgrade
# Lancer l’application
python run.py
Rendez-vous sur http://localhost:5000 pour découvrir votre dashboard !
Ce projet est un exercice concret, complet et formateur. Il permet de voir comment construire une application web moderne, sécurisée, connectée à une base MySQL, et capable de proposer une vraie expérience utilisateur.
Je le recommande à tout étudiant, autodidacte ou passionné qui veut monter en compétence sur Flask et le développement backend.
Démo et code source
Le projet complet est disponible sur mon dépot GitHub
Vous pouvez tester l’application localement, ou m’envoyer un message si vous avez des questions. Je serai ravi d’aider !
N’hésites pas aussi à consulte les autres articles du blog et à t’abonner à la NewsLetter pour ne rien rater. A bientôt !
