MAPTY

A geo-powered workout tracker that logs your runs and cycling sessions directly on an interactive map — built with vanilla JavaScript.

🚀 Demo

Simply open the app in your browser, allow location access, and click anywhere on the map to log a workout at that spot.

✨ Features

• 📍 Geolocation — Automatically detects your current location on load
• 🗺️ Interactive Map — Click anywhere on the map to drop a pin and log a workout
• 🏃 Running Tracker — Log distance, duration, and cadence; calculates pace automatically
• 🚴 Cycling Tracker — Log distance, duration, and elevation gain; calculates speed automatically
• 📋 Workout List — All workouts listed in the sidebar for quick reference
• 🔁 Click to Navigate — Click a workout in the list to fly to its pin on the map
• 💾 Local Storage — Workouts are saved in the browser and persist across page refreshes

🎯 Purpose & Learning Goals

This app was built purely for learning purposes as part of a JavaScript course/practice project. It is not a production application.

The primary focus was mastering Object-Oriented Programming (OOP) in JavaScript, using real-world architecture patterns. Key OOP concepts covered:

🧱 OOP Principles

• Encapsulation — Keeping workout data and logic contained within classes, exposing only what's necessary
• Inheritance — A base Workout class extended by Running and Cycling subclasses using extends and super()
• Polymorphism — Each subclass overrides shared methods (e.g. description formatting) with its own behaviour
• Abstraction — Hiding internal complexity behind clean, readable class interfaces

📚 Other Concepts Practised

• ES6 class syntax, constructors, and method chaining
• Working with third-party libraries — specifically Leaflet.js for interactive maps
• Browser Geolocation API for detecting the user's real-world position
• DOM manipulation — dynamically rendering workout cards and map markers
• Local Storage API — serializing and deserializing class instances for data persistence
• Functional programming patterns alongside OOP architecture

If you're learning JavaScript architecture, this project is a great study in how OOP and functional thinking can coexist cleanly in a real app.

⚠️ Known Limitations

This is a learning project, so it comes with a few intentional shortcomings:

• 📵 Not responsive — designed for desktop only; will not display correctly on mobile or tablet
• 💾 No backend — all data is stored in the browser's local storage and is device-specific
• 🔐 No user accounts — workouts are not synced or shared across devices
• 🗑️ No edit or delete — once a workout is logged, it cannot be modified or removed (without clearing local storage)

🛠️ Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript (ES6+)
• Leaflet.js — open-source interactive maps
• Browser Geolocation API
• Local Storage API

📦 Getting Started

# Clone the repository
git clone https://github.com/your-username/mapty.git

# Navigate into the folder
cd mapty

# Open in your browser
open index.html

⚠️ Make sure to allow location access in your browser when prompted, otherwise the map will not load correctly.

📄 License

This project is open source and available under the MIT License.