Skip to content
Page 6 of 7

Challenge 2: From Prototype to Product

Recap:

In Challenge 1, you built a prototype entirely by talking to an AI chat tool. It looked great: polished, interactive, with the features you designed. But the data was likely hardcoded, and the whole thing lived inside a chat window.

Then in Lesson 2, everything changed. You moved into a real development environment with an AI coding assistant that can read and edit your project's files. You migrated your prototype from chat into the project. It's real now, viewable in a browser, saved and synced. You learned that your code is just files, that version history means you can always undo, and that file access unlocks things chat never could: real data, multiple pages, targeted edits, and team collaboration.

You also did two things that set you up for right now:

  • You wrote user stories during the "Imagine the Upgrade" activity: features that weren't possible in chat but are now possible with file access. Those stories are your starting point.
  • You audited what's real vs. what's hardcoded in your prototype. That audit is your roadmap.

The Challenge

Build your Vessel Traffic Dashboard into a persistent, multi-source application that a watchstander could actually use.

Your development environment gives you things a chat prototype can't: persistence (your work survives between sessions), targeted iteration (change one section without touching the rest), and a path toward a tool someone could use on a watch floor. Your project also has real operational data pre-loaded in the data/beginner/maritime/ directory. As you build capabilities, your AI coding assistant can find and connect the data sources it needs from that directory.

Start from the user stories you wrote during Lesson 2's "Imagine the Upgrade" activity. Those are your roadmap. The baseline and stretch capabilities below tell you what to aim for. As you work through them, you'll naturally need data to power each one. When you do, your AI coding assistant knows where to find it.

What to Build

  • The watchstander can see the traffic picture built from real data, not placeholder content. Your AI coding assistant can find vessel position data in the project and wire it in.
  • The watchstander can see how different pieces of the picture connect: vessels alongside conditions, ports alongside capabilities, so that the operational picture is richer than any single source alone
  • The application has sections a watchstander can navigate: traffic, conditions, port information, or whatever organization makes sense for the job
  • Your work persists and your team can build together: changes are saved, synced, and visible to everyone on the team

These are options for teams that want to push further. Your team can also define your own stretch goals. Use the Explore step to research what else a VTS watchstander monitors, then build toward it.

  • The watchstander can check whether a specific port has the depth and facilities a vessel needs, so they can direct traffic without looking it up in a separate system
  • The watchstander can see water level readings at channel stations and understand what they mean for vessel transit
  • The watchstander can see active navigational warnings and understand which ones affect vessels currently in the area
  • The watchstander can get a shift-change briefing from one view: everything the incoming watchstander needs to know, generated from current data

Tips

  • Start with the user stories from Lesson 2. You already planned what to build first. Pick the story with the biggest impact on the watchstander's workflow and implement it.
  • Let capabilities drive data discovery. When a capability needs data (weather conditions, port information, water levels), tell your AI coding assistant what you're trying to build and let it find the right data source in the project. Try: "I want the watchstander to see current weather conditions. Is there data in this project that can power that?"
  • Build one capability at a time. Implement a user story, verify it works, then move to the next one. Each verified capability builds confidence for the next.
  • Save and sync regularly. This is your safety net. If something breaks, you can always go back.

Go build. That's the brief. Spend the rest of this session block working on your challenge with your team. Your Facilitator will let you know when it's time for the Reflection.

Our recommendation: mob until you have clear swim lanes. Think of your project like a shared document. If two people edit the same section at the same time, their changes collide and someone's work gets overwritten. Code works the same way. The safe way to split up is clear swim lanes, where each person works on a different section. Until your team has those lanes, mob: one person drives (hands on the keyboard), everyone else navigates (watches, thinks ahead, gives feedback). Rotate the driver every few minutes. One keyboard, zero collisions.