Mini Roadmap

Setup guide — new project checklist
Guide Hash helper
1

Create the Google Sheet

Create a new Google Sheet and name the first tab roadmap (lowercase, exact match). Add these column headers in row 1:

A
Phase
Optional group. Blank cells inherit the row above.
B
Task
Required. Rows with no task are skipped.
C
Description
Short summary, or leave blank.
D
Owner
Mark, Client, or blank. "Client" shows the client name.
E
Status
not started · in progress · complete · blocked
F
Due date
DD/MM/YYYY format, or blank.
G
Notes
Optional freetext visible to the client.

Then share the sheet publicly: File → Share → Anyone with the link → Viewer.

Copy the Sheet ID from the URL — it's the long string between /d/ and /edit.

2

Generate a password hash

Choose a password for the client, then use the hash helper to convert it to a SHA-256 hash. You'll paste this into the CONFIG block — the plain-text password is never stored in the file.

Open hash helper
3

Configure the roadmap file

Duplicate demo.html and rename it for the project (e.g. acme-roadmap.html). Open it in a text editor and update the CONFIG block at the top — it's the only thing that needs changing between projects.

const CONFIG = {
  sheetId:      'YOUR_SHEET_ID',
  apiKey:       'YOUR_GOOGLE_API_KEY',  // same key for all projects
  projectName:  'Project name',
  clientName:   'Client name',
  passwordHash: 'PASTE_HASH_FROM_STEP_2',
};
The API key is shared across all projects — you only need one.
4

Deploy and share

Drop the HTML file on any static host — no server or build step needed.

  • Netlify Drop — drag the file to app.netlify.com/drop
  • GitHub Pages — push to a repo and enable Pages in settings
  • Vercel — drag and drop via the dashboard

Send the client the URL and password. That's it — update the sheet any time, client refreshes the page to see changes.