Tracks
Introduction
Track est une application mobile de suivi GPS pour coureurs, développée dans le cadre d'un projet croisé entre deux cours de 3ème année à la HEIG-VD : ArchiOWeb (architecture web orientée services) et DevMobil (développement mobile). Le projet se compose de deux sous-projets complémentaires : une API REST robuste côté backend et une web app Vue.js côté frontend, formant ensemble une solution complète de tracking sportif.
L'application permet d'enregistrer ses courses en temps réel avec cartographie Mapbox, de visualiser ses performances et statistiques, de capturer des photos via la caméra native, et de suivre les activités de la communauté via WebSocket. Un projet fullstack ambitieux qui m'a permis de maîtriser l'ensemble de la chaîne de développement, du modèle de données MongoDB jusqu'à l'interface utilisateur responsive.
⚠️ Note importante sur la démo Cette application a été conçue avec une approche "Mobile Only". Si vous consultez la démo sur un ordinateur, l'interface ne sera pas adaptée. Pour une expérience optimale, veuillez l'ouvrir sur votre smartphone ou activer la vue mobile (F12) de votre navigateur.
Date
Janvier 2026
Domaine
Backend / API
Liens
Repository Backend : track-api
Repository Frontend : track-front
Le projet
Côté backend, l'API repose sur Express.js 5 et MongoDB avec Mongoose. L'architecture suit le pattern MVC avec une séparation claire entre routes, contrôleurs, services et modèles. L'authentification utilise JWT avec hash bcrypt et rate limiting pour la protection anti-bruteforce. La base de données exploite les index géospatiaux 2dsphere pour les positions GPS et les transactions pour garantir l'intégrité des données.
Le cœur de l'API gère l'enregistrement d'activités complètes avec polyline encodée pour la compression des traces, positions GeoJSON, et laps détaillés par kilomètre. À chaque création d'activité, le serveur interroge l'API Open-Meteo pour enrichir automatiquement les données avec les conditions météo et calcule un score de difficulté. Le système maintient des statistiques agrégées à quatre niveaux (Ever, Year, Month, Week) et détecte automatiquement les records personnels sur 5K, 10K, semi-marathon et marathon.
Côté frontend, l'application Vue 3 utilise la Composition API avec script setup et des composables réutilisables (useFetchJson, useToast, useJsonStorage). La cartographie Mapbox GL JS propose trois styles (jour, nuit, topographique) avec géolocalisation temps réel et rendu des traces via sources GeoJSON dynamiques. L'interface Tailwind CSS adopte une esthétique glassmorphism avec support du dark mode via CSS variables.
Le tracking GPS échantillonne à 1 point par seconde et calcule en continu la distance via Haversine, l'allure instantanée, et le dénivelé via l'API geo.admin.ch pour les altitudes suisses. La page d'accueil affiche un aperçu de la semaine, les statistiques communautaires en temps réel via WebSocket, et un feed des dernières activités. Le profil présente un graphique SVG interactif des 12 dernières semaines, un calendrier d'activités, et les records personnels.
La gestion des médias exploite la caméra native du smartphone avec upload sur Cloudinary. Le mode hors-ligne stocke les traces dans localStorage et synchronise automatiquement une fois la connexion rétablie. Le projet backend atteint 83% de couverture de tests avec Jest et propose une documentation OpenAPI complète.
Ce qu'il m'as apporté
Ce projet m'a permis de maîtriser l'ensemble de la chaîne fullstack. Côté backend, j'ai appris à structurer une API Express.js maintenable, à exploiter les fonctionnalités avancées de MongoDB (agrégations, index géospatiaux, transactions), et à implémenter une authentification JWT sécurisée avec les bonnes pratiques de rate limiting et validation des entrées.
Côté frontend, j'ai approfondi Vue 3 et la Composition API en créant des composables réutilisables et en maîtrisant les patterns réactifs. L'intégration de Mapbox GL JS m'a appris à manipuler des cartes interactives professionnelles avec sources GeoJSON dynamiques et génération d'images statiques.
L'exploitation des APIs hardware du navigateur (géolocalisation haute précision, accès caméra, localStorage) m'a confronté aux réalités du développement mobile web : gestion des permissions, fallbacks, et gestion des cas offline. Les calculs géospatiaux (Haversine, conversion WGS84 vers LV95) m'ont donné une compréhension pratique des mathématiques appliquées à la géolocalisation.
La communication temps réel via WebSocket entre le backend et le frontend m'a initié aux patterns pub/sub et à la synchronisation d'état réactif. La combinaison localStorage/API REST pour le mode offline-first illustre la complexité de maintenir une expérience fluide sans connexion.
Un projet complet qui reflète ma philosophie : comprendre en profondeur chaque technologie plutôt qu'assembler des templates. Si vous souhaitez en savoir plus sur ce projet contactez moi ici.
