Skip to content

andreiscurtu-AS/PoolTracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PoolTracker PWA

A Progressive Web App for tracking swimming sessions and sauna usage, built with vanilla JavaScript and modern web technologies.

Features

  • 🏊‍♂️ Track swimming sessions with automatic session numbering
  • 🔄 Count laps and calculate kilometers (0.025 km per lap)
  • 🧖‍♂️ Monitor sauna usage with time tracking
  • 📊 View statistics and progress over time
  • 📱 Mobile-first design that works on all devices
  • 🔄 Offline functionality - works without internet
  • 📲 Installable as a native app on mobile devices

How to Use

Local Development

  1. Clone or download the project files
  2. Open index.html in a web browser
  3. Start tracking your swimming sessions!

Deploy to Web Server

  1. Upload all files to your web server
  2. Ensure HTTPS is enabled (required for PWA features)
  3. Access the app via your domain

Install on Mobile

  1. Open the app in your mobile browser
  2. Look for the "Add to Home Screen" option:
    • iOS Safari: Tap the share button → "Add to Home Screen"
    • Android Chrome: Tap the menu → "Add to Home Screen"
  3. Launch the app from your home screen

Data Storage

  • Local Storage: All data is stored locally in your browser
  • No Server Required: Works completely offline
  • Privacy: Your data never leaves your device

File Structure

PoolTrackerWeb/
├── index.html          # Main HTML file
├── styles.css          # CSS styling
├── app.js             # JavaScript logic
├── manifest.json      # PWA manifest
├── sw.js              # Service worker
├── icons/             # App icons (create these)
└── README.md          # This file

Creating Icons

You'll need to create app icons in various sizes. You can use any image editor or online tools:

  • 72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512 pixels
  • Place them in an icons/ folder
  • Use PNG format

Browser Support

  • ✅ Chrome (Android & Desktop)
  • ✅ Safari (iOS & macOS)
  • ✅ Firefox
  • ✅ Edge
  • ⚠️ Internet Explorer (limited PWA support)

Features in Detail

Dashboard

  • Session counter: Total number of swimming sessions
  • Lap counter: Total laps across all sessions
  • Kilometer calculation: Automatic conversion (0.025 km per lap)
  • Sauna tracking: Number of sauna visits and total time
  • Recent sessions: Last 3 sessions displayed

Add Session

  • Date selection: Choose any date for the session
  • Lap input: Enter number of laps completed
  • Sauna tracking: Optional sauna time recording
  • Validation: Ensures all required fields are filled

History

  • Complete history: All sessions sorted by date
  • Session details: Laps, kilometers, and sauna information
  • Date display: Romanian date format

Technical Details

  • Progressive Web App: Installable, offline-capable
  • Local Storage: Data persistence without server
  • Responsive Design: Works on all screen sizes
  • Modern JavaScript: ES6+ features
  • CSS Grid & Flexbox: Modern layout techniques

Customization

Colors

Edit styles.css to change the color scheme:

  • Primary blue: #007AFF
  • Success green: #34c759
  • Background: #f2f2f7

Calculations

Modify app.js to change the kilometer calculation:

const totalKilometers = totalLaps * 0.025; // Change 0.025 to your pool length

Support

This is a simple, self-contained web app. All functionality is client-side, so no server setup is required. The app will work offline once loaded and can be installed on mobile devices for a native app experience.

About

Personal Pool Tracking App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published