Le récit d'une aventure intense de 7 semaines : de l'amélioration de l'onboarding et du monitoring d'infrastructure à la communication temps réel et l'optimisation de personnages 3D.
Le mot de passe saisi sert à ouvrir, modifier et supprimer les commentaires secrets.
Aucun commentaire pour le moment.
링크 정보를 불러오는 중...
Le projet est enfin terminé. Au début, je craignais de ne pas pouvoir implémenter toutes les fonctionnalités prévues en seulement sept semaines, mais nous l'avons fait !
Un coéquipier a suggéré une structure à la Duolingo. Nous avons utilisé le Local Storage pour maintenir les données, en enregistrant même la position du dernier chapitre pour faciliter le retour de l'utilisateur.
J'ai géré la partie frontend de l'authentification avec l'API Fetch standard. J'ai écrit manuellement la logique des jetons Access/Refresh. Grâce à l'expérience d'implémentation de HTTP via TCP pendant le Challenge, j'ai pu travailler en visualisant comment les données circulent.
Nous avons conçu des étapes de "Vérification intermédiaire/finale". J'ai mis en place une logique dans NestJS pour extraire aléatoirement 10 questions afin de créer un environnement de révision personnalisé.
J'ai renforcé Husky (Lint, Format, Type Check, Build) pour sécuriser les PR.
| Composant | Rôle | Description |
|---|---|---|
| Prometheus | Collecte de métriques | Enregistre les métriques serveur |
| Grafana | Dashboard | Visualisation unifiée |
| Loki | Stockage de logs | Centralisation des logs applicatifs |
| Promtail | Collecte de logs | Transmet les logs des conteneurs à Loki |
| Node Exporter | Système de métriques | Surveille CPU/Mémoire/Disque |
J'ai également surmonté ma peur des serveurs en déployant avec succès Docker et en configurant la surveillance.
Points positifs :
J'ai conçu un Provider et un Hook dédiés pour une gestion cohérente des événements Socket.io. Malgré une réécriture complète suite à des erreurs de fusion, nous avons obtenu une structure évolutive.
Intégrer le personnage créé sur Blender au Web a pris une journée entière. J'ai appris l'importance d'un débogage étape par étape plutôt que de compter uniquement sur l'IA.
J'ai amélioré le système en incluant le fuseau horaire local de l'utilisateur dans les en-têtes HTTP, permettant au serveur de renvoyer l'heure exacte.
J'ai appliqué les compressions Gzip/Brotli et utilisé des polices "subset". Pour le personnage 3D, j'ai combiné les Shape Keys dans Three.js et les mouvements corporels dans Blender.
J'ai amélioré l'UX en fournissant des connexions visuelles directes via le rendu SVG lors de la sélection des réponses.
