CycloTrack – Real-Time Vélib Station Tracker

June 15, 2023

Overview

CycloTrack is a web application developed as part of an academic project during the second year of my Bachelor's degree in Computer Science at Université Paris Cité. Its main goal is to provide real-time information about Vélib bike stations around Paris and guide users to the closest station from a searched address or GPS location. Built with a full stack using React and Node.js, the platform integrates the official Vélib API to display station availability on an interactive map. CycloTrack offers a practical solution for navigating urban transportation efficiently.

Key Features

Interactive Map: Displays all Vélib stations in Paris with real-time availability of bikes and docks.
Geolocation: Automatically detects the user's current location and centers the map accordingly.
Search Functionality: Users can search by address or use GPS to find the nearest station.
Markers and Routing: Highlights each station with custom markers and provides walking directions.
Optional Features:
- User authentication
- Address history
- Station filters (e.g., only show stations with bikes)
- Data persistence (MongoDB)
- GPS toggle and recentering button

Technologies Used

React.js (frontend)
Node.js + Express (backend)
MongoDB (data storage)
Google Maps API (map and routing)
Vélib Open Data API (station info)

Installation & Usage

To run the project locally:

Bash

# Clone the repository
git clone https://github.com/metux-o0/2022-2023-L2G1-velib-based-web-app.git

# Install dependencies
cd project-directory
npm install

# Run frontend and backend simultaneously
npm start

If that doesn’t work, run the frontend and backend separately in two terminals: npm run front (http://localhost:3000)
npm run back (http://localhost:3030)

To configure:

Add your Google Maps API key to front/src/components/page/Map/apiKey.js.
Update the MongoDB connection string in back/src/services/mongoose.js.

Challenges and Learnings

CycloTrack pushed me to manage both frontend and backend logic in a single project. The biggest challenges were integrating real-time data, ensuring location accuracy, and managing state across map components. This project strengthened my skills in REST APIs, full-stack development, and map-based interfaces.

Outcome

CycloTrack proved to be a practical and functional tool for navigating urban cycling infrastructure. It enhanced my understanding of real-world data integration and laid the groundwork for more advanced full-stack projects.

This project highlights your ability to build real-time, location-based web apps with modern tools and solid user experience.