TILT Walkthrough: How I Built the Thrive Club Hub With AI

This page “tilts” (makes transparent) how I used AI to build the Thrive Club Hub — including the messy parts, the fixes, and what I learned.

It’s here so Thrive Club members — and anyone watching from the outside — can see the behind-the-scenes process, not just the polished page. The goal is to model how we can use AI as a collaborator while staying grounded in our values: sisterhood, equity, and “lift as we climb.”

Transparency Sisterhood Equity by design Navigational capital

Purpose

I wanted a simple, public hub for women and girls in Thrive Club to:

See how to use AI and shared tools to support their personal and professional lives.
Track real connection tasks between members — not just to-do lists that live in my head.
Share resources publicly so people who can’t pay or join live spaces can still access support.

This page is also a teaching tool — a live example of TILT: making the process and criteria visible, not just the outcome.

Tasks

With AI as a co-designer, I asked for help to:

Create an HTML “repository” that introduced the hub, showed connection tasks, and linked resources.
Refine the design so it felt like Thrive: soft gradients, community-first language, and clarity.
Connect a Google Sheet (via Apps Script) so members could:
- Search their name and see their tasks.
- Mark tasks as completed with their private code.
Document everything here in TILT format so others can learn from the build.

Criteria for Success

For me, this build was “good enough to use” when:

The page loaded cleanly on phone and laptop and didn’t break the rest of my site.
Any member could type their name and see their connection tasks from the shared sheet.
Marking a task as completed updated for everyone (not just on one device).
Resources were easy to preview/download via the Google Drive folder.
The welcome text clearly named our values and why the hub is public.

TILT language: clear purpose, specific tasks, and shared criteria — so other folks can remix this for their own communities. Learn more at TILT Higher Ed ↗.

Process Log

Issues I Ran Into & How We Fixed Them

1. First version of the hub was cluttered and overwhelming

Problem: Too many sections, not enough clarity.

What happened
The original HTML page tried to do everything at once: member directory, progress bars, milestones, reminders, and resources. It felt like a dashboard instead of a clear “start here” space for women and girls in Thrive Club.

How we fixed it
With AI, I simplified the hub down to three core jobs: (1) explain the purpose, (2) help people see their connection tasks, and (3) link to a resource repository. Everything else either moved to the Google Sheet or got removed. The design shifted from “feature-heavy” to “clean, story-first.”
2. Local reminders didn’t sync across devices

Problem: Tasks were saved only in one browser.

What happened
The first reminder system used localStorage in the browser. That meant a reminder added on my laptop didn’t show up on anyone else’s device, and changes didn’t update the shared record.

How we fixed it
We shifted the “source of truth” to a Google Sheet. AI helped write the data structure (columns like Thriver, Task, Status, Notes, Connection), and I pasted those into a sheet. Then we built the connection portal to read from that sheet via an Apps Script web app.
3. Web App said “Page not found” / sheet not connecting

Problem: The front-end URL wasn’t pointing to a working Apps Script deployment.

What happened
When we first tried to connect the HTML to Google Sheets, the web app link either showed “page not found” or wouldn’t load properly. The hub couldn’t fetch any tasks, so the connection section stayed empty or showed an error.

How we fixed it
I redeployed the Apps Script as a web app, made sure “Anyone with the link” could access it, and updated the HTML with the new URL. AI helped me double-check that the front-end fetch(API_URL) matched that exact link.
4. “Not a valid JSON” error when updating tasks

Problem: Mismatch between how the front-end sent data and how Apps Script read it.

What happened
When I tried to mark a task as completed using my “Thrive code,” the app showed: “Could not update task: Unexpected token 'a', 'action=com' is not valid JSON.” The front-end was sending data one way, and the Apps Script was trying to parse it as JSON in another way.

How we fixed it
With AI’s help, I simplified the update call: the HTML now sends URL-encoded form data using new URLSearchParams({ action, row, code }) and the script reads those values from e.parameter instead of trying to JSON.parse the body. On the front-end, I stopped expecting a JSON response and instead just treat an HTTP 200 as success.
5. “Load failed” when using my number to complete a task

Problem: Front-end error handling was too strict.

What happened
When I tested as a real user (for example, as “Lee”), the browser showed a “load failed” style error after entering my code, even though the sheet logic was basically working. The JavaScript was trying to parse a JSON response it didn’t actually need.

How we fixed it
We simplified again: the browser now only checks if the response comes back with status 200. If it does, we re-fetch all tasks from the sheet and re-render the list. That made the update feel smooth and accurate without extra parsing errors.
6. Protecting tasks from random visitors

Problem: Anyone could have marked tasks as complete.

What happened
Because the hub is public, I needed a way to keep random visitors from clicking “Mark completed” on Thrive members’ tasks. At first, we tried using phone numbers directly, which raised privacy and design concerns.

How we fixed it
We shifted to private Thrive codes (based on numbers the members know), entered only when updating a task. The code prompt appears in a browser dialog, the actual numbers are not displayed on the page, and the verification happens in Apps Script. This keeps the public page open while adding a light layer of protection.
7. Getting the task data into a structured sheet

Problem: Needed consistent columns and example rows.

What happened
I needed a clear sheet layout for all the connection tasks (Eden with Kelli, Lee with Ashley, Taniel’s flyers, Daysha’s event, etc.), but I didn’t want to build the structure from scratch.

How we fixed it
AI helped generate a CSV-style table with headers: Thriver, Task, Status, Notes, Connection, plus starter rows for each person. I copied that into Google Sheets, adjusted any names and wording, and tied the Apps Script to that sheet.

Collaboration

What AI Did · What I Did

What AI helped with

Drafting and redesigning the HTML/CSS to feel like a Thrive space (colors, gradients, layout).
Refining the structure down to three clear sections: welcome, connection portal, resources.
Writing the JavaScript logic to:
- Call the Apps Script web app.
- Filter tasks by thriver name.
- Update tasks and re-render after a successful response.
Suggesting the column structure for the Google Sheet and making sure the field names aligned in code.
Documenting this process in TILT language: purpose, tasks, criteria, and issue log.

What I did as the builder

Named the vision: a hub centered on Thrive, sisterhood, and “lift as we climb.”
Decided what stayed, what got removed, and what needed to be public vs. private.
Created and managed the Google Sheet, including real names, tasks, and updates.
Deployed and fixed the Apps Script web app until it reliably connected.
Tested the experience as real members (e.g., “Lee”) and gave feedback when something felt off.
Wrote the values language and made sure the welcome text reflected Thrive Philly’s core commitments.

Remix This

How you can adapt this build for your own community

If you’re reading this and dreaming about building something similar for your own people: you don’t have to be a full-time developer. You can:

Start with a simple Google Sheet and decide on a few columns that matter most to you.
Use AI to help you draft HTML/CSS for a “hub” page that explains the purpose and links to your sheet.
Ask AI to help you connect the sheet via a small web app (Apps Script, Airtable, etc.).
Write your own TILT-style explanation so your community can see the “how,” not just the “what.”

This build is one tiny experiment toward a bigger dream: a world where Black and Brown girls and women have transparent, shared maps for thriving — and where resources aren’t gatekept behind paywalls or secret knowledge.