Crée ton propre outil de gestion de projets avec Python, Flask, MySQL et Bootstrap

Télécharger le code source du projet sur GitHub

Tu as 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 te détailler chaque étape du projet : la structure, les choix techniques, les fonctionnalités, les défis, et surtout, comment tu peux t’en inspirer pour créer ta propre application Flask.

Objectifs de l’outil de gestion de projets avec Flask

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, utilisateurs
• models/ : User, Project, Task, Assignment
• forms/ : formulaires Flask-WTF
• templates/ : fichiers HTML Jinja2 bien organisés
• config.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 de l’outil de gestion de projets avec Flask

Voici les grandes étapes que j’ai suivies :

1. Initialiser le projet Flask avec un environnement virtuel et la structure de base MVC
2. Installer les extensions nécessaires :pip install flask flask-sqlalchemy flask-migrate flask-login flask-wtf pymysql python-dotenv
3. Créer la base de données MySQL (via phpMyAdmin ou en ligne de commande)
4. Définir les modèles : User, Project, Task, Assignment
5. Créer les Blueprints pour organiser les routes (auth, dashboard, projets, tâches, utilisateurs)
6. Développer les formulaires avec Flask-WTF
7. Créer les templates HTML avec Jinja2 + Bootstrap 5
8. Ajouter le dashboard dynamique avec Chart.js
9. Configurer les migrations de la base avec Flask-Migrate
10. Tester toutes les fonctionnalités en local

Cloner et tester le projet depuis GitHub

Pour tester ce projet sur ta propre machine :

# 1. Cloner le dépôt
git clone https://github.com/LM-Code-Be/project-manager.git
cd project-manager

# 2. Créer et activer un environnement virtuel
python -m venv venv
venv\Scripts\activate          # Windows
# source venv/bin/activate     # macOS / Linux

# 3. Installer les dépendances
pip install -r requirements.txt

# 4. Créer la base « project_manager » dans MySQL,
#    puis adapter SQLALCHEMY_DATABASE_URI dans app/config.py

# 5. Appliquer les migrations (le dossier migrations est déjà fourni)
flask db upgrade

# 6. Lancer l'application
python run.py

# 1. Cloner le dépôt
git clone https://github.com/LM-Code-Be/project-manager.git
cd project-manager

# 2. Créer et activer un environnement virtuel
python -m venv venv
venv\Scripts\activate          # Windows
# source venv/bin/activate     # macOS / Linux

# 3. Installer les dépendances
pip install -r requirements.txt

# 4. Créer la base « project_manager » dans MySQL,
#    puis adapter SQLALCHEMY_DATABASE_URI dans app/config.py

# 5. Appliquer les migrations (le dossier migrations est déjà fourni)
flask db upgrade

# 6. Lancer l'application
python run.py

Rends-toi sur http://localhost:5000 pour découvrir ton tableau de bord !

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

Télécharger le code source du projet sur GitHub

Tu peux tester l’application localement, ou m’envoyer un message si tu as 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 !

Pour aller plus loin

• Avant de cloner le projet, prépare ton poste avec le guide créer un environnement virtuel Python
• Découvre un autre projet Flask et MySQL, plus guidé pas à pas : l’application de bibliothèque personnelle
• Approfondis le SQL avec le tutoriel créer une base de données SQL complète
• Consulte la documentation officielle de Flask et de Flask-Migrate

FAQ : questions fréquentes