Build an NFC-powered data walk in one week.

Use the eight supplied Lake Burley Griffin stops or choose a shorter subset for your audience. A useful first story is: "When a visitor taps a tag, show what happened here, why the data matters, and the next nearby stop."

1. Write a one-sentence problem statement.
2. Choose the fields your page actually needs.
3. Sketch one mobile screen before selecting technology.

1. Review the Azure account offer and terms.
2. Create or sign in to your account, then open the Azure portal.
3. Create one resource group, for example rg-datawalk-dev, in an Australian region available to your subscription.
4. In Cost Management, create a small budget and alerts at 50%, 75% and 90%.
5. Use a consistent suffix such as your team name because storage account names must be globally unique.

1. Create a Standard general-purpose v2 storage account in your resource group.
2. Create a blob container named datawalk.
3. Upload canberra-data-walk.json and set its content type to application/json.
4. For a public hackathon prototype, allow read access only to this container. For private or sensitive data, keep it private and use an authenticated API instead.
5. Add a CORS rule for your deployed app origin with GET and HEAD methods. Avoid a wildcard origin after prototyping.

Follow the official Blob Storage portal quickstart if this is your first container.

Create index.html, styles.css and app.js in a GitHub repository. Replace the example URL below with your blob URL.

const DATA_URL = "https://YOUR_ACCOUNT.blob.core.windows.net/datawalk/canberra-data-walk.json";
const placeId = new URLSearchParams(location.search).get("place") || "australian-of-the-year-walk";

async function showPlace() {
  const response = await fetch(DATA_URL);
  if (!response.ok) throw new Error(`Data request failed: ${response.status}`);

  const { places } = await response.json();
  const place = places.find((item) => item.id === placeId);
  if (!place) throw new Error("Place not found");

  document.querySelector("h1").textContent = place.name;
  document.querySelector("#story").textContent = place.story;
}

showPlace().catch((error) => {
  document.querySelector("#status").textContent = error.message;
});

Design for a phone outdoors: large tap targets, strong contrast, concise text, useful alt text, a visible loading state and a clear error state.

1. Push the working app to GitHub.
2. Create an Azure Static Web App and connect the repository and branch.
3. For a plain HTML app, set the app location to / and leave API and output locations empty.
4. Wait for the GitHub Actions deployment to finish, then open the generated HTTPS address.
5. Return to Blob Storage CORS and allow this exact origin.

Use the official Static Web Apps quickstart for the current portal flow.

Build one URL per place, such as https://YOUR_APP.azurestaticapps.net/?place=national-carillon. Write that full HTTPS URL to an NDEF-compatible NFC tag using a trusted mobile NFC writer. Generate the same URL as a QR code so visitors without NFC can still participate.

• Test every tag with both iOS and Android before placing it.
• Print a short URL or route name beside the tag as a final fallback.
• Get site-owner permission before attaching anything in public space.
• Do not place tags where they create a hazard or obscure existing signs.

1. Walk the route on mobile data, in bright light and with a screen reader.
2. Ask someone outside the team to complete it without instructions.
3. Remove personal, secret, licensed or unsafe data from public blobs and source code.
4. Prepare a three-minute demo: problem, tap, insight, architecture, next step.
5. At the end of the event, delete unused resources or the entire resource group.