# KingKenProject

A progress tracker with two goals:

1. **Body Progress** — log measurements over time and upload progress photos (1 starting photo, plus 4 angles — front, back, left, right — each week).
2. **Ali's Subs** — track Ali's YouTube subscriber count toward the goal of doubling from 64 to 128, with optional automatic daily refresh from the YouTube Data API.

It's a public site: **anyone with the link can view your progress** (charts, photos, subscriber history). **Only you can add or change anything** — enforced by the database itself, not just by hiding buttons in the browser.

## How it's built

- Plain HTML/CSS/JS, no build step, no framework.
- Data (measurements, photo files, subscriber history) lives in [Supabase](https://supabase.com) — a free hosted Postgres database + file storage + login.
- Row Level Security (RLS) policies in [`supabase/schema.sql`](supabase/schema.sql) make every table publicly *readable* but only writable by your one authenticated account.
- Hosting is a static file host (e.g. Cloudflare Pages) since there's no server to run.

## One-time setup

### 1. Create your Supabase project

1. Go to [supabase.com](https://supabase.com) and sign up (free, no card required).
2. Create a new project. Pick a strong database password and save it somewhere safe (a password manager) — you likely won't need it day-to-day, but keep it.
3. Once the project is ready, go to the **SQL Editor**, paste in the entire contents of [`supabase/schema.sql`](supabase/schema.sql), and click **Run**. This creates the tables, the public-read/owner-write security rules, and the photo storage bucket.

### 2. Create your login (and only yours)

1. In the Supabase dashboard, go to **Authentication → Users → Add user → Create new user**. Enter your email and a password. Leave "Auto Confirm User" checked so it's ready immediately.
2. Go to **Authentication → Sign In / Providers → Email**, and turn **off** "Allow new users to sign up". This means the only account that can ever exist is the one you just created — nobody can self-register through the app.

### 3. Connect the site to your project

1. In Supabase, go to **Project Settings → API**.
2. Copy the **Project URL** and the **anon public** key.
3. Open [`js/config.js`](js/config.js) and paste them in:
   ```js
   const SUPABASE_CONFIG = {
     url: 'https://your-project-ref.supabase.co',
     anonKey: 'your-anon-public-key',
   };
   ```

### 4. Run it locally to test

```bash
python -m http.server 8000
```
Open http://localhost:8000, click **Sign in** (top right), and log in with the email/password from step 2. You should now see the edit forms and upload controls appear — signed out (or in another browser), you'll only see the read-only view.

## Deploying it online

1. Go to [Cloudflare Pages](https://pages.cloudflare.com) (part of a free Cloudflare account) and create a new project using **direct upload** — drag in this whole `KingKenProject` folder.
2. Cloudflare gives you a live URL like `kingkenproject.pages.dev` — open it on your phone, it's a real public site.
3. Whenever you change the code, re-upload the folder (or connect a GitHub repo for automatic deploys, if you set up git later).
4. Once you register **KingKenProject.co.uk** with a registrar that supports `.co.uk` (e.g. Namecheap, 123-reg, IONOS), add it as a custom domain to the Cloudflare Pages project and point its nameservers at Cloudflare — then your real domain serves the same site.

## Setting up automatic YouTube subscriber tracking

1. Go to [console.cloud.google.com](https://console.cloud.google.com/) and sign in.
2. Create a new project (e.g. `KingKenProject`).
3. Go to **APIs & Services → Library**, search **"YouTube Data API v3"**, click **Enable**.
4. Go to **APIs & Services → Credentials → Create Credentials → API key**. Copy the key.
5. (Recommended) Restrict the key to the YouTube Data API v3 under "API restrictions".
6. Sign in to the site as yourself, go to **Ali's Subs → Settings**, paste the key and channel handle (default is `@Ali-MacKensie`), and save.

Once set, the site checks the real subscriber count automatically the first time you (signed in) open the page each day — no button needed, though **Refresh from YouTube** still works any time. The API key itself stays only in your own browser's local storage (per device) — it's never sent anywhere except directly to Google, and it's never visible to other visitors since the whole Settings panel is owner-only.

The free tier gives 10,000 quota units/day; checking subscriber count costs 1 unit per refresh.

## Notes

- Since data now lives in Supabase, your phone and desktop show the same data as soon as both are pointed at the same project and you're signed in on each.
- Photos are stored as-is (no compression) in Supabase Storage's free 1GB tier — plenty for weekly 4-angle photos for a long time.
- The `anon` key in `config.js` is meant to be public (every visitor's browser has it) — real protection comes from the RLS policies in `supabase/schema.sql`, not from hiding this key.