diff --git a/project_51_claude_code/1_40001_introduction_to_claude_code.html b/project_51_claude_code/1_40001_introduction_to_claude_code.html new file mode 100644 index 0000000..7580374 --- /dev/null +++ b/project_51_claude_code/1_40001_introduction_to_claude_code.html @@ -0,0 +1,41 @@ + + +
Welcome to Semi-Deterministic Workflows with Claude Code!
+

In this course, you'll learn how to harness the power of AI to streamline your development process. We'll be using Claude Code, a cutting-edge tool from Anthropic that integrates the advanced reasoning of the Claude 3 model family directly into your command line.

+ +
What is Claude Code?
+

Claude Code is a command-line interface (CLI) that acts as your AI coding partner. It can help you with a wide range of development tasks, from generating boilerplate code and writing unit tests to debugging complex issues and designing application architecture. By bringing AI into your terminal, Claude Code helps you code faster, smarter, and with greater consistency.

+ +
What are you going to learn?
+

You will learn about a powerful software development approach called semi-deterministic workflow. This method combines the consistency of automated scripts with the creative problem-solving of large language models. By the end of this tutorial, you'll be able to build robust applications more efficiently by letting the AI handle the heavy lifting while you guide the overall strategy.

+ +
What You Will Build
+

In this course, you will create a simple task manager application using Claude Code and a semi-deterministic workflow approach. This workflow combines the predictability of automated processes with the intelligence of AI-driven decision making.

+ +

The task manager will feature:

+ + +

But more importantly, you'll learn how to set up workflows where Claude Code handles architectural decisions while maintaining consistent coding standards.

+ +
Understanding Semi-Deterministic Workflows
+

Semi-deterministic workflows represent a powerful approach to software development that combines the best of both worlds:

+ +

Deterministic part: Pre-configured rules and automatic actions such as code formatting, testing, commits, and consistent project structure. These elements remain predictable and standardized.

+ +

Semi-deterministic part: Claude makes intelligent decisions about code structure, architecture, feature implementation, and improvements based on the current context and project needs.

+ +

This approach allows you to maintain coding standards while leveraging AI's creativity and problem-solving capabilities for complex development decisions.

+ +
What's Next
+

Now that you have an understanding of Claude Code and semi-deterministic workflows, it's time to set up your environment. In the next stage, we'll install and configure Claude Code to get you ready for building our task manager application.

diff --git a/project_51_claude_code/2_40002_installing_claude_code.html b/project_51_claude_code/2_40002_installing_claude_code.html new file mode 100644 index 0000000..a317dd0 --- /dev/null +++ b/project_51_claude_code/2_40002_installing_claude_code.html @@ -0,0 +1,67 @@ + + +
Installing Claude Code
+

Before we begin building our task manager, we need to install Claude Code CLI. Claude Code is a powerful command-line tool that brings Claude's capabilities directly into your development environment.

+ +
System Requirements
+

Make sure your system meets these requirements:

+ + +
Installation Steps
+

Let's install Claude Code using npm. The installation is straightforward but there are important considerations for different operating systems.

+ +Install Claude Code globally using npm. Run this command in your terminal: + +npm install -g @anthropic-ai/claude-code + +Important: Do NOT use `sudo npm install -g` as this can lead to permission issues and security risks. + +
Verify Your Installation
+

After installation, let's verify that everything is working correctly.

+ +Run this command to check your Claude Code installation: + + claude doctor + + +
Authentication
+

Claude Code offers several authentication options. For this tutorial, we'll use the most common approach:

+ +Navigate to your project directory and start Claude Code: + +cd your-project-directory +claude + + +

You'll be prompted to authenticate. Choose one of these options:

+
    +
  1. Anthropic Console (requires active billing at console.anthropic.com)
    2. +
  2. Claude App with Pro or Max plan
    3. +
  3. Enterprise platforms (Bedrock or Vertex AI)
    4. +
+ + + +Claude Code + +
What's Next
+

Now that you have Claude Code installed and authenticated, you're ready to start building our task manager application using semi-deterministic workflows. In the next stage, we'll set up our project structure and create the foundation for our intelligent development workflow.

+ +If any of these checks fail, don't proceed to the next stage. Revisit the installation and authentication steps, or consult the Claude Code documentation for troubleshooting. diff --git a/project_51_claude_code/3_40003_creating_your_first_app_with_claude_code.html b/project_51_claude_code/3_40003_creating_your_first_app_with_claude_code.html new file mode 100644 index 0000000..339fbd2 --- /dev/null +++ b/project_51_claude_code/3_40003_creating_your_first_app_with_claude_code.html @@ -0,0 +1,91 @@ + + +
Time to Get Hands-On
+

Now that Claude Code is installed and authenticated, it's time to experience its power firsthand. In this stage, we'll create a basic task manager application structure and see how Claude Code can intelligently generate code, suggest architecture, and set up development environments.

+ +

This hands-on practice will demonstrate the Claude Code in action - we'll provide the requirements, and Claude Code will make smart decisions about implementation details.

+ +
Setting Up Your Project
+

Let's start by creating a dedicated workspace for our task manager application. We'll set up the basic project structure manually first, then let Claude Code enhance it with intelligent suggestions.

+ +
Step 1: Create Project Structure
+ +

Let's set up the basic project structure with npm and create our initial files:

+ + +npm init -y +mkdir src +cd src +touch index.html app.js style.css +cd .. + +

This creates a basic structure with a `package.json` file and our main source files in the `src` directory.

+ +
Step 2: Generate Your Application Structure
+

Now comes the exciting part - let's start Claude Code and see how it can help us build our application:

+ +

Here's where the magic happens. We'll give Claude Code a clear prompt about what we want to build, and it will make intelligent decisions about the implementation:

+ + +I'm creating a simple Task Manager web application. Help me set up the basic project structure with HTML, CSS and JavaScript. Create a package.json file with necessary development scripts, including live-server for local hosting. + +The task manager should include: +- Add new tasks +- Mark tasks as complete/incomplete +- Delete tasks +- Filter tasks by status (all, active, completed) +- Clean, modern interface + +Please set up the complete file structure and provide the initial code for all files. + +Run the app after generating all the files + + +
What to Expect
+

After running this prompt, Claude Code will demonstrate several key capabilities of semi-deterministic workflows:

+ + + +
Verification Steps
+

Once Claude Code finishes generating your application, let's verify everything is working correctly:

+ + +Check the project structure. Verify that there are: + +- Updated package.json with development scripts +- HTML file with proper structure +- CSS file with modern styling +- JavaScript file with task management functionality + +

Now let's run and test the application.

+ +Install dependencies and test your application: + +npm install +npm start + + +Task Manager Application + +

By the end of this stage, you should have:

+ + + +If your application isn't working as expected, don't worry! In the next stage, we'll explore how to iterate and improve the application using Claude Code's debugging and enhancement capabilities. + +
What's Next
+

Congratulations! You've successfully used Claude Code to generate a complete web application. In the next stage, we'll dive deeper into the semi-deterministic workflow by customizing and enhancing the application, demonstrating how Claude Code can adapt to changing requirements while maintaining code quality.

\ No newline at end of file diff --git a/project_51_claude_code/4_40004_setting_up_deterministic_hooks.html b/project_51_claude_code/4_40004_setting_up_deterministic_hooks.html new file mode 100644 index 0000000..569c88c --- /dev/null +++ b/project_51_claude_code/4_40004_setting_up_deterministic_hooks.html @@ -0,0 +1,139 @@ + + +
Automating with Deterministic Hooks
+

In the previous stage, you saw how Claude Code can make intelligent decisions to generate a complete application. Now, we'll focus on the deterministic part of our workflow by setting up hooks. Hooks are automated actions that run at specific points in the development process, ensuring consistency and quality without manual intervention.

+ +
Understanding Hooks
+

Hooks in Claude Code are the deterministic core of your workflow. They automatically perform specific actions at key moments:

+ +

By automating these routine tasks, you can focus on the creative aspects of development while maintaining a high standard of code quality.

+ +
Step 1: Create Hooks Configuration File
+

First, we need to create a directory and a file to store our hook configurations. Claude Code looks for these configurations in a .claude directory in your project root.

+ +Create the necessary directory and file for your hooks: + +mkdir .claude +touch .claude/settings.json + + +
Step 2: Configure Your Hooks
+

Now, let's instruct Claude to populate our hooks.json file. We will configure hooks for automatic logging of all the bash commands used by Claude Code agent.

+ + +Create a .claude/logger.py file with the follwowing content: + +#!/usr/bin/env python3 +""" +Command logging hook. +Logs all Bash commands with timestamps and descriptions. +""" +import json +import sys +from datetime import datetime +from pathlib import Path + + +def main(): + try: + # Read input + input_data = json.load(sys.stdin) + tool_name = input_data.get('tool_name', '') + + # Log all tool actions (not just Bash) + if not tool_name: + sys.exit(0) + + # Extract tool info + tool_input = input_data.get('tool_input', {}) + session_id = input_data.get('session_id', 'unknown') + + # Format log entry based on tool type + timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S') + + if tool_name == 'Bash': + command = tool_input.get('command', '') + description = tool_input.get('description', 'No description') + log_entry = f"[{timestamp}] [{session_id[:8]}] BASH: {command} - {description}\n" + else: + # For other tools, log the tool name and key parameters + key_info = str(tool_input)[:100] + '...' if len(str(tool_input)) > 100 else str(tool_input) + log_entry = f"[{timestamp}] [{session_id[:8]}] {tool_name.upper()}: {key_info}\n" + + # Append to log file + log_file = Path.cwd() / 'claude-logs.txt' + try: + with open(log_file, 'a') as f: + f.write(log_entry) + except Exception as e: + print(f"Warning: Could not write to command log: {e}", file=sys.stderr) + + + except json.JSONDecodeError: + print("Error: Invalid JSON input", file=sys.stderr) + sys.exit(1) + except Exception as e: + # Don't fail the command due to logging errors + print(f"Warning: Command logging error: {e}", file=sys.stderr) + sys.exit(0) + + +if __name__ == "__main__": + main() + + + +

We have created a simple logger script, but in fact you can create more complex hooks in the language you like.

+ +

How we have to configure the conditions under which the script will be executed. Let's ask an assistant to create a configuration file:

+ + + Create a .claude/settings.json file with the following content: + + { + "hooks": { + "PostToolUse": [ + { + "matcher": "Bash", + "hooks": [ + { + "type": "command", + "command": "python .claude/logger.py" + } + ] + } + ] + } +} + + +

In this configuration, we set up a PostToolUse hook that triggers our logging script after every use of the Bash tool. This way, every command executed by Claude will be logged with a timestamp and description.

+ +

Now in the terminal, ask Claude Code to do some analysis of your project filesystem:

+ +How much space does my current project occupy? + +

After Claude completes the task, check the claude-logs.txt file in your project root. You should see a log entry for the bash command that was executed.

+ +

By the end of this stage, you will have a more robust and automated workflow:

+ + + +

Feel free to test your custom hooks. For more information about how the Claude Hooks can be configured, refer to official documentation

+ +If you notice that the hook does not work as expected, calling /hooks and then selecting Disable all hooks, and then re-enable it by calling /hooks again. + +

With deterministic hooks in place, your workflow is now smarter and more efficient. In the next stage, we'll explore the other side of the coin: creating semi-deterministic custom commands that empower Claude to make intelligent decisions within a structured framework.

diff --git a/project_51_claude_code/5_40005_creating_semi_deterministic_commands.html b/project_51_claude_code/5_40005_creating_semi_deterministic_commands.html new file mode 100644 index 0000000..359b543 --- /dev/null +++ b/project_51_claude_code/5_40005_creating_semi_deterministic_commands.html @@ -0,0 +1,60 @@ + + +
Creating Semi-deterministic Commands
+

You've successfully set up the deterministic part of your workflow with hooks. Now, it's time to build the semi-deterministic part using custom commands. Custom slash commands allow you to give Claude specific instructions and context, empowering it to make intelligent decisions within a well-defined framework.

+ +
Understanding Custom Commands
+

Custom commands are markdown files that act as templates for prompts. They allow you to create reusable, context-aware instructions for Claude. This is the core of the semi-deterministic approach: you define the rules and the goals, and Claude uses its intelligence to figure out the best way to achieve them.

+ +
Step 1: Create a Commands Folder
+

First, we need a place to store our custom commands. Claude Code looks for a commands directory inside the .claude folder.

+ +Create a directory for your custom commands: + +mkdir .claude/commands + + +
Step 2: Create Custom Slash Commands
+

Now, let's ask Claude to create three essential commands for our web development workflow: one for adding features, one for reviewing code, and one for debugging.

+ + + +Create three custom slash commands in the `.claude/commands/` directory: + +1. `/add-feature.md`: A command for adding new functionality. It should analyze the current code, suggest architectural solutions, and implement the feature, including tests. +2. `/review-code.md`: A command for analyzing code quality. It should check for readability, performance, and security, then suggest improvements. +3. `/debug-issue.md`: A command for finding and fixing bugs. It should analyze the code, help reproduce the problem, and suggest a solution. + +Each command should be able to accept parameters through the `$ARGUMENTS` variable. + + +
Step 3: Create a Project Context File
+

To help Claude make better decisions, we should provide it with high-level context about our project. The CLAUDE.md file in the root of your project is the perfect place for this.

+ + + +Create a `CLAUDE.md` file in my project root. This file should describe the architecture of our Task Manager application. Include: +- A general description of the application's functionality. +- The file structure and the purpose of each file. +- The coding standards for this project. +- The principles that the AI should follow when working with the code. + + +The CLAUDE.md file acts as a master prompt, providing Claude with a consistent set of guidelines for all its operations on your project. + +
Expected Results
+

After completing this stage, your workflow will be significantly more powerful:

+ + + +
What's Next
+

You have now established a complete semi-deterministic workflow with both automated hooks and intelligent custom commands. In the next stage, we'll put this workflow into practice by developing new features for our Task Manager application.

diff --git a/project_51_claude_code/6_40006_feature_development_with_automation.html b/project_51_claude_code/6_40006_feature_development_with_automation.html new file mode 100644 index 0000000..c8ae394 --- /dev/null +++ b/project_51_claude_code/6_40006_feature_development_with_automation.html @@ -0,0 +1,60 @@ + + +
Feature Development with Automation
+

With our semi-deterministic workflow fully configured, it's time to see it in action. In this stage, we'll use our custom /add-feature command to build out the functionality of our Task Manager application. You'll witness how Claude makes architectural decisions while the hooks you configured handle the routine tasks of formatting and committing the code.

+ +
Step 1: Add Basic Task Management Features
+

Let's start by creating the core interface for our Task Manager. We'll ask Claude to add the ability to add, delete, and mark tasks as complete.

+ + + +/add-feature Create the basic Task Manager interface with the ability to add, delete, and mark tasks as completed. + + +

Observe the process. Claude will analyze your request, generate the necessary HTML, CSS, and JavaScript, and then your hooks will automatically trigger to format the new code and commit the changes to your git repository.

+ +
Step 2: Add Advanced Features
+

Now that we have the basic functionality, let's extend it. We'll add the ability to edit tasks and filter them by their status.

+ +

Let's use the /add-feature command again to add more functionality:

+ + +/add-feature Add the capability to edit existing tasks and to filter tasks by their status (all, active, completed). + + + + +
Step 3: Test the Hooks and Run the Application
+

After Claude has finished implementing the new features, it's time to test the application and see the results of our automated workflow.

+ +Run the development server to see your application in action: + +npm run dev + +

Your browser should open with the Task Manager application running. Test out all the features: adding, editing, deleting, and filtering tasks.

+ +
Step 4: Use the Code Review Command
+

Our semi-deterministic workflow isn't just for adding features. Let's use the /review-code command to get suggestions for improving what we've built.

+ + +/review-code Analyze the current application code and suggest improvements for performance and readability. + + +

After executing the command, Claude will provide suggestions for improvements in the application's performance and readability.

+ +Code Review Command + + + +
What's Next
+

Your application is now feature-complete. In the next stage, we'll focus on testing and debugging, using our custom /debug-issue command to find and fix problems, further demonstrating the power of a semi-deterministic workflow.

diff --git a/project_51_claude_code/7_40007_testing_and_debugging_workflow.html b/project_51_claude_code/7_40007_testing_and_debugging_workflow.html new file mode 100644 index 0000000..7e1691a --- /dev/null +++ b/project_51_claude_code/7_40007_testing_and_debugging_workflow.html @@ -0,0 +1,45 @@ + + +
Testing and Debugging Workflow
+

In real-world development, things don't always go as planned. Bugs happen. That's why a robust workflow needs to account for testing and debugging. In this stage, you'll learn how to use your semi-deterministic workflow to identify, analyze, and fix issues in your application.

+ +
Step 1: Intentionally Introduce and Fix a Bug
+

Let's start by intentionally introducing an error into our application to simulate a real-world bug. Then, we'll use our custom /debug-issue command to find and fix it.

+

First, open src/app.js and comment out the line where you add the event listener to the "Add Task" button. This will break the task addition functionality.

+

Now, let's use our debugging command to find and fix the bug:

+ + + +/debug-issue The application's task addition feature is not working. The 'Add Task' button does not respond to clicks. + + +

Claude will analyze the code, identify the missing event listener, and suggest a fix. Once you approve the fix, the bug will be resolved, and your hooks will format and commit the changes.

+ +Code Review Command + + +
Step 2: Add Data Persistence
+

A common feature request for an application like this is data persistence. Users want their tasks to be saved even after they close the browser. Let's add this feature using our workflow.

+ + +/add-feature Add the functionality to save tasks to the browser's localStorage so they don't disappear when the page is reloaded. + + +
Step 3: Conduct a Final Code Review
+

Before we conclude, let's perform one last code review to ensure everything is working correctly and the code is of high quality.

+ +Run a final code review: + +/review-code Conduct a final code review of the entire application and ensure everything works correctly. + + + diff --git a/project_51_claude_code/8_40008_results_and_concept_understanding.html b/project_51_claude_code/8_40008_results_and_concept_understanding.html new file mode 100644 index 0000000..76f4cd3 --- /dev/null +++ b/project_51_claude_code/8_40008_results_and_concept_understanding.html @@ -0,0 +1,29 @@ + + +
Results
+

Congratulations! You have successfully built a complete Task Manager web application from scratch using a semi-deterministic workflow with Claude Code. More importantly, you've learned a powerful new way to approach software development, blending the best of automation and AI-driven intelligence.

+ +

Let's recap what you've accomplished and solidify your understanding of the semi-deterministic workflow you created.

+ +

Deterministic Components (predictable and automated):

+ + +

Semi-deterministic Components (intelligent decisions by Claude):

+ + +

You now know how to create powerful development workflows where routine tasks are automated and complex decisions are made by an intelligent AI assistant working within a set of rules you define. This approach allows you to build better software faster, and we can't wait to see what you build next!

diff --git a/project_51_claude_code/project.json b/project_51_claude_code/project.json new file mode 100644 index 0000000..3c0433d --- /dev/null +++ b/project_51_claude_code/project.json @@ -0,0 +1,10 @@ +{ + "id": 51, + "description": "Learn how to build a simple task manager by combining the predictability of automated processes with the intelligence of AI-driven decisions using Claude Code.", + "title": "Semi-Deterministic Workflows with Claude Code", + "categories": "AI Agents, Claude, AI Engineering, Deterministic Workflows", + "cover_url": "https://ucarecdn.com/0c6b884e-7ae2-4d44-b268-9b4ddd626d5f/", + "readme": "# Semi-Deterministic Workflows with Claude Code\n\nThis course teaches you how to build a simple task manager application using a semi-deterministic workflow. You'll learn to leverage Claude Code for intelligent decision-making while maintaining predictable, automated processes for code quality and structure.", + "short_description": "Build a task manager using AI-driven semi-deterministic workflows with Claude Code.", + "ides": "cursor" +}