Your Projects. One System. Every Device.
You've taken the first step — and that's what makes the difference. What awaits you here isn't a theoretical framework. It's a system already in production: a real-time synchronized project matrix, built with AI and Supabase.
What you'll learn in 8 steps:
Understand the concept
What a project matrix is and why it outperforms Excel and Notion.
Set up database
Supabase as backend — free, secure, ready in 10 minutes.
Build frontend
HTML, CSS, JavaScript — all in one file, no frameworks needed.
Go live
Embed in Squarespace and sync across all devices.
What is a project matrix?
A structured overview of all tasks and phases — live synced, available on every device, always current.
Why not just use Excel or Notion?
Excel / Sheets
No real-time sync on your domain. No custom design.
Notion / Trello
Not embeddable. Foreign branding. Limited customization.
Your own matrix
100% your design. Your domain. Your data. Real-time. Free.
The matrix in action
| Status | Phase | Function | Sector |
|---|---|---|---|
| OK | 1.1 | Apple Sign-In | S1 Core |
| P1 | 1.3 | Design Engine | S1 Core |
| P0 | 0.4 | SecureStore | S0 |
| OK | 1.7 | Dark Mode Lock | S1 Core |
Green = OK, Red = Critical, Orange = Design.
Changes sync instantly across all devices.
Decisions, bugs or ideas directly in the matrix.
Plan the structure
First define your columns. What do you want to track?
ID
UUID
Phase
Text
Function
Text
Status
Enum
Notes
Text
Set up Supabase
CREATE TABLE matrix_state (
id TEXT PRIMARY KEY DEFAULT 'default',
data JSONB NOT NULL DEFAULT '{}',
updated_at TIMESTAMPTZ DEFAULT now()
);Build the frontend
async function load() {
const r = await fetch(
SB_URL + '/rest/v1/matrix_state?id=eq.default',
{ headers: H }
);
return (await r.json())[0]?.data || {};
}Try it:
Type something — it auto-saves:
Embed in Squarespace
Not visible?
Enable JavaScript in the code block.
Styling broken?
Custom CSS: .sqs-block-code { padding: 0 !important; }
Supabase error?
Check URL, key and RLS.
Summary
Project Management
Editorial Planning
Event Coordination
Inventory
Team Tasks
Client Status
How much time do you save?
How many projects do you manage?
5 projects
The AI prompt that builds everything
Create an interactive project matrix as a single HTML file
with embedded CSS and JavaScript.
Connect to Supabase for real-time sync.
Columns: [Sector, Phase, Function, Status, Priority, Notes]
Status values: [OK, P0, P1, P2, P3] with color coding
Features:
- Inline editing, auto-save (1.5s debounce)
- Connection indicator, search, filters
- Progress bar, checkboxes, responsive
Supabase config:
const SB_URL = 'YOUR_URL';
const SB_KEY = 'YOUR_KEY';
Style: Clean, professional, Squarespace-compatible.48 features, 7 sectors, real-time sync on iPhone, iPad and MacBook.
Master prompt + 3 bonus templates
Free. No spam.
Complete master prompt
3 industry templates
5 Supabase tricks
