Portfolio kermoal.dev
⚙️ Meta ProjectPortfolio moderne avec dashboard administratif complet
Contexte & Objectif
En reconversion développeur web après 20 ans à La Poste, j'avais besoin d'un portfolio professionnel pour présenter mes compétences et faciliter ma recherche de stage (août-septembre 2026).
J'ai créé bien plus qu'un simple site vitrine. Ce portfolio est un outil de travail complet qui démontre mes capacités à développer des fonctionnalités professionnelles :
- Gestion centralisée de tous les rendez-vous en un seul endroit
- Synchronisation automatique avec Google Calendar pour éviter les oublis
- Messages automatiques pour gagner du temps
- Visioconférence intégrée pour les échanges à distance
Objectif : Démontrer ma capacité à créer des applications web complètes et fonctionnelles, pas juste des pages statiques. Un portfolio qui devient lui-même un outil de travail.
Fonctionnalités Principales
Connexion Sécurisée
Connexion rapide avec votre compte Google. Interface d'administration centralisée pour gérer calendriers, messages et rendez-vous en un seul endroit.
Synchronisation Google Calendar
Synchronisation automatique avec Google Calendar dans les deux sens. Les événements ajoutés dans l'un apparaissent instantanément dans l'autre. Gestion de plusieurs calendriers simultanément. Économise 2h/semaine de saisie manuelle.
Système de Rendez-vous
Système de réservation en ligne inspiré des meilleures solutions professionnelles. Les clients choisissent leurs créneaux, reçoivent une confirmation automatique par email. Réduit les allers-retours par email pour fixer un rendez-vous.
Visioconférence Intégrée
Visioconférence intégrée directement dans le portfolio. Les rendez-vous approuvés incluent automatiquement un lien de réunion vidéo. Pas besoin d'installer de logiciel.
Gestion des Messages avec IA
Interface de gestion centralisée des messages avec suggestions de réponses générées par intelligence artificielle. Permet de répondre plus rapidement tout en gardant le contrôle. Réponses générées en moins de 5 secondes.
Design Moderne et Élégant
Design professionnel avec effets de transparence et animations fluides. Mode sombre et clair automatiquement adapté aux préférences de l'utilisateur.
Technologies Utilisées
Ce portfolio utilise des technologies modernes et éprouvées pour garantir performance, sécurité et fiabilité.
Interface & Expérience Utilisateur
Données & Performance
Déploiement & Outils
Intégrations Externes
Défis Résolus
1. Fiabilité de la Base de Données
Contexte : L'outil de gestion de données avait des interruptions temporaires causant des erreurs.
Approche : J'ai créé un système de secours automatique qui bascule vers une connexion directe quand nécessaire.
✅ Résultat : Zéro interruption de service pour les utilisateurs, même pendant les problèmes d'infrastructure.
2. Rapidité du Système de Réservation
Contexte : Le chargement des créneaux disponibles prenait 5 secondes, causant une mauvaise expérience utilisateur.
Approche : J'ai optimisé la façon dont les données sont récupérées, en chargeant plusieurs informations simultanément au lieu de les traiter une par une.
✅ Résultat : Temps de chargement réduit de 5 secondes à 50 millisecondes (90x plus rapide). Expérience instantanée.
3. Interface Calendrier Intuitive
Contexte : Les utilisateurs devaient pouvoir déplacer et redimensionner les événements dans le calendrier de manière naturelle et précise.
Approche : J'ai développé un système de gestion temporelle précis permettant de manipuler les événements directement avec la souris, comme dans un calendrier professionnel.
✅ Résultat : Interface intuitive avec retour visuel immédiat. Gestion de 4 vues (jour, semaine, mois, année).
4. Connexion Utilisateur Fluide
Contexte : La connexion via Google nécessitait de garder l'utilisateur sur la même page sans perdre son contexte.
Approche : J'ai implémenté une connexion via fenêtre popup qui communique avec la page principale, évitant ainsi les redirections perturbantes.
✅ Résultat : Connexion rapide et fluide sans quitter la page. Expérience utilisateur professionnelle.
5. Synchronisation Continue du Calendrier
Contexte : Les connexions avec Google Calendar nécessitent un renouvellement régulier pour maintenir la synchronisation active.
Approche : J'ai mis en place un système automatique qui renouvelle la connexion toutes les 2 heures, de manière invisible pour l'utilisateur.
✅ Résultat : Calendrier toujours à jour en temps réel. Aucune intervention manuelle nécessaire.
Résultats & Métriques
2h/semaine
Temps économisé grâce à la synchronisation automatique et la gestion centralisée
100%
Disponibilité du système depuis le déploiement en production
46 pages
Pages et fonctionnalités distinctes dans le portfolio
0 erreurs
Code de qualité professionnelle avec validation stricte
Apprentissages Clés
Nouvelles Fonctionnalités React et Next.js
Utilisation des dernières versions de React et Next.js pour créer une application moderne. J'ai appris à gérer les actions côté serveur directement, ce qui accélère le développement et améliore les performances.
Authentification et Sécurité
Gestion de la connexion utilisateur sécurisée via Google. J'ai appris à implémenter une authentification fluide qui protège les données tout en offrant une expérience simple.
Intégration Google Calendar
Synchronisation automatique avec Google Calendar. J'ai appris à gérer les mises à jour en temps réel et à maintenir une connexion stable avec les services externes.
Optimisation de la Performance
Techniques d'optimisation pour garantir une expérience fluide et rapide. J'ai appris à charger les données efficacement et à afficher les changements instantanément, réduisant les temps d'attente de 90%.
Qualité et Fiabilité du Code
Utilisation de TypeScript pour garantir la qualité du code. J'ai appris à écrire du code sans erreurs grâce à des outils de vérification automatique, ce qui réduit les bugs et accélère le développement.
Système de Thèmes et Design
Gestion du mode sombre et clair automatiquement adapté aux préférences utilisateur. J'ai appris à créer un design cohérent avec des animations fluides pour une expérience professionnelle.
Intéressé par mon profil ?
Je suis ouvert aux échanges sur des opportunités de stage (août-septembre 2026), des projets tech ou simplement pour discuter de reconversion développeur.
📘 Détails Techniques (pour développeurs)
Stack Technique Complet
Frontend: Next.js 15.5.3 (App Router), React 19, TypeScript 5.9.3 (strict mode), Tailwind CSS 4, Framer Motion, Shadcn UI, react-day-picker v9
Backend: PostgreSQL (Neon), Prisma 6.19.0 + Prisma Accelerate, Better Auth (OAuth Google), Server Actions, Zod validation
Infrastructure: Vercel (auto-deploy), Docker, Turbopack (dev), Husky (git hooks)
Intégrations: Google Calendar API, MiroTalk SFU, Open Router (IA), Resend (emails)
Patterns & Architecture
OAuth popup flow: window.open() + postMessage API pour communication parent-popup. Cookie better-auth.session_token partagé. Parent reload automatique après succès AUTH_SUCCESS.
Google Calendar sync: Synchronisation bidirectionnelle avec tokens sync incrémentaux (réduction 90% appels API). Webhooks push notifications pour sync quasi-instantanée. Channel renewal automatique via cron Vercel (2h UTC).
Calendrier drag & drop: Conversion 1px = 2 minutes, snap 15min, validation durée (15min-24h). Optimistic updates avec rollback automatique. 4 vues (jour/semaine/mois/année).
React Query: Caching strategies, optimistic updates, invalidation automatique. Reduce 450 queries → 5 queries parallèles avec Promise.all().
Défis Techniques Détaillés
1. Prisma Accelerate timeouts: Erreurs P5000/P6008 ("failed to download query-engine.gz") causées par infrastructure Prisma instable. Fallback automatique vers connexion directe PostgreSQL (POSTGRES_URL). Script switch-db.sh pour basculer. Logs [Prisma] au démarrage.
2. Performance booking: 450 requêtes DB séquentielles pour calendrier 90 jours (5 queries/jour). Bulk loading Promise.all() → 5 requêtes parallèles. Calcul dispo en mémoire. Résultat: 5s → 50ms (90x plus rapide).
3. Drag & drop multi-vues: Resize bidirectionnel (début ET fin) avec calculs temporels précis. Conversion pixel→temps (1px = 2min). Snap 15min. Optimistic updates + preview temps réel. Gestion time zones UTC.
4. OAuth UX: Redirection classique cassait contexte dashboard. Solution: popup OAuth + postMessage pour communication inter-window. Cookie session partagé entre popup et parent.
5. Webhook renewal: Webhooks Google Calendar expirent après 7 jours. Cron Vercel (route /api/cron/renew-webhooks protégée CRON_SECRET) renouvelle automatiquement channels toutes les 2h. Tracking expiration en DB.
Performance & Métriques Techniques
Build: ~10s production (Turbopack), 46 routes (40 static, 6 dynamic)
Type safety: TypeScript strict mode, 0 erreurs, Prisma generated types, Zod validation
Optimisations: Bulk queries (450→5), optimistic updates, React Query caching, sync incrémentale tokens (90% réduction API calls)
Développement: 17 sessions réparties sur 20 jours, HMR ultra-rapide (Hot Module Replacement)