# 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 Study Task Tracker.

Before building, ask questions

• What should happen when there are no tasks?
• Can a task be created without a title?
• Is the due date required?
• Should completed tasks remain visible?
• Should overdue tasks look different?
• Can a task be edited?
• What feedback appears after an action?

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 Study Task Tracker flow in Excalidraw.
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 repeat the same workflow yourself, but with a different application. Do not copy the Study Task Tracker implementation.

Decisions you need to make

The requirement intentionally leaves some details open. You must decide how your application should behave.

• Which event categories will exist?
• What should the empty state look like?
• Which fields are required when creating an event?
• How should events be ordered?
• What should happen after an event is added?
• How should an active filter be communicated to the user?
• What happens if no events match the selected category?

Your workflow

1. Read the Campus Event Board requirement.
2. Identify the users, pages or areas, features, actions, and data.
3. Identify unclear requirements and make reasonable decisions.
4. Create a functional diagram in Excalidraw.
5. Create or refine an interface concept in Variant.
6. Open or create your project in Visual Studio Code.
7. Install dependencies if required.
8. Verify that the project runs locally.
9. Create or connect the project to a GitHub repository.
10. Make an initial commit before major implementation begins.
11. Choose one small feature to implement first.
12. Write down its expected behavior.
13. Use Codex or Claude Code to assist with implementation.
14. Review what the AI changed.
15. Run the application.
16. Test the implemented behavior.
17. Investigate and debug anything that does not work.
18. Verify the feature behaves as expected.
19. Commit your working checkpoint.

You are done when...

• You can explain what your application is supposed to do
• You can explain at least one decision that was not explicitly stated in the requirement
• You have a functional Excalidraw diagram
• You have an initial interface design
• Your project runs locally
• Your project is connected to GitHub
• You have at least one meaningful Git commit
• You used Codex or Claude Code during implementation
• You reviewed the generated changes
• You tested the result yourself
• You committed a 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.