Skip to content

Commit 537f034

Browse files
committed
feat(lessons): add Claude Code Workshop lesson (12), adapted from workshops-de/workshop-claude-code
Ports all 27 tasks from https://github.com/workshops-de/workshop-claude-code 1:1 in structure (stepped 010-270 numbering, categories, timing, no prepared repository/solution branches -- participants own every line, same as the source workshop). Reference domain adapted from the source's 'pawsaw/clash' (Next.js monolith + Prisma) to a new 'Bookmonkey Community' brief (users lend/borrow books, request/accept/reject workflow) built on this course's actual stack (Next.js frontend + PHP/Slim backend + SQLite via PDO) -- inspiration only, not starter code, mirroring the source's own philosophy. 7 of 27 tasks required real architecture rewrites (not just renaming) because the source assumes a Next.js-only monolith with Prisma/Server Actions, while this course uses a split frontend/ backend: - 060-project-initialization: scaffold both a Next.js frontend AND a separate PHP/Slim backend - 070-domain-modelling: brief changed to the book-lending domain - 080-database-design: Prisma schema/migrate/seed -> raw schema.sql + PDO migrate.php/seed.php, with SQLite-specific pitfalls (foreign keys off by default, no native enums) replacing the Prisma 7.x pitfalls - 090-authentication: Next.js Server Actions + jose/cookies -> PHP endpoints issuing a signed token, consumed by a Next.js Route Handler/guard - 100-ui-development: server components + Server Actions -> frontend fetch/mutate against a PHP REST API, validated on both sides for different reasons (UX vs. security) - 110-maps: entity types (clashes/venues) -> books/bookstores - 120-participation-and-notifications: join/accept/reject -> borrow-request accept/reject The remaining 20 tasks are Claude Code tool mechanics (installation, permission modes, CLAUDE.md, context engineering, skills, commands, subagents, hooks, MCP, refactoring, debugging, TDD, headless automation, code review, autonomous workflows, Agent SDK, alternative models, Spec Kit, BMAD) and needed only light touch-ups (renaming the example domain in passing mentions). Slides intentionally not authored yet (per explicit scope decision) -- lesson.yml has a TODO and this lesson is not yet linked from 00-index.md/slides.md to avoid referencing a non-existent Slidev entry file.
1 parent 24ec4db commit 537f034

125 files changed

Lines changed: 2926 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,27 @@ Details siehe [`app/README.md`](./app/README.md).
6969
| 09 | Model Context Protocol | MCP-Server generiert React-Komponenten & PHP-Controller statt Angular-Code |
7070
| 10 | Agentic Workflow | unverändert (stack-agnostisch, GitHub Actions) |
7171
| 11 | Evals | unverändert (Tool ist stack-agnostisch) |
72+
| 12 | Claude Code Workshop | adaptiert von [`workshop-claude-code`](https://github.com/workshops-de/workshop-claude-code) (27 Tasks, gleiches Nummernschema); Referenz-Domäne "Bookmonkey Community" (Bücher ausleihen) statt "Clash"; **Slides fehlen noch** (siehe `lesson.yml`) |
7273

7374
Details zur Migrationsentscheidung: siehe Konzept-Zusammenfassung im PR/Commit-Verlauf.
7475

76+
### Lesson 12: Claude Code Workshop
77+
78+
Diese Lesson ist strukturell 1:1 von [`workshop-claude-code`](https://github.com/workshops-de/workshop-claude-code)
79+
übernommen (27 Tasks, gestuftes Nummernschema `010`–`270`, keine vorbereiteten Solution-Branches —
80+
Teilnehmer besitzen jeden Code, den sie schreiben, wie im Original). Referenz-App ist nicht
81+
[`pawsaw/clash`](https://github.com/pawsaw/clash), sondern eine erweiterte **"Bookmonkey
82+
Community"**-Domäne (Bücher ausleihen: Nutzer bieten Bücher zum Verleih an, andere fragen an, der
83+
Besitzer akzeptiert/lehnt ab) auf Next.js + PHP/Slim + SQLite — analog zu unserem `app/`-Ordner,
84+
aber bewusst **kein Startcode**: Teilnehmer bauen alles selbst auf.
85+
86+
7 der 27 Tasks (`060`–`120`, "Building Bookmonkey") enthalten echte Architektur-Anpassungen
87+
gegenüber dem Original (Next.js-Monolith mit Prisma/Server-Actions → getrennte Next.js-Frontend +
88+
PHP/Slim-Backend-Architektur mit PDO/SQLite). Die restlichen 20 Tasks sind Claude-Code-Tool-Wissen
89+
und praktisch stack-agnostisch, daher nahezu unverändert übernommen.
90+
91+
**Offen:** Die Slides (Google Slides im Original) fehlen noch für diese Lesson.
92+
7593
## 🔗 Platform Integration
7694

7795
- **lesson.yml**: Lesson-Metadaten, werden zur workshops.de-Plattform synchronisiert
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Lesson configuration for repository import
2+
# This file defines the lesson metadata that will be synced to the platform
3+
#
4+
# Adapted from https://github.com/workshops-de/workshop-claude-code (27 tasks, structure and
5+
# task-numbering scheme kept 1:1). No prepared repository/solution branch on purpose: like the
6+
# source workshop, participants own every line of code they write. The Bookmonkey app in this
7+
# repo's app/ folder is domain inspiration only (analogous to pawsaw/clash in the source
8+
# workshop), not starter code.
9+
10+
name: 'AI React PHP: Claude Code Workshop'
11+
position: 11
12+
13+
# Trainer (use email or slug to match existing trainer)
14+
# TODO: replace with the actual trainer email before going live
15+
trainer: trainer@workshops.de
16+
17+
# No git integration: there is no prepared repository or solution branch (see above).
18+
19+
# Presentation type: "google_slides" or "slidev"
20+
# TODO: slides not built yet - see AskQuestion decision "no_slides_yet". Fill in once authored,
21+
# either as a new Slidev deck (consistent with the rest of this repo) or a dedicated Google Slides
22+
# deck.
23+
slides_type: slidev
24+
25+
# PDF sync (works for both Google Slides and Slidev)
26+
pdf_generation_enabled: true
27+
28+
# Playground options
29+
stackblitz_enabled: false
30+
codesandbox_enabled: false
31+
32+
# Status
33+
deprecated: false
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
## Overview
2+
3+
Before touching any code, get Claude Code installed as a terminal tool on your own machine and
4+
confirm it actually works end to end: it runs, you're signed in, and it responds. This is a pure
5+
setup task — no exploration, no code, just a working install you can rely on for the rest of the
6+
workshop.
7+
8+
## Prerequisites
9+
10+
- Node.js 18+ installed (`node -v`), if you plan to install via npm
11+
- A terminal you're comfortable in
12+
- A Claude account (Claude.ai or Claude Console)
13+
14+
## Steps
15+
16+
1. Install Claude Code using either method:
17+
18+
```bash
19+
# macOS / Linux / WSL — native install script
20+
curl -fsSL https://claude.ai/install.sh | bash
21+
22+
# or via npm (any OS with Node.js 18+)
23+
npm install -g @anthropic-ai/claude-code
24+
```
25+
26+
2. Confirm it's on your `PATH` and check the version:
27+
28+
```bash
29+
claude --version
30+
```
31+
32+
3. Navigate into any project directory and start a session:
33+
34+
```bash
35+
cd your-project
36+
claude
37+
```
38+
39+
4. **Sign in** when prompted (via Claude.ai or Claude Console) and wait for the prompt to become
40+
interactive.
41+
42+
5. **Test that it works**: ask a trivial question (for example, "what files are in this
43+
directory?") and confirm you get a sensible response.
44+
45+
6. Exit cleanly (`/exit` or `Ctrl+C`) and start it again to confirm the second launch is just as
46+
smooth — no repeated login, no errors.
47+
48+
## Success Criteria
49+
50+
- [ ] `claude --version` runs without error
51+
- [ ] You are signed in to a Claude account
52+
- [ ] `claude` starts an interactive session in a project directory
53+
- [ ] The agent answered a trivial question about the current directory
54+
- [ ] Restarting the session does not require signing in again
55+
56+
## References
57+
58+
- Claude Code — Overview: https://code.claude.com/docs/en/overview
59+
- Claude Code — Quickstart: https://code.claude.com/docs/en/quickstart
60+
- Claude Code — CLI reference: https://code.claude.com/docs/en/cli-reference
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<details>
2+
<summary>💡 Hint 1: "claude: command not found"</summary>
3+
4+
Restart your shell (or open a new terminal tab) after installing — the `PATH` update often only
5+
takes effect in new shell sessions.
6+
7+
</details>
8+
9+
<details>
10+
<summary>💡 Hint 2: npm install permission errors</summary>
11+
12+
If `npm install -g` fails with permission errors, prefer the native `curl` install script instead
13+
of reaching for `sudo`.
14+
15+
</details>
16+
17+
<details>
18+
<summary>💡 Hint 3: Stuck on sign-in</summary>
19+
20+
Sign-in opens a browser window — if you're on a restricted or headless machine, check the docs for
21+
alternative authentication flows before assuming it's broken.
22+
23+
</details>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Task Configuration
2+
title: 'Install Claude Code and Verify It Works'
3+
position: 10
4+
category: 'Foundations'
5+
preparation: true
6+
estimated_time_in_minutes: 15
7+
always_unlocked: true
8+
9+
# No git integration: there is no prepared repository or solution branch.
10+
11+
# Note: Markdown content is loaded from separate files:
12+
# - body.md -> Main task description
13+
# - hint.md -> Hints for solving the task
14+
# - trainer_hint.md -> Notes for trainers (not shown to participants)
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
## Learning goals
2+
3+
- **Skills:** installing Claude Code; verifying an install end to end; basic troubleshooting.
4+
- **Concepts:** the CLI as a terminal-native tool; sign-in/session persistence.
5+
- **Takeaways:** a verified install now prevents lost time in every later task.
6+
7+
## Facilitation notes
8+
9+
- This is intentionally a **pure setup task**, split out from "Claude Code Fundamentals" so
10+
installation problems don't eat into time meant for learning the tool itself.
11+
- Strongly recommend sending the prerequisites (Node.js version, account signup) to participants
12+
**before** the session so this task takes minutes, not most of the first block.
13+
- Common blockers: outdated Node.js, corporate proxies/firewalls blocking the install script or
14+
sign-in, and missing `PATH` updates after install. Have a fallback (e.g. a pre-provisioned
15+
Codespace/devcontainer) ready for anyone who can't get unblocked quickly.
16+
- Walk the room and confirm every participant's `claude --version` succeeds before moving on to
17+
the Fundamentals task — a broken install here compounds for the rest of the day.
18+
19+
## Time estimate
20+
21+
~15 minutes for most participants; corporate network restrictions can extend this significantly.
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
## Overview
2+
3+
Point Claude Code at the API key provided for this workshop instead of your personal Claude
4+
account, using the built-in `/config` command. This keeps everyone's usage and cost on the
5+
workshop's shared billing and removes one more blocker before the first real exercise.
6+
7+
## Prerequisites
8+
9+
- Claude Code installed and verified (previous task)
10+
- The API key shared by your trainer for this workshop
11+
12+
## Steps
13+
14+
1. Get the workshop API key from your trainer (usually shared at the start of the session, e.g.
15+
via chat or a slide).
16+
2. Start a session in any directory:
17+
18+
```bash
19+
claude
20+
```
21+
22+
3. Open the configuration menu:
23+
24+
```
25+
/config
26+
```
27+
28+
4. Find the API key / authentication setting and **paste in the workshop key**, then confirm/save.
29+
5. Restart `claude` (or open a fresh session) and confirm it does **not** prompt you to sign in
30+
with a personal Claude.ai/Console account — it should use the configured key automatically.
31+
6. Ask a trivial question (for example, "what is 2 + 2") to confirm requests go through
32+
successfully using the workshop key.
33+
34+
## Success Criteria
35+
36+
- [ ] `/config` shows the workshop API key as the active authentication method
37+
- [ ] Starting `claude` does not prompt for personal sign-in
38+
- [ ] A trivial question was answered successfully using the workshop key
39+
- [ ] The setting persists in a freshly opened session without repeating `/config`
40+
41+
## References
42+
43+
- Claude Code — Slash commands: https://code.claude.com/docs/en/slash-commands
44+
- Claude Code — Settings: https://code.claude.com/docs/en/settings
45+
- Claude Code — Overview: https://code.claude.com/docs/en/overview
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<details>
2+
<summary>💡 Hint 1: Still being asked to log in?</summary>
3+
4+
Check for a leftover personal login session — it can take priority over the key set via
5+
`/config`. Sign out of any personal account first if you're unsure which one is active.
6+
7+
</details>
8+
9+
<details>
10+
<summary>💡 Hint 2: Can't find the API key option in /config</summary>
11+
12+
`/config` opens a menu — look for an authentication or API key entry specifically; don't confuse
13+
it with unrelated settings like theme or permissions.
14+
15+
</details>
16+
17+
<details>
18+
<summary>💡 Hint 3: Never paste the key elsewhere</summary>
19+
20+
Only paste the key into the `/config` prompt itself — never into a file you might commit to git
21+
or share in chat outside the intended channel.
22+
23+
</details>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Task Configuration
2+
title: 'Set Up the Workshop API Key'
3+
position: 15
4+
category: 'Foundations'
5+
preparation: false
6+
estimated_time_in_minutes: 10
7+
always_unlocked: false
8+
9+
# No git integration: there is no prepared repository or solution branch.
10+
11+
# Note: Markdown content is loaded from separate files:
12+
# - body.md -> Main task description
13+
# - hint.md -> Hints for solving the task
14+
# - trainer_hint.md -> Notes for trainers (not shown to participants)
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
## Learning goals
2+
3+
- **Skills:** configuring authentication via the `/config` command.
4+
- **Concepts:** API key vs. personal account auth; shared workshop billing.
5+
- **Takeaways:** the workshop key removes a sign-up blocker so everyone can start together.
6+
7+
## Facilitation notes
8+
9+
- **Deliberately locked and not marked as preparation**: the key should only be handed out live,
10+
at the start of the session (not before), so unlock this task yourself once you've shared the
11+
key with the room.
12+
- Share the key in a way participants can copy-paste reliably (chat message or a slide with
13+
copyable text) — reading it aloud invites typos.
14+
- Walk through `/config` once on your own machine beforehand so you can point participants to the
15+
exact menu entry live instead of hunting for it together.
16+
- Keep an eye on usage/cost during the workshop; consider rotating or revoking the key afterwards.
17+
- If a participant already has a personal Claude account logged in, help them confirm the
18+
workshop key is actually the one being used (the personal login can otherwise take precedence).
19+
20+
## Time estimate
21+
22+
~10 minutes once the key has been shared.

0 commit comments

Comments
 (0)