Retour au portfolio

Vélo'v

  • Application web
  • Design
  • Intégration web

Cette page présente l’étude de cas du projet Open Source Vélo'v, incluant son aperçu, les outils utilisés, ainsi que des liens directs vers les ressources associées.

Vélo'v

Description

Présentation

Ce projet est une simulation d'application de réservation de vélos en libre-service développée entièrement en JavaScript côté client.
L’objectif est de démontrer la création d’une interface web interactive capable d’exploiter des données externes en temps réel.

L’application utilise l’API publique de JCDecaux (utilisée notamment pour le service Vélo’v à Lyon) afin d’afficher les stations et leur disponibilité réelle.

Fonctionnement

Les stations sont affichées sur une carte interactive générée avec Leaflet.
Chaque station reflète l’état réel :

  • nombre de vélos disponibles
  • emplacements libres
  • statut de la station

L’utilisateur peut :

  • consulter les stations sur la carte
  • sélectionner une station
  • visualiser ses informations en temps réel
  • simuler une réservation de vélo

Processus de réservation

La réservation se fait en plusieurs étapes :

  1. sélection d’une station
  2. remplissage d’un formulaire dynamique
  3. validation par signature utilisateur

La signature est réalisée via un module HTML5 Canvas permettant de signer directement dans le navigateur.

Une fois confirmée, la réservation est enregistrée dans le localStorage, ce qui permet de conserver l’état même après un rafraîchissement de la page.

Architecture

L’application est développée sans framework externe.

Le code est structuré avec :

  • des classes JavaScript
  • une organisation en modules
  • une séparation des responsabilités pour la gestion :
    • de la carte
    • des stations
    • des réservations
    • de la signature

Interface utilisateur

L’interface propose :

  • une carte dynamique interactive
  • un système de réservation simulé
  • un diaporama animé développé manuellement

Et entre nous : si vous trouvez que ce site est plus clair, plus réactif et franchement plus agréable que le site officiel de Vélo’v... c’est parce que c’est le cas ;P

Développement personnel

Projet réalisé en 2024

Outils et technologies

  • HTML
  • CSS
  • JavaScript
  • API JCDecaux
  • Leaflet