Lab 1: Ship Your First App¶

What you will learn¶

• How to start Claude Code in a project folder and approve what it does
• How to recognize the agent loop (gather context, act, check) while it runs
• How to create a private GitHub repository and push work to it

By the end of the lab you will have built two small apps without writing code yourself. That is the point of the first session: to see how much the tool can do. The rest of the module is about how to direct it well enough to build something you would trust.

Before you start¶

Finish Computer Setup. Check in a terminal that claude --version, git --version, and gh auth status all work.

Part A: Create your course repo (20 minutes)¶

Your course repo holds every lab and your project. You create it from the course starter template.

1. Make a folder for class projects, such as Documents/projects. Avoid folders synced by OneDrive, iCloud, Google Drive, or Dropbox; sync tools can corrupt git repositories.
2. Download the course starter template and unzip it into that folder. Rename the unzipped folder to <your-gonzaga-username>-systems (for example jsmith2-systems).
3. In VS Code, choose File > Open Folder and open that renamed folder. Choose Terminal > New Terminal, type claude, and press Enter.
4. Paste the prompt below into Claude Code and press Enter.

I am a student in a Systems Analysis and Design course at Gonzaga University. Help me turn
this folder into my private course repo on GitHub. I may be new to git, GitHub, and the
terminal, so teach me what is going on as we go.

HOW TO WORK WITH ME
- First check: my operating system, whether this folder is already a git repo, and
  whether git and gh are installed and gh is logged in (gh auth status). Tell me in a few
  lines what is already done.
- Make a task list from TASKS, mark anything already done, and show it to me.
- One task at a time. Before each task, explain in two or three plain sentences what we
  are about to do and why. Define repository, commit, and push the first time they come up.
- Show each command before you run it and say in one sentence what it does.
- When you need something from me (a login, a choice, an answer), stop and wait.

TASKS
1. Make sure this folder is not inside OneDrive, iCloud Drive, Google Drive, or Dropbox.
2. If gh is not logged in, tell me to run this myself in a second terminal and wait:
     gh auth login --hostname github.com --git-protocol https --web
   Then run gh auth setup-git and confirm with gh auth status.
3. Initialize git in this folder, make a first commit of the template files with the
   message "Start from course starter template".
4. Create a PRIVATE GitHub repo with the same name as this folder and push to it:
     gh repo create <folder-name> --private --source . --push
5. Ask me for my instructor's GitHub username, then add them as a collaborator:
     gh api -X PUT repos/<my-username>/<folder-name>/collaborators/<instructor-username>
   Pending invitation is fine.
6. In README.md, replace [your name] with my name. Leave the rest for later. Commit with
   the message "Add my name" and push.
7. Show me my repo URL and confirm on GitHub that it is private.

RULES
- Never ask for, show, or store passwords or tokens.
- Never push to any repo other than the one we just created.

When it finishes, open your repo on github.com and check that you see the template's folders.

Part B: Build a to-do app (15 minutes)¶

Inside your course repo, make a folder for this lab and start a fresh Claude Code session there:

mkdir -p labs/lab-01/todo
cd labs/lab-01/todo
claude

Turn on the explanatory output style, which makes Claude add short notes explaining its choices:

/output-style explanatory

Paste this prompt:

Build me a simple to-do list app using streamlit. Use a json file as the database. When it is ready, tell me the exact command to run it.

While it works, watch the agent loop and write down, in labs/lab-01/agent-loop.md, three moments you saw:

Run the app with the command Claude gives you (usually streamlit run app.py). Add three to-dos, mark one done, then stop the app with Ctrl+C and start it again. Are your to-dos still there? Why? (The answer is in the JSON file. Open it.)

Take a screenshot of the running app and save it as labs/lab-01/todo.png.

Part C: Build an app you choose (15 minutes)¶

Go back to labs/lab-01, make a second folder, and build something you would actually use. Keep using Streamlit (say so in your prompt). Ideas:

• A tracker for something you do weekly (workouts, shifts, practice hours, expenses)
• A tool for a club you belong to (sign-up list, equipment checkout, carpool sign-ups)
• A small calculator for a class (grade needed on the final, loan payments, break-even)

Write your prompt in one or two sentences. When the first version runs, ask for one change, then one more. Notice what happens to the code and the app each time. Save a screenshot as labs/lab-01/app-2.png.

Part D: Commit and push (5 minutes)¶

Ask Claude:

Commit everything in labs/lab-01 with a clear message and push it. Do not commit any virtual environment folders or secrets.

Check on github.com that the files are there.

Reflection¶

Write labs/lab-01/reflection.md with short answers in your own words:

1. What surprised you most about what the agent could do? What did it get wrong or do that you did not ask for?
2. In Part C, how did the app change when you asked for changes? Did anything break that used to work?
3. You did no analysis or design before building. Name one requirement your Part C app is missing that a real user would expect.

Turn in¶

Submit the link to your labs/lab-01/ folder on GitHub on Canvas. It should contain:

• todo/ and your second app folder
• todo.png and app-2.png
• agent-loop.md with three labeled moments
• reflection.md

How larger systems do this¶

A team at a large company would not let anyone push code straight to a shared repository the way you just did. They work on branches, open pull requests, and have automated tests and a second person review every change before it merges. You will set that up yourself in Lab 7. For now, notice how fast the first version came together, and how little of what the agent decided you could explain. Closing that gap is the work of the next four weeks.