Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
Turn your half‑finished React full‑stack app into a live AI‑powered product that uses Claude Code subagents, orchestrator routing, and shared state. You’ll learn Claude Code basics, build subagents, wire them together as a graph, and integrate the graph into your existing front‑end/back‑end so the final app can answer complex queries, generate content, and run automated workflows.
Claude Code Foundations
2 lessonsGet comfortable with the Claude Code environment, CLI, and basic prompts so you can start writing agents without leaving your editor.
Building Subagents and Graph Primitives
3 lessonsTranslate the theoretical nodes‑edges‑state model into concrete Claude Code artifacts: subagents, hooks, and the orchestrator.
Integrating Graphs into Your React Full‑Stack App
4 lessonsReplace a placeholder AI feature in your existing project with a real Claude Code graph, wiring front‑end calls to the orchestrator and persisting shared state.
Advanced Patterns & Deployment
2 lessonsExplore parallel subagents, error‑handling loops, and push the finished app to a free hosted environment.
Public lesson
In this lesson you’ll get the Claude Code command-line tool onto your machine, log in with your free account, and fire a single prompt so you can see the response and the token count. Every step ends with something you can look at to know it worked.
Tasks
Verify you have Node and npm by running node -v and npm -v. Each command should print a version number.
Claude Code is distributed as an npm package, so the runtime has to be present. If either command is missing, install the latest LTS version from nodejs.org before moving on.
Tasks
Install the Claude Code CLI globally by running npm install -g @anthropic/claude-code-cli. This makes the claude command available from any folder.
A global install means you don’t have to manage a separate project just to run a prompt.
Tasks
Check that the install was successful by running claude --version. You should see something like claude-cli 0.12.0. If the command isn’t found, double-check that your npm global bin directory is on your $PATH.
The CLI needs a token that ties the commands you run to your account. The easiest way is to let the CLI open a browser window for you.
Tasks
Authenticate your free Claude account by running claude login. A browser tab will appear, asking you to sign in (or create) an Anthropic account and then grant the CLI a token.
Without this token the service can’t attribute the request to you, and you won’t get usage stats.
Tasks
Check that you are logged in by running claude me. It should echo the email you just used and show the remaining free-tier quota.
Now you can talk to Claude. Use the ask sub-command for a simple question; the output includes the response and a token summary.
Tasks
Run a one-off prompt by executing claude ask "What is the capital of France?". You should see something similar to Answer: Paris and ⟹ 8 tokens used (prompt + completion).
This confirms that the CLI can reach the model, that your authentication works, and that you can read the token usage.
Tasks
If you only see the answer without the token line, add the --verbose flag and run claude ask "What is the capital of France?" --verbose.
Create a tiny script that calls the CLI from Node, just to see how you could integrate it later.
Tasks
Create a new file named demo.js and add the following code: import { execSync } from "child_process"; const result = execSync(claude ask "Tell me a one-sentence joke.", { encoding: "utf8" }); console.log(result);. Then, run node demo.js.
This shows that the CLI can be invoked programmatically, a pattern you’ll use when you build a front-end that talks to Claude.
Tasks
Check that the console output includes the joke text and a line with "tokens used".
If you ever need to revoke the token, you can log out by running claude logout.
The command confirms revocation, and you’ll need to run claude login again to restore access.
Now that you can call Claude from the terminal, the upcoming lesson will cover wiring the CLI into a simple React component so your UI can send a prompt and display the response. Keep the terminal open—you’ll reuse the claude command there.
4 modules · 11 lessons
Claude Code Foundations
Building Subagents and Graph Primitives
Integrating Graphs into Your React Full‑Stack App
Advanced Patterns & Deployment
Learn by building your own version.
Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.