Portfolio Manager — Système d'Administration Intégré
🎯 Pitch Court
Portfolio Manager est un système d'administration complet et sécurisé pour gérer la vitrine de tes compétences techniques. Un dashboard intuitif qui te permet de maintenir, mettre à jour et analyser tes projets full-stack depuis un seul endroit, avec authentification renforcée et protection contre les attaques brute-force.
📋 Ce que Fait Portfolio Manager
Portfolio Manager centralise la gestion complète de ton portfolio technologique. Il te permet de :
- 📝 Créer / modifier / supprimer des projets (front-end, back-end, full-stack)
- 📊 Consulter les statistiques d'intérêt pour chaque projet
- 🔍 Organiser les projets par catégories, tags, technologies
- 🎨 Mettre à jour les descriptions, images, liens live et GitHub
- 📈 Tracker l'engagement : vues, clics, interactions par projet
- 🔒 Administrer l'accès avec sécurité d'entreprise
✨ Fonctionnalités Principales
🎛️ Gestion Centralisée des Projets
- CRUD complet : Créer, lire, mettre à jour, supprimer des projets
- Métadonnées riches : titre, description, technologies, date, liens, images, statut
- Organisation intelligente : filtrage, tri, recherche, bulk actions
- Catégorisation : Front-end, Back-end, Full-stack, DevOps, Monitoring
- Export données : CSV, JSON pour analyses externes
🔒 Sécurité Renforcée
- Authentification JWT : tokens sécurisés avec expiration configurable (24h défaut)
- Protection Brute-Force :
- Blocage IP après 3 tentatives échouées
- Cooldown progressif : 5 min → 15 min → 1h
- Verrouillage 24h après 10 tentatives
- Whitelist IP automatique après login réussi
- Logs d'audit complets des tentatives
- Contrôles d'accès : admin exclusif, 2FA TOTP optionnel, sessions limitées
- Validation stricte : côté client et serveur, CSRF protection
📊 Dashboard d'Administration
- Vue d'ensemble : Total projets, projets actifs, vues totales, engagement moyen
- Top Projets : classement par vues, clics sur 30 derniers jours
- Actions rapides : ajouter projet, consulter stats, paramètres sécurité
- Activité récente : historique des modifications avec timestamps
- Alertes sécurité : statut du système, tentatives suspectes
🎨 Interface Utilisateur
- Material UI : composants professionnels et accessibles
- Tailwind CSS : design responsive, animations fluides
- Responsive Design : fonctionne desktop, tablet, mobile
- Dark Mode : réduction de fatigue oculaire
- Accessibilité : WCAG 2.1 AA compliance
📈 Analytics & Insights
- Statistiques par projet : vues, clics CTA, engagement, scroll depth, source traffic
- Device breakdown : desktop, mobile, tablet analytics
- Graphiques interactifs : courbes 7j/30j/90j, heatmaps, comparaisons
- Export rapports : PDF, PNG avec données complètes
- Tendances : identification de projets montants/descendants
🛠️ Outils d'Administration
- Gestion utilisateurs : créer/supprimer comptes admins, permissions granulaires
- Maintenance : backups auto, import/export, nettoyage logs (90j rétention)
- Configuration : JWT settings, seuils brute-force, whitelisting IP, alertes email
- Audit trail : traceback complet de chaque action administrative
🏗️ Architecture Technique
Frontend (React)
- Components : Dashboard, ProjectForm, ProjectList, Analytics, SecurityPanel
- Pages : Login, Admin, NotFound
- State Management : Redux Toolkit (auth, projects, analytics slices)
- Services : API client (axios), JWT management
- Styling : Tailwind CSS + Material UI components
Backend (Symfony 7)
- Controllers : Auth, Projects, Analytics endpoints
- Entities : User, Project, ProjectView models
- Services : JwtService, SecurityService (IP blocking), AnalyticsService
- Security : JwtAuthenticator, IpBlockMiddleware
- Database : Doctrine ORM avec migrations
Database (MySQL)
- users : credentials, JWT secret, 2FA settings, timestamps
- projects : métadonnées complètes (title, description, technologies, status, catégorie, URLs, images)
- security_events : IP, event type, timestamp pour audit trail
- project_views : analytics (IP, device, source, scroll_depth, time_spent, CTA clicks)
🛡️ Sécurité Détaillée
Authentification
Flow Login :
- Admin saisit credentials
- Validation côté client (React Hook Form)
- POST /api/login → Symfony API
- Vérification IP (non-bloquée?)
- Vérification password hash (bcrypt)
- JWT généré (HS256, 24h expiration)
- Refresh token stocké (HttpOnly cookie)
- Axios injection dans Authorization headers
- Redux secure token storage
Protection IP Brute-Force
Logique de blocage :
- 1ère tentative échouée : counter = 1, accès normal
- 3ème tentative échouée : IP bloquée 5 minutes + email alerte
- 10ème tentative échouée : IP bloquée 24h + email alerte critique
- Whitelist automatique : après 1 login réussi depuis IP
- Gestion whitelist : interface admin pour trusted IPs
Secrets & Encryption
- Variables sensibles : fichier .env (git-ignored)
- JWT secret : 256-bit random, stocké en .env
- Database password : hashé bcrypt 12 rounds
- API keys : chiffrement AES-256-GCM
- Logs sensibles : masquage IPs, tokens, emails
💻 Stack Technique
Frontend
- React 18 : hooks, Context API, concurrent rendering
- Vite : bundling ultra-rapide, HMR
- Material-UI : DataGrid, Form, Modal, Chart components
- Tailwind CSS : utility-first, customisation complète
- Redux Toolkit : state management prévisible
- React Hook Form : gestion formulaires légère
- Axios : HTTP client, interceptors JWT
- Recharts : graphiques analytiques
Backend
- Symfony 7.2 : framework PHP moderne
- Doctrine ORM : abstraction BD orientée objet
- LexikJWTAuthenticationBundle : JWT native
- Symfony Security : authentification robuste
- API Platform : REST API auto-générée
- Monolog : logging structuré
- PHPUnit : tests unitaires
Infrastructure & Sécurité
- Apache 2.4 : serveur web production
- PHP 8.2 : langage serveur
- MySQL 8.0 : base de données
- HTTPS/SSL : Let's Encrypt
- JWT (HS256) : tokens sécurisés
- CORS : configuration stricte
- Rate Limiting : protection DDoS
🎯 Cas d'Usage
Pour Développeurs Indépendants
- ✅ Gérer vitrine : mise à jour facile des projets
- ✅ Tracker intérêt : savoir ce qui plaît
- ✅ Administrer sécurisé : authentification forte + IP blocking
- ✅ Analyser trafic : statistiques détaillées par projet
Pour Agences Web
- ✅ Multi-utilisateurs : plusieurs admins avec permissions
- ✅ Projets clients : showcase sécurisé
- ✅ Case studies : analytics + descriptions riches
- ✅ Audit trail : qui a modifié quoi et quand
🌟 Points Forts Techniques
- ✅ Sécurité Enterprise : IP blocking, JWT, 2FA, audit logs
- ✅ Performance : React 18, Vite, memoization
- ✅ Scalabilité : API REST stateless, BD normalisée
- ✅ UX Moderne : Material UI + Tailwind, responsive
- ✅ Maintenance : code structuré, tests, documentation
- ✅ Analytics Intégrées : insights sans dépendance tiers
- ✅ Responsive : fonctionne mobile/tablet/desktop
- ✅ Accessibilité : WCAG 2.1 AA, ARIA labels
🚀 Améliorations Possibles
- Webhooks : notifications Slack/Discord sur changements
- Versioning : historique des modifications (brouillons)
- Collaborators : ajout de contributeurs avec permissions
- Image optimization : WebP, thumbnails automatiques
- CDN integration : images servies depuis CDN global
- A/B Testing : test variantes descriptions/images
- Social sharing : boutons optimisés pour partage
- SEO automation : meta tags auto-générés
- Dark/Light mode toggle : préférence utilisateur
- Mobile app : React Native pour admin mobile
💡 Apprentissages Clés
Ce projet démontre la maîtrise de :
- Full-stack moderne : React + Symfony + MySQL
- Sécurité : JWT, IP blocking, brute-force protection
- UX/UI : design system, accessibility, responsive
- Analytics : tracking utilisateur, insights data
- DevOps : déploiement, monitoring, backups
- Architecture : séparation concerns, SOLID principles
- Performance : optimization, caching, bundling