The Mapty App is an interactive web application designed to track and log workouts using geolocation and map functionalities. The app allows users to add details about their outdoor activities, such as running or cycling, and visualize their workout locations on an interactive map. This project highlights advanced front-end development skills, such as working with third-party APIs, user input handling, and dynamic UI updates.
Unique Features:
-- Geolocation API Integration: The app leverages the browser’s Geolocation API to fetch the user’s current location and display it on a map, allowing for real-time and accurate workout tracking based on geographical coordinates.
-- Interactive Map with Leaflet.js: The app uses the Leaflet.js library to integrate a fully interactive map that allows users to click on locations to add new workout entries. Map features include zooming, panning, and markers, creating a seamless and intuitive user experience.
-- Dynamic Workout Form Submission: Users can input detailed information about their workout, such as distance, duration, and type of workout (running or cycling). Based on the workout type selected, additional inputs adjust dynamically, showcasing a smooth, context-sensitive form.
-- Local Storage for Data Persistence: The app uses local storage to save workout data, ensuring that the information persists even after refreshing or closing the browser. This feature demonstrates practical use of local storage for real-world applications.
-- Data-Driven UI Updates: As users log workouts, the UI updates dynamically to display the new workout entries directly below the map. Each workout entry includes relevant data (distance, duration, pace/speed), with color-coded labels to distinguish between running and cycling. Clicking on a workout entry highlights the corresponding marker on the map, linking the data to its geographic representation.
-- Efficient Form Validation and Error Handling: The app validates user input in real-time, ensuring that only valid data (e.g., positive numbers for distance and duration) is accepted. It also includes user-friendly error messages when invalid input is detected.
-- Modern UI/UX Elements: Clean and intuitive design with smooth animations and hover effects. A collapsible sidebar for workout history that enhances usability without cluttering the screen, providing a polished, modern UI.
Technologies Used:
-- Front-End: HTML5, CSS3, JavaScript (ES6+)
-- Third-Party API: Leaflet.js for interactive maps, Geolocation API for accessing user location
-- Local Storage: For data persistence and offline access
This project demonstrates my ability to work with advanced JavaScript, APIs, and dynamic front-end features, all while maintaining a responsive and user-friendly interface.