# Planning and Development
Workflow

Get these ready before the practical portion begins. Ask an instructor if something is not working.

AI can generate code very quickly, but somebody still has to define what the application is actually supposed to do.

Before implementation begins, you should be able to explain the application's users, pages, features, actions, data, and expected behavior.

How to break down a requirement

• Start with the requirement, not the code
• Identify who will use the application
• Identify what the user is trying to accomplish
• Break large requirements into smaller features
• Identify the pages or areas required
• Identify the actions the user can perform
• Identify what information the application needs to store or display
• Identify how different parts of the application connect
• Write down unclear requirements before implementation begins

Excalidraw is where you visualize how the application functions. You are not creating a formal enterprise architecture diagram.

Your diagram should help you answer one simple question:

Your diagram should show

• Who the users are
• The major pages or application areas
• The important actions users can take
• Where data is needed
• How major parts of the application interact
• The important user flows
• Only enough detail to make the system understandable

Your Excalidraw diagram describes how the application works. Variant helps you explore how that functionality should be presented to the user.

• Let functionality influence the interface
• Think about navigation and page hierarchy
• Identify the application's most important actions
• Think about forms, buttons, feedback, and empty states
• Treat generated designs as starting points
• Evaluate what Variant creates instead of accepting everything automatically
• Keep visual patterns consistent across the application

Example design prompt

You do not need to memorize commands blindly. Understand what each part of your development environment is responsible for.

• Visual Studio Code is where you open, inspect, and edit your project
• The project folder contains the application's files
• The terminal lets you run commands inside the project
• Node.js provides the JavaScript runtime used by much of the development tooling
• npm manages packages and dependencies used by the project
• The development server runs the application locally while you work
• Browser Developer Tools help you inspect errors, network requests, page elements, and application behavior

Two commands you will use constantly

# Install the packages listed by the project
npm install

# Start the local development server
npm run dev

The exact development command can vary between projects. Check package.json or the repository README if npm run dev is not available.

When something breaks

Git records the history of your project. GitHub gives that repository a remote home and makes collaboration, backup, and later deployment easier.

Essential Git workflow

# See what has changed
git status

# Stage your current changes
git add .

# Save a meaningful checkpoint
git commit -m "Implement task creation"

# Send your commits to GitHub
git push

# Get the newest remote changes
git pull

Codex and Claude Code can inspect projects, implement features, modify multiple files, explain code, investigate bugs, run commands, refactor implementations, and assist with testing.

They can write a small amount of code or a very large amount of code. That is not the important distinction.

You remain responsible for defining the objective, directing the work, reviewing the result, testing behavior, debugging problems, and verifying that the application actually satisfies the requirement.

Give AI useful context

• Describe the objective clearly
• Describe the expected behavior
• Include important constraints
• Give it relevant project context
• Ask it to inspect the existing project before making assumptions
• Break uncertain work into smaller steps when useful
• Review the files it changed
• Run the application after significant changes
• Test behavior yourself
• When debugging, provide errors and observations

These are starting structures, not magic formulas. Change them to match the problem you are solving.

Your instructor will demonstrate the complete workflow using a small application called the University Portal.

Before building, ask questions

• What should each role see immediately after signing in?
• What happens when a student tries to enroll in a course that is already at capacity?
• What happens when enrolling would push the student over their credit limit?
• Can a student drop a course at any time?
• Who is allowed to change a course schedule — the instructor, the administrator, or both?
• Should a student see a grade before the instructor has finished entering grades?
• What feedback appears after enrolling, dropping, or grading?

The complete walkthrough

1. Read the requirement and identify the user, behavior, pages, actions, and data.
2. Use the first AI prompt to identify unclear requirements and implementation decisions.
3. Sketch the University Portal in Excalidraw: the roles, what each one can do, and the data behind it.
4. Turn the functional plan into an initial interface concept in Variant.
5. Open the project in VS Code and explain the project structure.
6. Run npm install if dependencies need to be installed.
7. Run the application locally with npm run dev.
8. Create or connect the GitHub repository.
9. Create an initial Git checkpoint.
10. Give Codex or Claude Code a clearly defined implementation task.
11. Review the files and code changed by the assistant.
12. Run the application again.
13. Test the implemented behavior.
14. If something is wrong, collect evidence and investigate the problem.
15. Use AI to assist with diagnosis and debugging where useful.
16. Verify that the feature now behaves as expected.
17. Commit the working implementation to GitHub.

Now apply the complete workflow to the University Portal. Use the requirement and Excalidraw diagram below as the authoritative specification. Preserve every class, role, relationship, and constraint shown in the diagram.

Decisions you need to make

The diagram defines the system structure, but you still need to decide how important user interactions behave.

• What should each role see immediately after signing in?
• What feedback appears when enrollment succeeds?
• What happens when a course is full or the credit limit would be exceeded?
• Can a student drop a course at any time?
• Which course fields may an instructor update?
• When does an instructor-entered grade become visible to the student?
• Which fields are required when an administrator creates a course or account?
• How should validation errors be communicated?

Your workflow

1. Read the University Portal requirement and inspect the complete Excalidraw diagram.
2. Identify the User, Student, Instructor, Administrator, Course, and ExamType classes.
3. Identify each class's attributes, methods, relationships, and validation responsibilities.
4. Identify unclear interaction decisions without removing anything from the diagram.
5. Create or refine the interface concept in Variant for all three roles.
6. Open or create the project in Visual Studio Code.
7. Install dependencies and verify that the project runs locally.
8. Create or connect the project to a GitHub repository.
9. Make an initial commit before major implementation begins.
10. Choose one small University Portal feature to implement first.
11. Write down its expected behavior and relevant constraints.
12. Use Codex or Claude Code to assist with implementation.
13. Review every generated change and confirm it matches the diagram.
14. Run the application and test the implemented behavior.
15. Investigate and debug anything that does not work.
16. Verify the feature, then commit the working checkpoint.

You are done when...

• You preserved all six classes from the diagram
• You can explain what each role is allowed to see and do
• You can explain the Course and ExamType relationships
• You identified at least one unclear interaction decision
• You have an interface design covering Student, Instructor, and Administrator
• Your project runs locally and is connected to GitHub
• You have at least one meaningful Git commit
• You used Codex or Claude Code during implementation
• You reviewed and tested the generated changes yourself
• You committed a verified working checkpoint

Something going wrong is part of development. Start with evidence.

If you cannot complete one of these, ask an instructor before the workshop ends.

• I can turn a requirement into users, features, actions, and data
• I can identify unclear requirements before coding
• I created a functional application diagram
• I created an initial interface design
• I can run my project locally
• My project exists in a GitHub repository
• I created at least one meaningful Git commit
• I used Codex or Claude Code to implement or modify functionality
• I reviewed what the AI changed
• I tested the implementation myself
• I know where to begin investigating when something does not work

Use official documentation when you need to go beyond what we covered in the workshop.