logo
  • Projects
  • Articles
logo
  • Projects
  • Articles
Youssef Wael logo

Front-End development and UI engineering with a focus on performance, clarity, and conversion.

Navigation

  • Home
  • Projects
    Front-endReact.jsNext.jsUI/UXWordpress
  • Articles
    FrontendBackendWordPressArtificial IntelligenceDevOps & HostingBusiness & TechDev Tools
  • Services
  • About
  • Contact

Social

©

© 2026 Youssef Wael. All rights reserved.

Front-endUI/UX

Mapty Workout Tracking App on the Map

A JavaScript practice project to log and track workouts (running/cycling) directly on a map with a fully interactive UI.

LiveBehanceRepo

Preview

Front-end

5 screens
project-0
project-1
project-2
project-3
project-4

Details

Overview

Mapty is a learning project built entirely with vanilla JavaScript to practice object-oriented programming and API integration.

The app uses the browser’s geolocation to fetch the user’s current position and renders an interactive map with Leaflet. By clicking on the map, users can log either a running or cycling workout.

Key features include:

Logging workouts with pace/speed calculations.

Fetching weather and location data via external APIs.

Editing, deleting, sorting workouts.

Storing all data in LocalStorage for persistence.

Navigating directly to workouts on the map.

This project demonstrates strong fundamentals in OOP, DOM manipulation, event handling, Local Storage, and AJAX, making it a solid portfolio example for front-end development.

Brief

Front-end

A JavaScript practice project to log and track workouts (running/cycling) directly on a map with a fully interactive UI.

Stack

Technologies

HTML
HTML
CSS
CSS
JavaScript
JavaScript
Git
Git
GitHub
GitHub
Figma
Figma
Behance
Behance