Boost Your Productivity with Claude Code: Your AI Coding Partner

AI-assisted coding has come a long way—from asking language models occasional coding questions, to autocomplete in GitHub, to today’s highly agentic coding assistants. One of the most powerful tools in this space is Claude Code, built by Anthropic.

Why Claude Code Stands Out

Unlike earlier assistants, Claude Code can handle complex, multi-step coding tasks autonomously—sometimes running for several minutes or even coordinating multiple Claude instances in parallel. For developers, this means higher productivity, but also a need to learn the right practices to get the most out of it.

Best Practices to Keep in Mind

To work effectively with Claude Code:

• Provide clear context: Point it to the right files and describe features or fixes precisely.

• Leverage extensions: Use MCP servers and other integrations to extend functionality.

• Use advanced features: Tap into planning, thinking modes, parallel sessions, GitHub pull requests, and memory management.

The Course in Three Practical Examples

1. RAG Chatbot Development – Build a chatbot from front to back, refactor code, write tests, and manage pull requests.

2. Data Exploration with Jupyter – Clean up notebooks, remove redundant code, and turn insights into powerful dashboards.

3. From Figma to Frontend – Import mockups with MCP servers, iterate on designs, and build a production-ready application.

A Peek Under the Hood

Claude Code’s architecture is surprisingly simple. It doesn’t rely on embeddings or heavy indexing. Instead, it:

• Searches files and directories directly.

• Uses regex and lightweight tools.

• Writes notes in a special code.md file to track project understanding.

This approach means your codebase stays local, with added security benefits, while Claude remains flexible and agentic in its decision-making.

Final Thoughts

Whether you’re new to Claude Code or already using it, learning these structured best practices can unlock a huge boost in productivity. As the course progresses, you’ll see how simple architectural principles, combined with clear workflows, can help you engineer systems faster and smarter.

-----------------------------------------------------------------------------------------------------------------------------------

What is Claude Code?

This short article introduces developers to Claude Code, Anthropic’s advanced coding assistant, and shows how to use it effectively with best practices, real-world workflows, and hands-on projects.

📚 Blog Post Overview

• Introduction
  Welcome to the course and overview of Claude Code.

• What is Claude Code?
  Learn what makes Claude different, how it works, and why it’s powerful.

• Course Notes
  A quick reference for key concepts throughout the course.

• Setup & Codebase Understanding
  How to set up Claude Code, navigate your project, and give it the right context.

• Adding Features
  Walkthrough of extending applications with Claude, step by step.

• Testing, Error Debugging & Code Refactoring
  Learn to use Claude for cleaning up code, debugging, and writing tests.

• Adding Multiple Features Simultaneously
  Harness Claude’s ability to handle parallel tasks across a project.

• Exploring GitHub Integration & Hooks
  Using Claude with GitHub workflows, pull requests, and automation hooks.

• Refactoring a Jupyter Notebook & Creating a Dashboard
  Apply Claude to data workflows: streamline notebooks and build dashboards.

• Creating a Web App Based on a Figma Mockup
  Import a design from Figma, iterate, and turn it into a functional front-end app.

• Conclusion
  Final wrap-up and takeaways.

• Prompts & Summaries of Lessons
  Ready-made prompts and recap notes for quick reference after the course.

---

👉 By the end of this blog post, you’ll not only understand how Claude Code works, but also how to use it effectively for real-world coding, debugging, and app development workflows.

In this first lesson, we’re introduced to the agentic workflow of Claude Code—how it navigates a codebase, the tools it uses, and the way it maintains memory across sessions.

What is Claude Code?

Claude Code is not just a coding autocomplete tool—it’s an agentic system. Instead of simply answering prompts, it combines:

• A model (Claude itself, Opus or Sonnet depending on task complexity)

• A set of tools (for reading, editing, searching, executing commands, etc.)

• An environment (where it can plan, gather context, and act)

This lightweight harness allows Claude Code to perform far more complex tasks than a standard model would on its own.

Memory and Context

A core part of Claude Code’s design is its ability to remember:

• It stores ongoing context in a claude.md file.

• Developers can define configurations, coding style guides, or project notes there.

• Conversations and actions are stored locally (not on a server) and can be cleared or resumed.

This memory system makes working across sessions seamless while keeping data secure.

Tool Use: From Assistant to Agent

Models alone don’t know how to navigate files. Tools extend Claude’s abilities, enabling it to:

• Read and edit files

• Search patterns with regex

• Run bash or shell commands

• Call sub-agents for difficult tasks

• Connect to MCP servers (Model Context Protocol) to add more features, like Figma integration or data analysis workflows

Instead of indexing your entire codebase, Claude uses agentic search—dispatching agents and tools to find exactly what it needs, on demand. This keeps projects secure and avoids unnecessary overhead.

First Demo: A Quick Visualization

To demonstrate, the instructor opens Claude Code inside VS Code and asks it to “Make a cool visualization.”

• Claude immediately creates a plan (to-do list of actions).

• It edits the project files directly inside VS Code.

• The result: a live visualization with particles and animations, which can be modified or expanded instantly.

This shows just how quickly and seamlessly Claude Code can generate results, even with minimal input.

Takeaway

Claude Code isn’t just about writing code—it’s about exploring, explaining, and designing within a codebase. Its combination of lightweight tools, memory, and extensibility makes it powerful for:

• Debugging

• Refactoring

• Data analysis

• Visualizations

• Application development

👉 In the next lesson, we’ll see how Claude Code scales to larger, more complex codebases, where its ability to explain and organize really shines.

---------------------------------------------------------------------------------------------------------------------------------------

Course Notes: Installing and Using Claude Code

This note provides setup instructions for Claude Code, along with links to the example codebases and prompts used throughout the lessons. If you’re following along, make sure to complete both reading items in the course to mark 100% completion.

---

🚀 Installing Claude Code

To get started, you’ll need Node.js installed. Once ready, run the following command in your terminal:

bash
npm install -g @anthropic-ai/claude-code

Running Claude Code

• From your terminal:
  Navigate to your project folder and type:

  bash
  claude
  

• From VS Code’s integrated terminal:
  Simply type claude. The extension will auto-install.

⚡ Tip: If you run into issues, check whether the code command is available in your shell.

• On Mac: Cmd+Shift+P → search for Shell Command: Install ‘code’ command in PATH

• On Windows/Linux: Ctrl+Shift+P → same command.

For more details, see the official Claude Code IDE Integrations guide.

👉 Windows users should also check the dedicated Windows Setup instructions.

---

📂 Course Codebase Examples

Here are the repositories used across different lessons:

• RAG Chatbot (Lessons 2–6)

  • Starting codebase (Lesson 2)

  • Updated codebase after Lesson 5

  • Lessons 3–6 progressively add new features to this repo.

  • You can fork the starting repo to follow along.

• E-Commerce Data Analysis (Lesson 7)

  • Lesson 7 files — includes datasets, notebooks (starting + refactored), and the dashboard file.

  • Fork the repo and try the tasks using the starting notebook + data folder.

• Figma Mockup (Lesson 8)

  • Figma design mockup (open with Figma Desktop App).

  • Repo of the Next.js app built from the mockup during filming.

---

📝 Prompts & Summaries

At the end of the course, you’ll find an optional reading item with:

• The exact prompts used in each lesson

• A summary of Claude Code’s features

You can also access them directly in this repo.

---

💲 Claude Code Cost

To follow the lessons, you’ll need either:

• A Pro subscription (sufficient for all activities), or

• A Max subscription (for heavier workloads).

Alternatively, you can pay per API usage. At any point in a session, type:

bash
/cost

to see the running total.

---

✅ With this setup, you’ll be ready to dive into the lessons and start building with Claude Code.

--------------------------------------------------------------------------------------------------------------------

Setup & Codebase Understanding

In this lesson, we’ll work on an end-to-end Retrieval-Augmented Generation (RAG) chatbot. Along the way, you’ll see how Claude Code can help you:

• Get up to speed with a large codebase

• Explore architecture and data flow

• Visualize complex processes

• Use commands like /init, /help, and /clear effectively

---

🚀 Why Use Claude Code with Large Codebases?

When facing a new application or dataset, manually digging through files can be overwhelming. Instead, Claude Code allows you to:

• Chat with your codebase directly in VS Code or terminal

• Search agentically through relevant files instead of opening each one

• Get summaries, explanations, and diagrams for key components

💡 Think of Claude Code not just as an engineer that writes code for you, but also as a teacher that explains the codebase clearly.

---

🔍 Example: RAG Chatbot Application

We start with a chatbot app that answers questions about DeepLearning.AI courses.

• Claude can fetch course outlines and lesson details.

• Behind the scenes, it uses Retrieval-Augmented Generation (RAG) to query a vector database (ChromaDB) for relevant course metadata and context.

When asked for an overview of the codebase, Claude Code identifies:

• The architecture of the app

• Key files and their purposes

• The flow of data from front end → backend → vector store → LLM

---

🖥️ Tracing a User Query

Let’s follow a request from front end to back end:

1. Front End (JS/React code) – User submits a query.

2. Backend API – Receives the request, routes it to the RAG system.

3. RAG System – Splits documents into chunks, searches the vector database.

4. Chroma DB – Returns the most relevant results.

5. LLM Response – Claude generates an answer using system prompts + context.

6. Final Output – Answer returned to the front end for the user.

👉 Instead of guessing how the app works, Claude Code provides a step-by-step breakdown automatically.

---

📊 Visualizing the Flow

One powerful feature is the ability to generate diagrams:

• Claude Code can draw ASCII art or more advanced web visualizations (via D3.js, Recharts, etc.).

• These diagrams clearly show the end-to-end data flow:

  • User Query → Backend API → RAG → Chroma DB → LLM → Final Answer.

This is a huge time-saver for developers who prefer visual learning.

---

⚡ Useful Commands in Claude Code

As you explore the chatbot project, some commands stand out:

• /init
  Creates a CLAUDE.md file with project overview, key technologies, architecture diagrams, and best practices.

  • Shared CLAUDE.md → committed in Git (team-wide memory)

  • Local .claude.local.md → personal (gitignored)

  • Global .claude/CLAUDE.md → applies to all projects

• /help
  Shows all available commands with short descriptions.

• /clear
  Clears the entire conversation context (useful when switching tasks).

• /compact
  Clears history but keeps a summary, so you can continue without losing context.

• Escape key
  Interrupts Claude Code if it’s taking too long or going in the wrong direction.

---

🛠️ Working with Git Inside Claude Code

Claude Code also integrates with Git:

• You can stage, commit, and generate descriptive commit messages.

• Makes collaboration easier when pushing to GitHub.

• Commit history is more useful since messages are auto-generated and context-aware.

---

✅ Key Takeaways from Lesson 2

• Claude Code is not only a coding partner but also a learning partner.

• It helps you understand codebases faster with overviews, diagrams, and summaries.

• Commands like /init, /help, /clear, and /compact keep your workflow smooth.

• You can even manage Git commits directly inside Claude Code.

In the next lesson, we’ll go deeper: using Claude Code to write and modify features directly in the codebase.

------------------------------------------------------------------------------------------------------------------------------------------------

Adding Features

Now that we have an understanding of the chatbot codebase, it’s time to add new UI features and implement tools with Claude Code.

Adding Source Citations

In our application, when we ask for a course outline, we see detailed information along with referenced sources. Wouldn’t it be better if those references were clickable links, taking us directly to the source of truth?

To make this happen, we’ll:

• Update the frontend and backend to correctly render links.

• Use Claude Code to guide our changes efficiently.

Referencing Files in Claude Code

Claude Code works best when you provide the right context. Instead of letting it guess which files need changes, you can directly reference files or folders. For example:

• Use @filename to tag files.

• Use autocomplete (Tab) to quickly select files.

Using Plan Mode

When making larger changes, it’s more effective to plan first. Instead of Claude Code writing code immediately, we’ll:

1. Enter plan mode (press Shift + Tab twice).

2. Let Claude Code create a detailed to-do list.

3. Approve or adjust the plan.

4. Let Claude Code execute the edits.

This ensures efficiency and reduces mistakes.

---

Example: Building Source Citation Links

We asked Claude Code to create an interface with clickable source citations.

• It analyzed the frontend and backend files.

• Generated a step-by-step plan.

• Applied the edits automatically (with auto-accept mode on).

Once complete, we tested the implementation by asking for a course outline. The results showed clickable links beneath the outline, making the interface more useful.

---

Improving UI with Screenshots

By default, links had a hard-to-read blue color. To fix this, we took a screenshot of the interface and gave it to Claude Code with instructions.

Claude Code analyzed the screenshot and modified the CSS for better readability. This screenshot-based iteration is one of the most powerful ways to improve UI quickly.

---

Adding a “New Chat” Button

Next, we wanted the ability to start a new chat session without refreshing the page.

Steps followed:

1. Activated plan mode.

2. Asked Claude Code to add a “New Chat” button.

3. Allowed it to update both frontend and backend code.

4. Tested the new functionality – the button cleared the chat and started a new session.

This made the application smoother to use.

---

Enhancing Development with MCP Servers

To go further, we integrated an MCP (Model Context Protocol) server using Playwright.

• This allows Claude Code to open browsers, take screenshots, and test UI changes programmatically.

• Instead of us manually taking screenshots, Playwright automates the process.

Example:

• We asked Claude Code (via Playwright) to align the “New Chat” button and remove unnecessary borders.

• It opened the browser, analyzed the UI, and made the adjustments automatically.

• After verification with new screenshots, the button looked consistent with the rest of the interface.

---

Backend Improvements

Finally, we extended the backend by creating a new tool.

• The original tool only retrieved high-level course data.

• The new tool allows fetching lesson numbers, titles, and descriptions for each course.

• We updated the search_tools.py file and system prompt, then registered the tool in the RAG system.

Testing confirmed that we could now query detailed lesson data for each course.

---

Key Takeaways

• Plan Mode → safer, structured development.

• Screenshots → quick UI improvements.

• MCP Servers → automate testing & styling adjustments.

• New Tools → extend functionality for richer responses.

With Claude Code, building features becomes faster, more interactive, and collaborative.

---

👉 In the next method, we’ll explore debugging and testing with Claude Code to ensure reliability and confidence in our applications.

-----------------------------------------------------------------------------------------------------------------------------------------------

Testing, Error Debugging & Code Refactoring

So far, we’ve explored how to get up to speed with codebases and implement features that make our chatbot more powerful. In this session, we’ll take things further:

• Write tests for the RAG pipeline

• Debug a critical error

• Refactor tool usage for multi-round interactions

Let’s dive in.

---

Spotting the Problem

After returning to the chatbot project, we asked it for details on Lesson 5. Instead of a clean response, we hit an error.

The easy route would be to copy the error into Claude and hope for a quick fix. But instead, we’ll take a methodical approach:

• Write tests to locate the problem

• Debug using structured steps

• Apply fixes with confidence

---

Writing Tests First

The error could be coming from multiple files:

• ai_generator.py → handles Anthropic API interactions

• rag_system.py → orchestrates RAG workflow

• search_tools.py → defines tool logic

So, we asked Claude Code to:

1. Write tests for these files

2. Use pytest with mocks for ChromaDB

3. Run the tests to surface errors

Claude Code created a tests/ folder, added fixtures, and generated both unit and integration tests.

💡 Pro Tip: Writing tests first not only confirms bugs but also builds a safety net for future changes.

---

Debugging the Bug

Running the tests revealed the issue:

• The MAX_RESULTS parameter for vector search was set to 0.

• That meant no results were ever returned.

Fixing this value solved the problem.

• Tests passed ✅

• Queries returned results as expected

We now had both a fix and a safety net of tests.

---

Refactoring Tool Usage

Next, we noticed a limitation in ai_generator.py:

• The chatbot only allowed one tool call per query.

• This worked for simple questions but failed for complex ones (e.g., comparing courses).

The Goal

Enable multi-round tool usage:

• First tool → get course outline

• Second tool → fetch lesson details

• Combine results for a richer answer

---

Using Claude for a Safer Refactor

To handle this complexity, we:

1. Wrote a detailed refactor prompt in backend-tool-refactor.md.

2. Asked Claude to brainstorm multiple approaches using subagents.

   • Option A: Iterative tool calls (simpler, safer)

   • Option B: Full multi-round orchestration (more complex)

3. Picked Option A for a safe first step.

Claude then:

• Updated method signatures (adding max rounds)

• Modified handle_tool_execution

• Kept changes backwards compatible

• Wrote new tests for sequential tool calls

---

Verifying the Results

After running tests and verifying in the browser:

• Lesson details now displayed titles + sections

• Multi-round queries (like comparing Lesson 5 topics across courses) worked correctly

• When no matches existed, the system responded gracefully

---

Key Takeaways

• Tests before debugging → catch issues systematically

• Plan mode & extended thinking → guide Claude to safer edits

• Refactor for iteration → enable richer, multi-step answers

• Automation with tests → ensures future changes won’t silently break features

---

👉 In the next session, we’ll boost productivity even further by running multiple Claude Code sessions in parallel using Git worktrees.

----------------------------------------------------------------------------------------------------------------------------

Adding Multiple Features Simultaneously

When working on complex projects, it’s common to need multiple features developed at the same time. With Claude Code, you can run parallel coding sessions — and with Git’s worktrees, you can keep everything organized without stepping on your own toes.

Here’s how it works.

---

Why Worktrees?

Running multiple Claude Code instances directly on the same codebase can cause:

• File overwrites ⚠️

• Merge confusion

• Bugs introduced accidentally

Instead, Git’s worktrees let you:

• Spin up isolated environments per feature

• Work on them in parallel

• Merge them cleanly later

---

Step 1: Create a Custom Command

Claude Code comes with built-in slash commands, but you can also define your own.

1. Inside .claude/commands, create implement-feature.md.

2. Define the command and allow it to take arguments with $ARGUMENTS.

   • Example: implement only front-end features

   • Log all changes into frontend-changes.md

💡 Custom commands are perfect for standardizing workflows (like commits or tests) without cluttering your global context.

---

Step 2: Add Worktrees

Now let’s create three isolated branches for development:

bash
mkdir .trees
git worktree add .trees/ui_feature -b ui_feature
git worktree add .trees/testing_feature -b testing_feature
git worktree add .trees/quality_feature -b quality_feature

Each worktree is its own environment. Open a terminal in each one:

• ui_feature → UI updates (like theme toggles)

• testing_feature → expanding API tests

• quality_feature → adding code quality tools

---

Step 3: Run Claude Code in Parallel

Open Claude in each terminal and assign tasks:

• UI Feature Worktree → Add a dark/light theme toggle button

• Testing Worktree → Improve the testing framework with more FastAPI endpoint coverage

• Quality Worktree → Add linters, formatters, and dev scripts (like Black, Prettier, or Flake8)

While Claude works in one branch, you can switch to another without interruptions.

---

Step 4: Commit Changes

When changes are ready:

bash
git add .
git commit -m "Add light/dark theme toggle"

Repeat this for each worktree. Descriptive commit messages are important since you’ll be merging multiple feature branches later.

💡 Tip: You can even make a custom commit command in .claude/commands so Claude generates consistent commit messages that match your team’s style.

---

Step 5: Merge Worktrees Back

Back on the main branch, ask Claude (or do it manually) to merge everything:

bash
git merge ui_feature
git merge testing_feature
git merge quality_feature

If there are merge conflicts (e.g., multiple edits to pyproject.toml), Claude can analyze and resolve them for you.

Finally, run your tests to confirm everything works.

---

The Result

After merging:

• The chatbot now supports dark/light themes 🌙☀️

• More tests validate FastAPI endpoints ✅

• Code is consistently formatted with a Black code formatter and quality checks

All this was done in parallel, without file overwrites or messy conflicts, thanks to Git worktrees + Claude Code.

---

Key Takeaways

• Use custom commands for reusable prompts

• Worktrees let you safely run multiple Claude Code sessions in parallel

• Commit descriptively, merge systematically

• Let Claude handle conflict resolution + testing for smoother workflows

---

👉 Next up: we’ll see how Claude Code integrates directly with GitHub pull requests to review, suggest changes, and manage workflows beyond the terminal.

------------------------------------------------------------------------------------------------------------------------------------------------

Exploring GitHub Integration & Hooks

🔹 Cleaning Up Worktrees

• They resume their previous Claude session using the --resume flag.

• Ask Claude to remove the .trees folder and underlying worktrees (and branches).

• Then push the merged code to GitHub with git push origin main.

---

🔹 Installing GitHub Integration

• Use /install-GitHub-app to install the Claude GitHub App.

• This requires authentication, then installation via the browser.

• Once set up, Claude can:

  • Review pull requests

  • Fix issues directly in GitHub

  • Respond to tagged comments

---

🔹 GitHub Workflows with Claude

• Installing workflows enables Claude to run in issues and pull requests.

• Adds YAML workflow files (for PR reviews, code fixes, etc.).

• Out of the box, Claude will:

  • Check code quality

  • Identify security issues

  • Suggest improvements

• Prompts in the workflow files can be edited to adjust review style.

---

🔹 Example: Fixing an Issue via GitHub

• A teammate opens an issue asking to revert a new header design.

• Instead of assigning manually, they tag Claude.

• Claude analyzes, proposes changes, commits, and opens a pull request with the fix.

• The PR is reviewed by Claude again (self-review).

• Once approved, the fix is merged into main.

---

🔹 Hooks in Claude Code

Hooks let you inject custom code before/after specific events in Claude Code.

• Events:

  • Before/after tool execution

  • On notification

  • On prompt submission

  • On subagent response

• Example shown: PostToolUse hook

  • Matches read or grep tool usage

  • Runs say "All done!" on the computer

• Hooks are stored in .claude/settings.local.json.

• Can be used for:

  • Running tests automatically

  • Enforcing code style

  • Preventing certain tools from running

  • Triggering custom automations

---

🔹 Next Step

The next lesson will explore Claude Code with Jupyter notebooks for visualization, code refactoring, and interactive workflows.

------------------------------------------------------------------------------------------------------------------------------------------------

Refactoring a Jupyter Notebook & Creating a Dashboard

 Working with Jupyter Notebooks

• The notebook contains e-commerce data from CSV files.

• Current state:

  • Data is readable but messy

  • Some calculations (e.g., revenue YoY, average order value) are manual and hard to scale

  • Visualizations exist but are not optimal

---

🔹 Refactoring the Notebook with Claude Code

• Goals for refactoring:

  1. Separate concerns:

     • One Python file for data loading/processing

     • One Python file for business metrics calculation

  2. Improve visualizations

  3. Add configuration options (like specifying year or month)

  4. Generate supporting files (requirements.txt, README)

• Claude Code reads the notebook, extracts logic, and rewrites it in a clean, object-oriented structure.

• Outcome:

  • Cleaner code

  • Easier testing

  • Configurable metrics for different years/months

---

🔹 Handling Errors

• While running the refactored notebook, a KeyError appeared.

• Claude Code was asked to fix it by providing context from the notebook.

• After the fix, the notebook ran smoothly, producing organized metrics and visualizations.

---

🔹 Converting Notebook → Streamlit Dashboard

• Goal: Move from static notebook to interactive dashboard

• Steps:

  1. Create a prompt specifying dashboard layout and elements:

     • Header with title & filter

     • KPI cards: revenue, growth, avg. order value, total orders

     • Charts: revenue, categories, revenue by state, satisfaction

     • Bottom row with 2 cards

  2. Claude Code generates dashboard.py, updates requirements.txt, and modifies README.

  3. Run dashboard locally:

     • Install dependencies (pip install -r requirements.txt)

     • Start server: streamlit run dashboard.py

• Initial result: working dashboard, but with some empty/redundant cards and year filtering issues

---

🔹 Iterative Improvements

• Updates made via Claude Code:

  • Set default year = 2023

  • Add month filters

  • Remove empty cards

• Result: cleaner dashboard, interactive, ready to share with team

---

🔹 Key Takeaways

• Claude Code can refactor messy notebooks, separating data logic and visualization.

• Allows error fixing directly inside notebooks.

• Easily converts notebooks into interactive dashboards with Streamlit.

• Supports iterative updates and refinements.

---

Next lesson: Building a Next.js app with Claude Code connecting to MCP servers for Figma and Playwright to turn mockups into web apps.

-----------------------------------------------------------------------------------------------------------------------------------------------

Creating a Web App Based on a Figma Mockup

🔹 Overview

• Goal: Convert a Figma mockup into a real web application using Claude Code.

• Tools used:

  • Figma MCP server: to extract mockup info and underlying code

  • Playwright MCP server: to test UI, take screenshots, verify functionality

  • Next.js: modern front-end framework for building the app

  • Recharge library: for charts in the dashboard

---

🔹 Step 1: Setup

1. Create a Next.js application (latest version).

2. Connect Claude to two MCP servers:

   • Figma (for design mockups)

   • Playwright (for automated UI testing)

3. In Figma:

   • Enable dev mode MCP server

   • Copy relevant mockup layers to use with MCP server

---

🔹 Step 2: Building the Application

1. Ask Claude to analyze the Figma mockup using MCP server.

2. Generate underlying code (HTML, CSS, JS components).

3. Install necessary dependencies (via npm).

4. Use a component-based React architecture in the app folder of Next.js.

5. Add metadata, global CSS, and layout structure for the dashboard.

---

🔹 Step 3: Testing with Playwright

• Navigate to localhost:3000 and take screenshots of the app.

• Compare layout and styling against the Figma mockup.

• Identify minor layout issues (e.g., sidebar adjustments) for iterative improvements.

---

🔹 Step 4: Fetching Real Data

1. Connect the dashboard to Federal Reserve Economic Data (FRED) via API.

2. Claude Code helps research API endpoints, data structures, and requirements.

3. Obtain an API key for accessing real economic data.

4. Claude writes code to fetch CPI, unemployment, yields, etc.

5. Update dashboard to display real-time economic indicators.

---

🔹 Step 5: Iteration and Refinement

• Refine layout, charts, and visual styling with Claude’s guidance.

• Verify that fetched data is accurate and sourced correctly.

• Add interactive features (e.g., filtering, tabbed views) as needed.

---

🔹 Key Takeaways

• Claude Code + MCP servers enable rapid front-end development directly from Figma mockups.

• Playwright integration allows automated testing and verification of UI.

• Real-world data integration transforms a static mockup into a fully functional, data-driven dashboard.

• Complex tasks that might take days can be done in minutes with minimal manual coding.

---

Figma Mockup → Claude Code + Figma MCP → Next.js App → Playwright Testing → Real Data Integration → Final Dashboard

-------------------------------------------------------------------------------------------------------------------------------

Conclusion

🎉 Key Takeaways

1. Mastering Claude Code

   • You’ve learned how to explore, test, refactor, and debug codebases efficiently using Claude Code.

   • The tool works best when you provide clear instructions, context, and point it to relevant files.

2. Project Documentation

   • Keep a CLAUDE.md file with codebase rules and any information Claude should remember about your project.

3. Extending Capabilities

   • You can enhance Claude Code by connecting it to MCP servers, such as:

     • Playwright (for automated UI testing)

     • Figma (for importing and converting mockups into applications)

4. Next Steps

   • Use what you’ve learned to build powerful applications quickly, efficiently, and with real-world data.

---

This is essentially the wrap-up lesson, emphasizing best practices, documentation, and extending Claude Code with MCP servers.

------------------------------------------------------------------------------------------------------------------------------------------------

Prompts & Summaries of Lessons

Lesson Prompts & Notes

• Lesson 2: Setup & Codebase Understanding

• Lesson 3: Adding Features

• Lesson 4: Testing, Error Debugging, and Code Refactoring

• Lesson 5: Adding Multiple Features Simultaneously – Using Git Worktrees

• Lesson 6: References to GitHub Integration & Hooks

• Lesson 7: Refactoring a Jupyter Notebook & Creating a Dashboard

• Lesson 8: Creating Web App based on a Figma Mockup

Additional Resources

• Claude Code Documentation

• Claude Code Common Workflows

• Claude Code Best Practices

• Claude Code Use Cases

• Claude Code in Action – Anthropic Academy Course

---

Claude Code Features Summary

1. Managing Project Memory

• /init: Scans your codebase and creates CLAUDE.md inside the project directory.

  • Guides Claude on architecture, coding style, and commands.

  • Automatically included in context each time you launch Claude Code.

• Adding memory: Use # to quickly add notes or project-specific info.

  • Example:

    text
    #use uv to run python files or add dependencies
    

  • Example for database schema:

    text
    #The vector database has two collections:
    course_catalog: stores course titles, metadata
    course_content: stores text chunks for semantic search
    

---

2. Summary of Commands

Command	Description
/clear	Clears current conversation history
/compact	Summarizes current conversation history
ESC	Interrupt Claude to redirect/correct
ESC ESC	Rewind conversation to an earlier point
@	Mention files to include their content in your request
/mcp	Manage MCP connections & check available servers/tools
!<bash_command>	Run regular shell/bash commands
exit	Quit Claude Code

---

3. Shortcuts

Shortcut	Description
shift+tab	Switch between planning and auto-accept mode
Screenshot (Mac)	cmd + shift + ctrl + 4
Screenshot (Windows)	Win + Shift + S
Paste screenshot	Ctrl + V (may not work on Windows)

---

4. Extended Thinking Mode

• Trigger deeper reasoning for complex tasks:

  • Levels: "think" → "think hard" → "think harder" → "ultrathink"

  • Allocates more reasoning budget for Claude

---

5. Subagents

• Built-in Task subagents handle multi-step tasks, brainstorming, or investigations.

• Custom subagents can be created with their own:

  • Context windows

  • System prompts

  • Tools

(Advanced usage, details in documentation)

---

This note essentially compiles all lessons, prompts, and key Claude Code features into a single reference guide.