Hands-on workshop Idea → live URL

Building a
web app using AI

We’re going to design, build, test and ship The Growing Club—together.

Requirements UI + UX Build Test Deploy

Use the arrow keys or the controls below

what we’ll make

thegrowingclub

The shared home for small-business CEOs Grow the business.
Develop the leader.

Programme information, learning and useful resources—in one place.

Open the club ↗

00 The destination

By the end, this will be real.

A useful home for the club—with a public welcome and shared information for its community.

This is not a talk about prompting.

It’s a build session. The room makes the product decisions. AI helps us move at the speed of the conversation.

1home

Information, updates and resources live together.

5sec

A public visitor understands what the club is.

390px

A member can use it comfortably on a phone.

blank page THE GROWING CLUB live on the web

01 Requirements

Start with the problem,
not the prompt.

Three decisions we own

Use

Members first

CEOs, mentors and organisers who return to use it—not just visit once.

Share

Useful club information

Programme details, sessions, updates, learning and resources.

Access

Public or club-only?

We decide what anyone can see and what stays within the group.

Definition of done · v0

The page must…

Give the club a clear public introduction
Make key information easy to find and update
Organise resources around how members work
Separate public and club information where needed
Work on mobile, keyboard and screen reader

Our first question What should a member come back to this website to do every week?

Help us define a v1 information-sharing hub for a CEO mentoring club. Ask one question at a time. Human: purpose + choices

02 Design · UI + UX

Make the experience visible
before we code it.

Good design gets someone from “what’s happening?” to the right information without making them think about the interface.

public welcome useful every week

Two sides · one simple experience

01Welcome“What is this club?”
02Return“What’s new or next?”
03Find“Where is that resource?”
04Share“How do I add information?”

Claude Design explores visual directions and interaction ideas.

We choose what stays useful on the fifth visit—not just impressive on the first.

03 Build

Build in small,
visible loops.

Give AI the goal, the repo and the constraints. Then review real changes in a real browser.

home.html styles.css

<main class="club-hub">
  <h1>What’s happening</h1>
  <section>Next club session
    and latest updates</section>
  <a href="/resources">Resources</a>
</main>

                  LIVE PREVIEW
                  What’s happening
in the club.
                  Open resources ↗
                

Browser updated · 42 ms

The loop

1
Give contextGoal, design, repo, constraints
2
Build one sliceSee something useful quickly
3
Review the diffUnderstand what changed
4
Open the browserReact, adjust, repeat

CodexWorks across the repo, implements and verifies

Claude CodePairs on implementation, reasoning and debugging

YOU STEER AI DRAFTS THE BROWSER TELLS THE TRUTH

04 Testing

AI can write it.
We still prove it.

We test the promise, the experience and the code—including the paths we did not expect.

Live test plan

5 checks

Test What we learn Run with

01 Findability test Can members get the right information? Real tasks

02 Phone + laptop Does the layout hold? Browser

03 Keyboard only Can everyone move through it? Hands-on

04 Accessibility audit Are structure and contrast sound? AI + tools

05 Production smoke Did the real release work? Live URL

05 Deploy

A web app isn’t finished
on localhost.

We turn the version on our laptop into a secure, shareable experience on the public web.

01 Code Working locally

02 Git Reviewed history

03 Cloud Build + release

04 Live A real URL

Release gate

Keep secrets out of the code
Build a preview before production
Check the live page on phone + laptop
Know how to roll back

SHIP IT

AI prepares. The platform releases. We approve.

the-growing-club · live

06 How we’ll work

One room. One build.
Every decision visible.

01 Frame
Say what success means
02 Sketch
Compare real directions
03 Build
Review each useful slice
04 Prove
Try hard to break it
05 Ship
Share the real URL

You bring

Context + taste Purpose, audience, judgment, final calls.

AI brings

Speed + range Questions, options, code, checks, iteration.

Together we make

Something useful Not “AI-generated.” Deliberately built.

Ready when you are

Let’s build
The Growing Club.

The first line of code can wait.
The first good question can’t.

START HERE · 01

What should a member come back to this website to do every week?

We answer this together. Then the build begins.

Requirements→ Design→ Build→ Test→ LIVE

Building a web app using AI

Building a
web app using AI