chargement

Développement, UI/UX

Tracks

Tracks

Année

2026

Client

Tracks

Catégories

Développement, UI/UX

Type de projet

Projet académique

Description

Track est une application mobile fullstack de suivi GPS développée à la HEIG-VD dans le cadre d'un projet croisé entre ArchiOWeb et DevMobil. Le projet combine une API REST robuste construite avec Express.js et MongoDB, ainsi qu'une web app Vue.js moderne, formant ensemble une solution complète de tracking sportif. L'application permet d'enregistrer ses courses en temps réel avec une cartographie interactive Mapbox proposant trois styles différents (jour, nuit, topographique). Les coureurs peuvent visualiser leurs performances détaillées, capturer des photos directement via la caméra de leur smartphone avec stockage sur Cloudinary, et suivre les activités de la communauté grâce à une communication temps réel via WebSocket. Le système détecte automatiquement les records personnels sur différentes distances (5K, 10K, semi-marathon, marathon) et enrichit chaque activité avec les conditions météo via l'API Open-Meteo. Côté technique, le backend exploite les fonctionnalités avancées de MongoDB comme les index géospatiaux pour optimiser les requêtes de position GPS, tandis que l'authentification JWT sécurisée protège l'accès avec rate limiting anti-bruteforce. Le frontend Vue 3 utilise la Composition API avec des composables réutilisables et une interface Tailwind CSS au style glassmorphism avec support du dark mode. L'application fonctionne également en mode hors-ligne grâce au stockage localStorage qui synchronise automatiquement les données une fois la connexion rétablie. Ce projet m'a permis de maîtriser l'ensemble de la chaîne fullstack, de la structuration d'une API maintenable aux calculs géospatiaux en passant par l'intégration des APIs hardware du navigateur. L'API atteint 83% de couverture de tests avec Jest et propose une documentation OpenAPI complète. ⚠️ Note importante : Cette application a été conçue avec une approche "Mobile Only". Pour une expérience optimale, veuillez la consulter sur smartphone ou activer la vue mobile (F12) de votre navigateur. Contactez-moi pour plus d'informations sur ce projet.

gallery-1
Cliquer pour agrandir
gallery-2
Cliquer pour agrandir
gallery-3
Cliquer pour agrandir
gallery-4
Cliquer pour agrandir

Intéressé par mon profil ?

Contactez-moi pour transformer vos idées en réalité.