# mujeebmohammed-gits/claudeaitutorial architecture

> Architecture diagram of the GitHub repository mujeebmohammed-gits/claudeaitutorial, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mujeebmohammed-gits/claudeaitutorial
- Repository: https://github.com/mujeebmohammed-gits/claudeaitutorial

## Overview

This repository combines a React course site about Claude Code and AI agents with two standalone Python agents. The course workflow is browsing the home page and navigating through eleven lessons; the sampled lesson demonstrates file, web research, data-analysis, and customer-support agent examples. The to-do agent accepts commands, updates task state, and persists it; the GitHub agent includes configuration storage and a GitHub MCP client. Only selected sources were sampled, so links from the GitHub agent entry point and most lesson pages are omitted where their wiring is unverified.

Main entry points: [`src/router.jsx`](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/router.jsx) (Course router), [`src/pages/Part5.jsx`](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/pages/Part5.jsx) (Practical examples), [`todo-agent/agent.py`](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/todo-agent/agent.py) (Command loop), [`src/main.jsx`](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_course["Course website"]
  node_app["React entry<br/>[main.jsx]"]
  node_router["Course router<br/>[router.jsx]"]
  node_layout["Shared layout<br/>[Layout.jsx]"]
  node_home["Course home<br/>[Home.jsx]"]
  node_lessons["Lessons 0–10"]
  node_lesson5["Practical examples<br/>[Part5.jsx]"]
  node_navigation["Lesson navigation<br/>[Sidebar.jsx]"]
  node_partnav["Previous/next links<br/>[PartNavigation.jsx]"]
  node_pagewrapper["Lesson wrapper"]
  node_section["Lesson sections<br/>[SectionBlock.jsx]"]
  node_hero["Lesson hero<br/>[HeroSection.jsx]"]
end

subgraph group_todo["To-do agent"]
  node_todo_agent["Command loop<br/>[agent.py]"]
  node_commands["Command parser<br/>[commands.py]"]
  node_task_store[("Task JSON<br/>[storage.py]")]
  node_task_file[("Task file")]
end

subgraph group_github["GitHub issue agent"]
  node_github_agent["Issue agent<br/>[agent.py]"]
  node_github_tools["GitHub MCP client<br/>[github_tools.py]"]
  node_config_store[("Local config<br/>[storage.py]")]
  node_config_file[("Config file")]
end

node_visitor(("Course visitor"))
node_todo_user(("To-do user"))
node_mcp_server["GitHub MCP server"]

node_visitor -->|"opens"| node_app
node_app -->|"mounts"| node_router
node_router -->|"renders"| node_layout
node_router -->|"routes"| node_home
node_router -->|"routes"| node_lessons
node_lesson5 -->|"renders"| node_pagewrapper
node_lesson5 -->|"renders"| node_section
node_lesson5 -->|"renders"| node_hero
node_todo_user -->|"enters commands"| node_todo_agent
node_todo_agent -->|"parses input"| node_commands
node_todo_agent -->|"reads/writes tasks"| node_task_store
node_task_store -->|"reads/writes JSON"| node_task_file
node_github_tools -->|"JSON-RPC over stdio"| node_mcp_server

click node_app "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/main.jsx"
click node_router "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/router.jsx"
click node_layout "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/Layout.jsx"
click node_home "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/pages/Home.jsx"
click node_lessons "https://github.com/mujeebmohammed-gits/claudeaitutorial/tree/main/src/pages"
click node_lesson5 "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/pages/Part5.jsx"
click node_navigation "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/Sidebar.jsx"
click node_partnav "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/PartNavigation.jsx"
click node_pagewrapper "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/PartPageWrapper.jsx"
click node_section "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/SectionBlock.jsx"
click node_hero "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/HeroSection.jsx"
click node_todo_agent "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/todo-agent/agent.py"
click node_commands "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/todo-agent/commands.py"
click node_task_store "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/todo-agent/storage.py"
click node_github_agent "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/github-issue-agent/agent.py"
click node_github_tools "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/github-issue-agent/github_tools.py"
click node_config_store "https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/github-issue-agent/storage.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_router,node_layout,node_home,node_lessons,node_lesson5,node_navigation,node_partnav,node_pagewrapper,node_section,node_hero,node_todo_user toneBlue
class node_todo_agent,node_commands,node_task_store,node_task_file toneAmber
class node_github_agent,node_github_tools,node_config_store,node_config_file,node_mcp_server toneMint
class node_visitor toneIndigo
```

## Components

### Course website

- [React entry](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/main.jsx): `src/main.jsx`
- [Course router](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/router.jsx): `src/router.jsx`
- [Shared layout](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/Layout.jsx): `src/Layout.jsx`
- [Course home](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Lessons 0–10](https://github.com/mujeebmohammed-gits/claudeaitutorial/tree/main/src/pages): `src/pages`
- [Practical examples](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/pages/Part5.jsx): `src/pages/Part5.jsx`
- [Lesson navigation](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`
- [Previous/next links](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/PartNavigation.jsx): `src/components/PartNavigation.jsx`
- [Lesson wrapper](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/PartPageWrapper.jsx): `src/components/PartPageWrapper.jsx`
- [Lesson sections](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/SectionBlock.jsx): `src/components/SectionBlock.jsx`
- [Lesson hero](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/src/components/HeroSection.jsx): `src/components/HeroSection.jsx`

### To-do agent

- [Command loop](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/todo-agent/agent.py): `todo-agent/agent.py`
- [Command parser](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/todo-agent/commands.py): `todo-agent/commands.py`
- [Task JSON](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/todo-agent/storage.py): `todo-agent/storage.py`
- **Task file**

### GitHub issue agent

- [Issue agent](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/github-issue-agent/agent.py): `github-issue-agent/agent.py`
- [GitHub MCP client](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/github-issue-agent/github_tools.py): `github-issue-agent/github_tools.py`
- [Local config](https://github.com/mujeebmohammed-gits/claudeaitutorial/blob/main/github-issue-agent/storage.py): `github-issue-agent/storage.py`
- **Config file**

### Other components

- **Course visitor**
- **To-do user**
- **GitHub MCP server**

## Connections

- Course visitor → React entry: opens
- React entry → Course router: mounts
- Course router → Shared layout: renders
- Course router → Course home: routes
- Course router → Lessons 0–10: routes
- Practical examples → Lesson wrapper: renders
- Practical examples → Lesson sections: renders
- Practical examples → Lesson hero: renders
- To-do user → Command loop: enters commands
- Command loop → Command parser: parses input
- Command loop → Task JSON: reads/writes tasks
- Task JSON → Task file: reads/writes JSON
- GitHub MCP client → GitHub MCP server: JSON-RPC over stdio