DevOps Learning Platform 🚀

Une plateforme interactive Angular pour apprendre et pratiquer le DevOps à travers la création de pipelines CI/CD.

• Builder de Pipeline Drag & Drop : Créez des pipelines en faisant glisser des étapes
• Étapes disponibles :
  • 📝 Code Review
  • 🧪 Tests
  • 🐳 Docker Build
  • ☸️ Kubernetes Deploy
• Soumission pour approbation : Envoyez vos pipelines aux Tech Leads
• Exécution en temps réel : Lancez les pipelines approuvés et suivez leur progression
• Feedback visuel : Statuts colorés (vert = succès, rouge = échec, gris = en attente)

• Dashboard d'approbation : Visualisez tous les pipelines en attente
• Système de review : Approuvez ou rejetez avec des commentaires
• Historique : Consultez tous les pipelines reviewés
• Feedback aux juniors : Guidez les développeurs avec des commentaires constructifs

• Node.js 18+
• npm ou yarn
• Angular CLI 17+

cd devops-learning-platform
npm install

npm start
# ou
ng serve

L'application sera accessible sur http://localhost:4200

• Username: junior1
• Password: n'importe quoi (authentification mock)
• Accès: Builder de pipeline + exécution

• Username: techlead1
• Password: n'importe quoi (authentification mock)
• Accès: Dashboard d'approbation + historique

1. Connexion : Utilisez junior1 comme username
2. Builder :
   • Faites glisser les étapes depuis le panneau de gauche
   • Ordonnez-les selon votre flux de travail
   • Donnez un nom au pipeline
3. Soumission : Cliquez sur "Submit for Approval"
4. Attente : Le pipeline apparaît avec le statut "Pending Approval"

1. Connexion : Utilisez techlead1 comme username
2. Review :
   • Cliquez sur un pipeline en attente
   • Examinez le flux et les étapes
3. Décision :
   • Approuver : Le pipeline devient disponible pour exécution
   • Rejeter : Ajoutez un commentaire explicatif

1. Attendez l'approbation du Tech Lead
2. Cliquez sur le bouton "▶ Run" sur le pipeline approuvé
3. Suivez l'exécution en temps réel :
   • ⏳ Pending (orange/bleu)
   • ✓ Success (vert)
   • ✗ Failed (rouge)

• Framework : Angular 17 (Standalone Components)
• State Management : RxJS BehaviorSubjects
• Drag & Drop : Angular CDK
• Storage : LocalStorage
• Animations : Angular Animations + CSS
• Styling : CSS moderne avec variables

• Background : #0a0a0f (Noir profond)
• Primary : #00ff87 (Vert néon) - Succès
• Warning : #fbbf24 (Orange) - En attente
• Error : #ff4336 (Rouge) - Échec
• Info : #60a5fa (Bleu) - Running

• Font principale : JetBrains Mono (monospace)
• Design inspiré des terminaux et interfaces CI/CD réelles
• Accent sur la lisibilité et le feedback visuel