XciseTrackr

XciseTrackr is a simple web application that allows users track their physical exercise such as cycling and running based on the location where these workouts were performed. The application also enables the user save specific details about each workout activity such as the distance covered, duration of the exercise, and cadence or stride rate which are store in the browser local storage.

This web application features an interactive map from the Leaflet library which allows users to place pin on the specific location where their exercise took place. The entire app was bult with the following:

• HTML5
• SCSS / CSS
• JavaScript
• Leaflet
• Dev dependencies such as: Autoprefixer and PostCSS

Screenshot

Links

• Demo: https://xcisetrackr.netlify.app/

Tech Stack

Helpful Resources

• HTML5:
  • MDN: Mozilla Developer Network - HTML (HyperText Markup Language)
  • W3SCHOOL: HTML Introduction
• CSS3:
  • MDN: Mozilla Developer Network - CSS (Cascading Style Sheets)
  • W3SCHOOL: CSS Introduction
• JAVASCRIPT:
  • MDN: Mozilla Developer Network - JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions
  • W3SCHOOL: JavaScript Introduction
• LEAFLET: JavaScript library for mobile-friendly interactive maps
• DEV DEPENDENCIES:
  • Autoprefixer: Parse CSS and add vendor prefixes to CSS rules
  • PostCSS: Tool for transforming styles with JS plugins
• MUGSHOTBOT: Automatic beautiful link previews

Author's Links

• Portfolio - @SammyLeths
• Linkedin - @SammyLeths
• Twitter - @SammyLeths