Okanban Docker
Application Kanban full-stack (Node.js, Express, PostgreSQL, Svelte) conteneurisée avec Docker, avec authentification et fonctionnalités IA (traduction / correction) via l’API Mistral.
🗂️ O'Kanban – Application de gestion de tâches (Kanban)
Application de gestion de tâches inspirée de Trello / Kanban développée dans le cadre de ma formation.
Le projet est une SPA avec API REST permettant de gérer :
- des listes
- des cartes
- des tags
- des utilisateurs authentifiés
Une fonctionnalité supplémentaire permet d'utiliser l'IA (Mistral API) pour corriger ou traduire le contenu des cartes.
⚠️ Le projet fonctionne parfaitement sans Mistral.
La clé API est seulement nécessaire pour les fonctionnalités IA.
🚀 Fonctionnalités
📋 Gestion des tâches
- création de listes
- création de cartes
- déplacement des cartes (drag & drop)
- gestion des tags
- organisation en colonnes Kanban
🔐 Authentification
- inscription utilisateur
- connexion
- authentification JWT
- récupération de l'utilisateur connecté (
/auth/me)
👥 Gestion des rôles
- rôle
admin - rôle
user - middleware de protection des routes
🛡️ Sécurité
- validation des données avec Joi
- hash des mots de passe avec argon2
- sanitation XSS
🤖 IA (optionnel)
Les cartes peuvent être améliorées avec Mistral AI :
- ✏️ correction grammaticale
- 🌍 traduction
- ✨ amélioration de texte
⚠️ Cette fonctionnalité nécessite une clé API Mistral.
🧱 Architecture
okanban
│
├── api # Backend API (Node.js / Express)
│ ├── controllers # Logique métier des routes
│ ├── middlewares # Middlewares (auth, validation, sécurité)
│ ├── migrations # Migrations Sequelize
│ ├── models # Modèles Sequelize
│ ├── routes # Routes de l'API
│ ├── tests # Tests backend
│ ├── utils # Fonctions utilitaires
│ │
│ ├── app.js # Point d'entrée de l'application API
│ ├── Dockerfile.api # Dockerfile pour le backend
│ ├── eslint.config.js # Configuration ESLint
│ ├── .env.example # Variables d'environnement exemple
│ └── package.json
│
├── client # Frontend SPA (Svelte + Vite)
│ ├── public # Assets statiques
│ ├── src # Code source de l'application
│ │
│ ├── index.html
│ ├── svelte.config.js
│ ├── vite.config.js
│ ├── Dockerfile.cli # Dockerfile pour le frontend
│ ├── .env.example
│ └── package.json
│
├── Dockerfile.database # Dockerfile pour PostgreSQL
├── docker-compose.yml # Orchestration des conteneurs
├── .database.docker.env # Variables d'environnement base de données
├── .dockerignore
├── package.json # Scripts globaux du projet
└── README.md
🛠️ Stack technique
Backend
- Node.js
- Express
- Sequelize
- PostgreSQL
- Joi
- JSON Web Token
- Argon2
Frontend
- Svelte
- Vite
- TailwindCSS
- DaisyUI
- svelte-dnd-action
DevOps
- Docker
- Docker Compose
AI
- Mistral API
⚙️ Installation
1️⃣ Cloner le projet
git clone https://github.com/ton-username/okanban-docker.git
cd okanban
🐳 Lancer le projet avec Docker
1️⃣ Variables d'environnement
Créer un fichier .env dans le dossier api :
# Base de données
POSTGRES_USER=okanban
POSTGRES_PASSWORD=okanban
POSTGRES_DB=okanban
# API
PG_URL=postgres://okanban:okanban@db:5432/okanban
JWT_SECRET=secret
# Mistral (optionnel)
MISTRAL_API_KEY=
MISTRAL_MODEL=mistral-small-latest
MISTRAL_BASE_URL=https://api.mistral.ai/v1/chat/completions
⚠️ Si MISTRAL_API_KEY est vide, les fonctionnalités IA seront désactivées.
Créer un fichier .env dans le dossier client :
VITE_API_URL=http://localhost:3000
2️⃣ Lancer les conteneurs
docker compose up --build -d
3️⃣ Accéder à l'application
Frontend :
http://localhost:4173
API :
http://localhost:3000
🗄️ Initialiser la base de données
Exécuter les migrations et seeds
docker exec -it okanban-api sh
npm run db:create
npm run db:seed
exit
👤 Comptes de test
| username | password | role |
|---|---|---|
| Alice | Passw0rd | admin |
| Bob | Passw0rd | user |
🌍 Déploiement sur un serveur (optionnel)
🚀 Déployer l'application sur un serveur distant
L'application peut être déployée sur un serveur distant grâce à Docker et Docker Hub.
1️⃣ Construire les images Docker
Depuis la racine du projet :
docker compose build
Lister les images :
docker images
2️⃣ Se connecter à Docker Hub
Créer un compte sur :
https://hub.docker.com
Puis se connecter :
docker login
3️⃣ Tagger les images
Remplacer username par votre identifiant Docker Hub.
docker tag okanban-docker-api username/okanban-api
docker tag okanban-docker-client username/okanban-cli
4️⃣ Envoyer les images sur Docker Hub
docker push username/okanban-api
docker push username/okanban-cli
5️⃣ Se connecter au serveur
ssh user@server-ip
6️⃣ Installer Docker sur le serveur
sudo apt update
sudo apt install docker.io docker-compose-plugin
7️⃣ Récupérer les images
docker pull username/okanban-api
docker pull username/okanban-cli
8️⃣ Créer un docker-compose.yml sur le serveur
services:
api:
image: username/okanban-api
ports:
- "3000:3000"
depends_on:
- db
client:
image: username/okanban-cli
ports:
- "4173:4173"
depends_on:
- api
db:
image: postgres:17-alpine
environment:
POSTGRES_USER: okanban
POSTGRES_PASSWORD: okanban
POSTGRES_DB: okanban
9️⃣ Lancer l'application
docker compose up -d
L'application sera accessible via :
http://server-ip:4173
🤖 Configuration de Mistral (optionnel)
Activer les fonctionnalités IA
1️⃣ Créer un compte :
https://console.mistral.ai
2️⃣ Générer une clé API
3️⃣ Ajouter dans .env :
MISTRAL_API_KEY=sk-xxxxxxxxxxxx
4️⃣ Relancer Docker :
docker compose down
docker compose up --build
📡 Exemple d'utilisation de l'API
Connexion
POST /auth/login
{
"username": "Alice",
"password": "Passw0rd"
}
Utilisateur connecté
GET /auth/me
IA – correction de texte
POST /spellcheck
🔐 Sécurité implémentée
- hash des mots de passe (
argon2) - authentification JWT
- validation des données (
Joi) - sanitation XSS
- gestion des rôles
📦 Docker
Le projet utilise Docker Compose pour lancer :
- une base PostgreSQL
- l'API Node.js
- le client Svelte
services:
- db
- api
- client
🎯 Objectif du projet
Ce projet a été réalisé pour :
- pratiquer le développement fullstack
- implémenter une API sécurisée
- comprendre Docker et Docker Compose
- intégrer une API d'IA dans une application
📜 Licence
Auteur Charly Lamena
Projet pédagogique.
