# Norsta Tracker — Deployment Guide
## From zero to live URL, step by step

---

## What you'll end up with
- A live URL (e.g. `norsta-tracker.pages.dev`) your whole team can open
- All data shared in real time — one person updates, everyone sees it
- Free to run, no monthly cost
- Future updates: paste new code → one command → done

---

## Accounts you need to create (both free)

### 1. GitHub account
GitHub stores your code. Cloudflare pulls from it to build the app.

1. Go to **github.com**
2. Click **Sign up**
3. Enter your email, create a password, choose a username (e.g. `norstagroup`)
4. Verify your email when they send the confirmation
5. Done — you won't need to use GitHub much beyond this

---

### 2. Cloudflare account
Cloudflare hosts the app and the database.

1. Go to **cloudflare.com**
2. Click **Sign up** (top right)
3. Enter your email and create a password
4. Verify your email
5. On the welcome screen, you can skip adding a domain — you don't need one
6. Done

---

## Part 1 — Put the code on GitHub

### Step 1: Create a new repository
1. Log into **github.com**
2. Click the **+** icon (top right) → **New repository**
3. Repository name: `norsta-tracker`
4. Set to **Private** (important — keeps your client data out of public view)
5. Tick **Add a README file**
6. Click **Create repository**

### Step 2: Upload the project files
1. In your new repository, click **Add file** → **Upload files**
2. You need to upload the entire `norsta-tracker` folder contents. Drag in these files/folders:
   - `src/` (folder)
   - `functions/` (folder)
   - `package.json`
   - `vite.config.js`
   - `index.html`
   - `wrangler.toml`
3. Scroll down, click **Commit changes**

> **Tip:** GitHub lets you drag entire folders in — just drag the `norsta-tracker` folder contents straight into the upload area.

---

## Part 2 — Set up the database on Cloudflare

### Step 3: Create a D1 database
1. Log into **dash.cloudflare.com**
2. In the left sidebar, click **Workers & Pages** → **D1**
3. Click **Create database**
4. Name it: `norsta-tracker`
5. Click **Create**
6. Once created, you'll see a **Database ID** — copy this (it looks like `abc123de-...`)

### Step 4: Create the database table
1. On the D1 database page, click the **Console** tab
2. Paste this exactly and click **Execute**:
```sql
CREATE TABLE IF NOT EXISTS store (
  key TEXT PRIMARY KEY,
  value TEXT NOT NULL
);
```
3. You should see "Query executed successfully" — done

### Step 5: Update wrangler.toml with your database ID
1. Go back to your GitHub repository
2. Click on `wrangler.toml`
3. Click the **pencil icon** (Edit)
4. Replace `REPLACE_WITH_YOUR_DATABASE_ID` with the Database ID you copied
5. Click **Commit changes**

---

## Part 3 — Deploy to Cloudflare Pages

### Step 6: Connect GitHub to Cloudflare Pages
1. In Cloudflare dashboard, go to **Workers & Pages**
2. Click **Create application** → **Pages** → **Connect to Git**
3. Click **Connect GitHub** — log into GitHub when prompted and authorise Cloudflare
4. Select your `norsta-tracker` repository
5. Click **Begin setup**

### Step 7: Configure the build settings
Fill in exactly as follows:
- **Project name:** `norsta-tracker`
- **Production branch:** `main`
- **Framework preset:** `Vite`
- **Build command:** `npm run build`
- **Build output directory:** `dist`

Click **Save and Deploy** — Cloudflare will now build the app. This takes about 2 minutes.

### Step 8: Link the database to the app
Once deployed:
1. Go to your Pages project → **Settings** → **Functions**
2. Scroll to **D1 database bindings**
3. Click **Add binding**
4. Variable name: `DB` (must be uppercase)
5. D1 database: select `norsta-tracker`
6. Click **Save**

### Step 9: Redeploy to apply the database binding
1. Go to **Deployments** tab
2. Click the three dots on the latest deployment → **Retry deployment**
3. Wait ~2 minutes

---

## Part 4 — You're live

### Step 10: Open the tracker
1. Go to **Workers & Pages** → your `norsta-tracker` project
2. You'll see a URL like `norsta-tracker.pages.dev`
3. Open it — the app should load with the sample data
4. Share this URL with your team

---

## Updating the app in future

Whenever I give you updated code:

1. Open your GitHub repository
2. Navigate to `src/App.jsx`
3. Click the **pencil icon** to edit
4. Select all, delete, paste the new code
5. Click **Commit changes**
6. Cloudflare automatically detects the change and redeploys in ~2 minutes

That's it — no commands, no FTP, just paste and commit.

---

## Clearing the sample data

Once you're live and ready to enter real jobs:
1. Open the D1 Console in Cloudflare
2. Run: `DELETE FROM store WHERE key = 'tracker';`
3. Refresh the app — it'll load with no jobs and you can start entering real ones

---

## If something goes wrong

- **App won't load:** Check the Cloudflare Pages deployment log for errors (Workers & Pages → your project → Deployments → click the deployment)
- **Data not saving:** Check the D1 binding is set to `DB` exactly (case sensitive)
- **Build fails:** Make sure all files were uploaded to GitHub correctly — the `src/` and `functions/` folders must be there

---

## Summary of your URLs
- **App:** `norsta-tracker.pages.dev` (share this with your team)
- **GitHub:** `github.com/norstagroup/norsta-tracker` (where you manage the code)
- **Cloudflare:** `dash.cloudflare.com` (where you manage hosting and database)