Progress Tracker Pro

Modern, installable progress tracker built with plain HTML, CSS, and JavaScript.

Features

• Dashboard, habits, CP log, dev log, roadmap, reviews, money tracking
• New Resources tab to save your personal links and notes
• Stronger local saving with main + backup storage keys
• Export/import JSON backup
• Install as desktop app (PWA) with shortcut support

Run On Your PC

Option 1: Open directly

1. Open index.html in Chrome or Edge

Option 2: Run a local server (recommended for installable app features)

1. In project folder run: python3 -m http.server 8080
2. Open: http://localhost:8080

Make Desktop Shortcut App

1. Open the app in Chrome or Edge (prefer server URL like http://localhost:8080)
2. Go to Settings tab
3. Click Install as Desktop App if visible
4. If button is hidden, use browser menu:
   • Chrome: More tools > Create shortcut (check Open as window)
   • Edge: Apps > Install this site as an app

After install, you can launch it from desktop/app launcher like a normal app.

Why Data Was Not Saving (And Fix)

The app saves to browser localStorage. Data can appear missing when:

• You switch between different URLs/origins (file:// vs localhost vs deployed URL)
• Browser storage is blocked (private mode or strict settings)
• You clear site data/cache

Now the app writes to:

• beast_tracker_v2 (main)
• beast_tracker_backup_v2 (backup)
• beast_tracker_v1 (legacy compatibility)

Best practice:

1. Always use one URL consistently
2. Keep regular JSON backups from Settings > Export All Data

Step-By-Step: Fix Data Deleting After Restart

1. Open the app with one stable URL only.
2. Use http://localhost:8080 instead of opening file directly.
3. Do not use Private/Incognito mode.
4. In browser settings, allow site data and cookies for localhost or your deployed domain.
5. Add one test record in any tab.
6. Go to Settings and check Last Saved time updates.
7. Restart browser and PC.
8. Open the same exact URL again.
9. If data is still missing, use Import Data from your last JSON backup.
10. Keep weekly backups with Export All Data.

Step-By-Step: Manage Your "Database" Safely

This project is a static app, so the default database is browser storage.

1. Primary store: localStorage key beast_tracker_v2.
2. Secondary store: localStorage key beast_tracker_backup_v2.
3. Recovery store: IndexedDB snapshot store progress_tracker_db.
4. Use one browser and one URL for daily usage.
5. Export backup JSON every week or before major edits.
6. Save backup file to Google Drive or another external location.
7. Before changing device or domain, Export on old URL and Import on new URL.

Optional: Real Cloud Database (If You Need Multi-Device Sync)

If you want data to sync automatically across devices, move from browser-only storage to a backend database.

1. Create a Supabase project.
2. Create a table for tracker_data with columns id, user_id, payload_json, updated_at.
3. Add Supabase JS client in the app.
4. On each save, write payload_json to Supabase.
5. On app load, fetch latest payload_json and merge with local snapshot.
6. Keep local backup as fallback when offline.

Current project already supports robust local persistence and manual migration by Export/Import.

Resources Tab Usage

1. Open Resources tab
2. Add title, type, URL, and notes
3. Click Add
4. Open saved links directly from the table
5. Delete any resource using the X button

Everything is saved in the same local data object and included in export/import backups.

Deploy Free On Vercel

1. Push this project to a GitHub repository
2. Go to vercel.com and sign in with GitHub
3. Click Add New > Project
4. Import your repository
5. Framework preset: Other
6. Build command: leave empty
7. Output directory: leave empty
8. Click Deploy

Vercel will host the static files directly.

Important for your data:

• localStorage is per browser and per URL
• Local data from localhost is not automatically copied to vercel.app URL
• Use Export on localhost, open deployed app, then Import to restore

File Overview

• index.html: Main app UI and logic
• manifest.json: PWA install metadata
• sw.js: Service worker for app shell caching
• icon-192.svg: App icon
• icon-512.svg: App icon