Your First Build#

This walkthrough takes you through building a simple tool using SpringBoard from start to finish. By the end, you will have a working tool and know how the framework works.

What you will build: An employer engagement tracker — a simple internal page showing which employer partners have upcoming virtual work experience programmes, their status, and key contact.

Time: About 30-60 minutes total, including the framework steps.

Step 1: Classify your project (3 min)#

Open the Project Intake and answer the 5 questions. For our employer engagement tracker, the answers would be:

Q1: Who will use this tool? → Just me or my immediate team (internal)

Q2: What kind of data will this tool handle? → Non-sensitive internal data (employer names, programme dates, contact names)

Q3: What happens if this tool breaks or gives wrong information? → Minor inconvenience — we can work around it

Q4: How long will this tool be used? → A few weeks/months, or I am not sure

Q5: Does this tool use AI to generate content that users see? → No

Result: All answers point to Green: Quick Build. That is your build path.

Step 2: Understand your build path (2 min)#

The intake told you this is a Green: Quick Build. That means:

• Low risk — internal users, no sensitive data
• No formal review required — you self-check using a short checklist
• You can use any AI coding tool you are comfortable with

The framework has four paths (Green → Yellow → Orange → Red), each adding more safeguards. Green is the simplest. You will only need the others when your tool handles more sensitive data or serves more critical audiences.

Step 3: Fill out the Project Brief (5 min)#

Open the Project Brief and fill it in. For our employer engagement tracker:

Project name: Employer Engagement Tracker

Builder: [Your name]

Date: [Today's date]

Build path: Green (Quick Build)

What are you building? A simple internal page showing which employer partners have upcoming virtual work experience programmes, their status (confirmed, pending, completed), and the key contact for each.

What problem does it solve? The partnerships team currently tracks employer programmes across multiple spreadsheets and Slack threads. This page gives everyone a single view of what is coming up.

What does "done" look like?

1. Shows all employer partners with programme name, date, status, and key contact
2. Filterable by status (confirmed, pending, completed)
3. Works on mobile

What tools will you use? Lovable (fast for simple pages, no backend needed)

Step 4: Build it (15-30 min)#

Open your AI coding tool and describe what you want. Here is a prompt you can adapt:

Create an employer engagement tracker page that shows employer partners in a card layout.
Each card shows: employer name, programme name, date, status (confirmed/pending/completed), and key contact name.
Include a filter bar at the top that filters by status.
Make it responsive so it works on mobile.
Use these colors: primary #0BB3B7, background #FFFFFF, text #16254C.
Do not use any external libraries. Keep it simple.
Do not add any features I did not ask for.

Tips:

• If the first result is not right, tell the AI what to change. Be specific: "Make the cards wider" is better than "fix the layout."
• If something is broken, tell the AI what you expected versus what happened.
• You do not need to understand the code. You need to verify that it works.

Step 5: Test it (5 min)#

Try using the tool the way a real person would:

1. Filter by status — does the filter work for each status?
2. Filter for something with no results — does it show a clear "no results" message?
3. Open it on your phone — does it still work?
4. Try entering special characters in any search or filter fields — does it handle them?

If anything is broken, tell the AI tool and ask it to fix it.

Step 6: Check for secrets (2 min)#

Search your code for any of these: sk-, api_key, secret, password, token

For a simple employer engagement tracker, you probably will not have any. But check anyway — it is a habit worth building.

If you find any, move them to your tool's environment variables (usually in Settings or Secrets).

Step 7: Ship it (2 min)#

1. Get the URL from your AI tool (most provide one automatically)
2. Know the kill switch — how would you take this offline? For most tools: set it to private or delete the deployment
3. Share the link with your team

Done#

You just completed your first SpringBoard build. Here is what you did:

What is next#

For your next build, you can skip this walkthrough and go straight to:

1. Project Intake — to get your build path
2. The build guide for your path — Green, Yellow, Orange, or Red
3. The checklist for your path — Green, Yellow, Orange, or Red

If you get stuck at any point, see When to Escalate. It is not a failure page — it is a help page.