From dcf8f11b8c612f1ae7c3a458f5b80ebce567d2af Mon Sep 17 00:00:00 2001 From: Justin Oros Date: Thu, 18 Jun 2026 13:46:17 -0700 Subject: [PATCH] Step Tracker A mobile-friendly step tracking app for friend groups. Compare daily, weekly, and monthly steps with people you know. --- README.md | 241 +++++++ config.js | 14 + index.html | 1909 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 2164 insertions(+) create mode 100644 README.md create mode 100644 config.js create mode 100644 index.html diff --git a/README.md b/README.md new file mode 100644 index 0000000..63f7e18 --- /dev/null +++ b/README.md @@ -0,0 +1,241 @@ +# Step Tracker + +A mobile-friendly step tracking app for friend groups. Compare daily, weekly, and monthly steps with people you know. + +Built with vanilla JavaScript, Firebase, and hosted free on GitHub Pages. No native app required — steps sync automatically from Apple Health or Android Health via a free bridge app. + +![License](https://img.shields.io/badge/license-MIT-blue) +![Firebase](https://img.shields.io/badge/backend-Firebase-orange) +![GitHub Pages](https://img.shields.io/badge/hosting-GitHub%20Pages-green) + +--- + +## Features + +- **Passwordless sign-in** — magic link sent to email, no password needed +- **Admin approval** — new registrations require administrator approval before access is granted +- **Auto step sync** — bridge apps on iPhone and Android POST steps automatically via webhook +- **Manual entry** — log steps manually if preferred +- **Friend system** — add friends by email, approve or deny requests +- **Step comparisons** — view steps by Today, Week, Month, Year, or All Time +- **Profiles** — display name and avatar URL per user +- **Mobile-first** — designed for use in a mobile browser, works as a PWA + +--- + +## How It Works + +``` +iPhone/Android Health App + ↓ + Bridge App (free) + ↓ + Webhook URL (Firebase Cloud Function) + ↓ + Firestore Database + ↓ + Step Tracker Web App (GitHub Pages) +``` + +--- + +## Tech Stack + +| Layer | Technology | Cost | +|---|---|---| +| Frontend | Vanilla JS, HTML, CSS | Free | +| Hosting | GitHub Pages | Free | +| Auth | Firebase Authentication (magic link) | Free | +| Database | Firebase Firestore | Free tier | +| Backend | Firebase Cloud Functions | Free tier | + +--- + +## Setup Your Own Instance + +### Prerequisites + +- A [Firebase](https://firebase.google.com) account +- A [GitHub](https://github.com) account +- [Node.js](https://nodejs.org) installed (LTS version) + +--- + +### 1. Create a Firebase Project + +1. Go to [console.firebase.google.com](https://console.firebase.google.com) +2. Click **Add project** → name it → disable Analytics → **Create project** + +--- + +### 2. Enable Passwordless Email Auth + +1. Firebase Console → **Authentication** → **Get started** +2. Click **Email/Password** → enable **Email link (passwordless sign-in)** → Save +3. **Settings → Authorized domains** → add `yourusername.github.io` + +--- + +### 3. Create Firestore Database + +1. Firebase Console → **Firestore Database** → **Create database** +2. Choose **Start in test mode** → pick a region → **Done** +3. Click the **Rules** tab and paste: + +``` +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + match /users/{userId} { + allow read, write: if request.auth != null && request.auth.uid == userId; + } + match /profiles/{userId} { + allow read: if request.auth != null; + allow write: if request.auth != null && request.auth.uid == userId; + } + match /friendRequests/{reqId} { + allow read: if request.auth != null && + (resource.data.fromUid == request.auth.uid || + resource.data.toUid == request.auth.uid); + allow create: if request.auth != null && + request.resource.data.fromUid == request.auth.uid; + allow update: if request.auth != null && + resource.data.toUid == request.auth.uid; + } + } +} +``` + +Click **Publish**. + +--- + +### 4. Deploy Cloud Functions + +```bash +npm install -g firebase-tools +firebase login +mkdir step-tracker-fn && cd step-tracker-fn +firebase init functions +# Choose: JavaScript, No ESLint, Yes to install dependencies +``` + +Copy the contents of `functions/index.js` from this repo into your `functions/index.js`. + +Install nodemailer: +```bash +cd functions && npm install nodemailer +``` + +Set your secrets (Firebase will prompt for each value): +```bash +firebase functions:secrets:set ADMIN_EMAIL +firebase functions:secrets:set ADMIN_SECRET +firebase functions:secrets:set APP_URL +firebase functions:secrets:set GMAIL_USER +firebase functions:secrets:set GMAIL_PASS +``` + +> **GMAIL_PASS** must be a Gmail App Password, not your regular password. +> Generate one at [myaccount.google.com/apppasswords](https://myaccount.google.com/apppasswords) + +Deploy: +```bash +cd .. && firebase deploy --only functions +``` + +Copy the function URLs shown after deployment. + +--- + +### 5. Configure the App + +Copy `config.example.js` to `config.js` and fill in your values: + +```javascript +window.STEPMATES_CONFIG = { + firebase: { + apiKey: "YOUR_API_KEY", + authDomain: "YOUR_PROJECT.firebaseapp.com", + projectId: "YOUR_PROJECT_ID", + storageBucket: "YOUR_PROJECT.firebasestorage.app", + messagingSenderId: "YOUR_SENDER_ID", + appId: "YOUR_APP_ID" + }, + webhookBase: "https://YOUR_WEBHOOK_URL.a.run.app", + adminNotifyUrl: "https://us-central1-YOUR_PROJECT.cloudfunctions.net/adminNotify", + adminSecret: "YOUR_ADMIN_SECRET", + appUrl: "https://yourusername.github.io/step-tracker" +}; +``` + +Get your Firebase config from: Firebase Console → gear icon → Project Settings → Your Apps → Add app → Web. + +--- + +### 6. Publish to GitHub Pages + +1. Create a GitHub repo named `step-tracker` +2. Rename `stepmates.html` → `index.html` +3. Upload `index.html`, `config.js`, and `.gitignore` +4. Go to repo **Settings → Pages → Deploy from branch → main / root → Save** +5. Your app will be live at `https://yourusername.github.io/step-tracker` + +--- + +## Bridge App Setup + +Share these instructions with your friends after they register. + +### iPhone — Health Auto Export +- Download: [App Store](https://apps.apple.com/us/app/health-auto-export-json-csv/id1115567069) +- Automations → New Automation → Webhook → paste your personal webhook URL +- Data types: **Step Count** +- Schedule: Daily + +### Android — HC Webhook +- Download: [GitHub Releases](https://github.com/mcnaveen/health-connect-webhook/releases) (free, open source) +- Add Webhook → paste your personal webhook URL +- Enable **Steps** → set sync interval + +Each user gets their own unique webhook URL shown in the app after sign-in. + +--- + +## Admin Approval Flow + +1. New user enters email → receives magic sign-in link +2. After clicking the link, their account is created with `approved: false` +3. Administrator receives an email with **Approve** and **Deny** buttons +4. User sees a "Waiting for approval" screen until approved +5. Once approved, they proceed to onboarding + +--- + +## Free Tier Limits + +| Service | Free Allowance | Expected Usage | +|---|---|---| +| Firebase Auth | Unlimited | Fine | +| Firestore reads | 50,000/day | Fine for small groups | +| Firestore writes | 20,000/day | Fine | +| Cloud Functions | 2M calls/month | Fine (a few calls/day) | +| GitHub Pages | Unlimited | Fine | + +**Expected monthly cost: $0** + +--- + +## Roadmap + +- [ ] Step contests with start/end dates +- [ ] Weekly recap emails +- [ ] Streak tracking +- [ ] Push notifications when a friend passes you +- [ ] Leaderboard with rank change indicators + +--- + +## License + +MIT — do whatever you want with it. diff --git a/config.js b/config.js new file mode 100644 index 0000000..f19895b --- /dev/null +++ b/config.js @@ -0,0 +1,14 @@ +window.STEPMATES_CONFIG = { + firebase: { + apiKey: "AIzaSyDblJckWNQohno2hSJ8z-oGXZl_ROYPDSI", + authDomain: "step-tracker-bfd5c.firebaseapp.com", + projectId: "step-tracker-bfd5c", + storageBucket: "step-tracker-bfd5c.firebasestorage.app", + messagingSenderId: "334532615980", + appId: "1:334532615980:web:84cd9b35341dda869fd689" + }, + webhookBase: "https://webhook-mgc3i5pbxq-uc.a.run.app", + adminNotifyUrl: "https://us-central1-step-tracker-bfd5c.cloudfunctions.net/adminNotify", + adminSecret: "YOUR_ADMIN_SECRET", + appUrl: "https://justinoros.github.io/step-tracker" +}; diff --git a/index.html b/index.html new file mode 100644 index 0000000..8b11132 --- /dev/null +++ b/index.html @@ -0,0 +1,1909 @@ + + + + + + + + +StepMates — Walk Together + + + + + + +
+ + +
+
+ + Loading… +
+
+ + +
+
+ +

Walk more. Compete with friends.

+
+

Welcome

+

Enter your email to sign in or create an account — no password needed.

+ + + + +
+ +
+
+ + +
+
+
⏳
+

Waiting for approval

+

Your account request has been sent to the administrator. You'll be able to sign in once it's approved.

+ +
+
+ + +
+
+
+
+
+
+
+ + +
+

What should friends call you?

+

Choose a display name. This is what your friends will see.

+ + + + +
+ + +
+

Sync your steps automatically

+

Download the free bridge app for your phone. It reads your steps from Apple Health or Android Health and sends them here.

+
+ +
🍎
+
Health Auto Export
+
iPhone · iOS 16+
+
Free tier
+ + +
🤖
+
HC Webhook
+
Android 9+
+
Free & open source
+ +
+
+ 💡 Once installed, the app will ask for a Webhook URL — you'll get yours on the next screen. +
+ +

+ +
+ + +
+

Your personal sync URL

+

Copy this URL and paste it into the bridge app. Your steps will sync automatically from that point on.

+
+
Your Webhook URL
+
+
Generating…
+ +
+
+ +
+

Where to paste it:

+
+ iPhone (Health Auto Export):
+ Automations → New Automation → Webhook → paste URL → select Steps → set schedule Daily

+ Android (HC Webhook):
+ Add Webhook → paste URL → enable Steps → set sync interval +
+
+ +
+
+
+ + +
+ + +
+ + +
+ + + + + +
+ + +
+
My Steps — Today
+
—
+
Loading…
+
+
+
+
+ 0 + Goal: 10,000 +
+
+ + + + + + + + +
+ + +
+
Friends
+
+
+
+ +
+
+
+ + +
+ + + + +
+

Add a Friend

+
+ + +
+ +
+ + + + + +
+
My Friends
+
+
+
+ + +
+
+
Sync Setup
+
+ +
+ Paste your Webhook URL into the bridge app on your phone. Steps will sync automatically. +
+ +
Your Webhook URL
+
+
+
Loading…
+ +
+
+ +
+ iPhone — Health Auto Export:
+ Automations → New Automation → Webhook → paste URL
+ Select Steps → set to run Daily

+ Android — HC Webhook:
+ Download from GitHub → Add Webhook → paste URL
+ Enable Steps → set sync interval +
+ +
+
Bridge App Downloads
+
+
+ +
🍎
+
Health Auto Export
+
iPhone · iOS 16+
+
Free tier
+ + +
🤖
+
HC Webhook
+
Android 9+
+
Free & open source
+ +
+ +
+
Account
+
+
+
+
+ ? +
+
+
—
+
+
+ +
+
+ +
+ +
+ + +
+ + + +
+
+ + + + +
+ +
+ + + + + + +