Getting Started With Claude Code: Build a React Workout Logger

Modern software development has changed dramatically. Developers once had to write nearly every line of code by hand, which made building software slower and more expensive. Today, agentic coding tools can read a codebase, edit files, run commands, install dependencies, and help plan features.

Three prominent options are Claude Code by Anthropic, Codex by OpenAI, and the Cursor IDE. In this tutorial, we’ll use Claude Code to build a simple workout logger with React and TypeScript.

Along the way, you’ll learn how to:

• Install and open Claude Code
• Connect it to an IDE
• Switch between planning and implementation
• Use voice input to write prompts
• Create a Vite and React project
• Ask Claude Code to build a feature
• Review AI-generated changes responsibly

Agentic tools can make development dramatically faster, but they do not eliminate the need to understand programming fundamentals. Treat the agent as a capable collaborator—not an infallible replacement for your judgment.

What Is Claude Code?

Claude Code is an agentic coding tool that can understand a codebase, edit files, execute terminal commands, and work with development tools. You can use it from a terminal, an IDE extension, a desktop application, or a browser.

Traditional autocomplete tools suggest small pieces of code. An agent can take on a broader task: inspect the project, develop a plan, install packages, modify several files, and run the application to verify its work.

AI-assisted development has also become mainstream very quickly. Most professional developers have now experimented with or incorporated AI tools into their workflows. The important question is no longer whether developers will use AI, but how they can use it effectively and responsibly.

From Line Cook to Head Chef

A useful way to understand this shift is to compare a developer to someone working in a professional kitchen.

A line cook focuses on execution. They chop ingredients, watch timing, prepare a specific part of each dish, and repeat well-defined tasks. Traditional software development often worked similarly: one developer specialized in the front end, another worked on the back end, and someone else managed infrastructure.

Now imagine giving that line cook a set of capable kitchen robots. The robots can perform much of the mechanical work, so the cook’s role moves toward that of a head chef. They decide what to create, combine ideas, design the menu, set quality standards, and clearly communicate what should happen.

Coding agents create a similar shift. They are particularly useful for repetitive work such as:

• Generating boilerplate
• Wiring up CRUD operations
• Creating and validating forms
• Installing and configuring packages
• Refactoring repeated patterns
• Writing initial tests and documentation

The developer still owns the vision, architecture, constraints, and quality of the final product.

An experienced chef remains valuable even when they are not personally preparing every dish. Their value comes from taste, judgment, standards, and years of practical knowledge. Likewise, a developer should be able to read the generated code, understand its behavior, spot questionable decisions, and form strong technical opinions about it.

Prerequisites

To follow this tutorial, you should have:

• Node.js and npm installed
• Visual Studio Code, Cursor, or another preferred editor
• Claude Code installed and authenticated
• Basic familiarity with React and TypeScript

Claude Code offers different plans and usage limits. Check Anthropic’s current pricing before choosing one because prices and included usage can change.

Create a Vite and React Project

We’ll use Vite because it gives us a quick way to create a lightweight web project. The goal is not to explore every part of Vite; it is simply a convenient foundation for learning how to work with a coding agent.

Open a terminal and confirm your current location:

pwd
ls

Create a directory for the example and move into it:

mkdir sample-web
cd sample-web

Then start Vite’s project generator:

npm create vite@latest

When prompted, use the following options:

• Project name: workout-log
• Framework: React
• Variant: TypeScript
• Package manager: npm

Move into the generated project, install its dependencies if necessary, and start the development server:

cd workout-log
npm install
npm run dev

Open the local URL shown in the terminal. You should see Vite’s default starter page.

Stop the server with Ctrl+C when you are ready to continue. If the Visual Studio Code command-line launcher is installed, you can open the project with:

code .

You can also open the folder manually from your editor.

Helpful Visual Studio Code Extensions

The following extensions can make the development experience more comfortable:

• Claude Code for Visual Studio Code
• Prettier
• Material Icon Theme or a similar file icon extension
• ES7+ React/Redux/React Native snippets

The Claude Code extension provides a convenient interface inside the editor. You can still use Claude Code directly from the integrated terminal if you prefer.

Start Claude Code

Open the integrated terminal and run:

claude

Claude Code may ask whether you trust the project. Only approve a project when you know and trust its contents.

If Claude Code does not recognize your editor integration, use its /ide command and select the appropriate IDE.

Claude Code supports regular natural-language prompts as well as built-in slash commands. Commands and keyboard shortcuts can change over time, so use the built-in help if a command shown here is no longer available in your installed version.

Useful commands include:

• /model to choose a model
• /usage to inspect current usage
• /ide to configure the editor integration
• /exit to end the session

After exiting, you can start Claude Code again with claude. Follow the resume instructions printed by the tool if you want to continue an earlier session.

Choosing a Model

At the time this lesson was recorded, Claude’s primary model tiers were Opus, Sonnet, and Haiku. Model names and availability may change, but the general strategy remains useful:

• Use the most capable reasoning model for ambiguous planning and architecture.
• Use a faster, less expensive model for a well-defined implementation.

This can conserve your usage allowance while reserving deeper reasoning for the decisions that benefit from it most.

Optional: Use Voice Input

Claude Code may support a built-in voice mode, depending on the version and environment you are using. You can also dictate prompts with a third-party transcription tool.

Voice input is optional, but it can be useful when a detailed spoken explanation is easier than typing a long prompt. Always review the transcription before submitting it—technical product names, package names, and commands are common sources of transcription errors.

Plan the Workout Logger

Our sample application will let users:

• View several seeded workout entries
• Record an exercise name
• Enter sets, reps, and weight
• Delete an existing entry
• Retain entries in local storage

We’ll ask Claude Code to use Tailwind CSS and shadcn/ui for styling.

Start with a clear prompt:

Scaffold a workout logger inside the existing Vite and React project.

Users should be able to log an exercise with a name, sets, reps, and
weight. Seed the app with a few sample entries. Persist the entries in
local storage. Use Tailwind CSS and shadcn/ui for the interface.

Before editing any files, inspect the project and create a detailed
implementation plan. Include the proposed data model, components, files
to modify, dependencies, validation rules, and verification steps.

Enter plan mode before submitting the prompt. In the recorded workflow, plan mode was selected with Shift+Tab; confirm the current shortcut in your installation.

Plan mode is valuable when the outcome is clear but some implementation details are still undecided. Instead of immediately changing files, Claude Code can inspect the project and propose:

• A workout-entry data model
• Seed data
• State and local-storage behavior
• A workout table
• An add-workout dialog
• Updates to the main application component
• Required Tailwind and shadcn/ui configuration

Read the plan before accepting it. Check that it matches your intended scope and does not introduce unnecessary libraries or complexity.

Use Specification-Driven Development

A reliable AI-assisted workflow is to treat the approved plan as a specification:

1. Describe the feature and its constraints.
2. Ask the agent to inspect the existing project.
3. Review and revise the proposed plan.
4. Save the accepted plan in a Markdown file.
5. Implement one coherent part at a time.
6. Review the code changes.
7. Run tests, linting, type checks, and the application.
8. Compare the result with the specification.

This is a form of specification-driven development. A Markdown specification gives you a concise description of the intended behavior without requiring you to understand every generated line simultaneously. It also gives the agent a stable reference for future work.

The specification does not replace code review. It supplies context that makes the code easier to evaluate.

Let Claude Code Implement the Plan

Once the plan is satisfactory, ask Claude Code to implement it. The agent may:

• Install Tailwind CSS and shadcn/ui dependencies
• Add reusable UI components
• Define the workout-entry type
• Create seed workout data
• Add React state and event handlers
• Read from and write to local storage
• Build a table and entry dialog
• Start the development server

Claude Code should show proposed edits and ask for permission before applying protected changes or running certain commands. Review edits individually whenever practical. Allowing all edits can be convenient for a disposable tutorial, but it is a poor default for production code.

Ask yourself:

• Does this change belong in the expected file?
• Is the dependency necessary and trustworthy?
• Does the data model match the specification?
• Are inputs validated?
• Could local-storage parsing fail?
• Are state updates predictable?
• Is the code accessible and easy to maintain?

Smaller implementation steps make these questions much easier to answer.

Run and Inspect the Result

If the development server is not already running, start it:

npm run dev

Open the local URL and confirm that the application displays:

• A table of workout entries
• Columns for the date, exercise, sets, reps, and weight
• A button for logging a new exercise
• A form or dialog for entering workout data
• A delete action for each entry

Add an exercise, refresh the browser, and verify that the entry remains. Then delete an entry and confirm that the interface and local storage both update.

Also run the project’s available quality checks. Depending on its configuration, that may include:

npm run lint
npm run build

A successful visual result is not sufficient. The project should also compile cleanly and avoid obvious linting, typing, and runtime errors.

Why the Same Prompt Can Produce Different Code

Coding agents are nondeterministic. Two developers can provide the same prompt and receive different implementations. Even the same developer may receive a different answer when repeating a prompt later.

That is why a course or team should not depend exclusively on copying prompts. A stronger approach is to provide:

• The exact feature specification
• The expected behavior and acceptance criteria
• Important architecture constraints
• Required dependencies and versions
• Reference code or a known-good final project

The goal is not to reproduce identical tokens. The goal is to produce software that satisfies the same requirements.

Vibe Coding vs. a Production Workflow

Asking an agent to create an entire sample application from one broad prompt is often called vibe coding. It is impressive for prototypes, experiments, and disposable examples because it demonstrates how quickly an idea can become interactive software.

For a production application, use a more controlled process. Implement one feature or vertical slice at a time, review each change, and verify the behavior before continuing. Large unreviewed generations make it difficult to understand the system and easier for subtle defects to accumulate.

A sensible production loop looks like this:

Specify → Plan → Review → Implement → Test → Inspect → Commit

Repeat that loop for each feature. The agent provides speed; the developer provides direction and accountability.

Final Takeaway

In this tutorial, a basic workout logger can be produced in minutes from a relatively small prompt. That demonstrates the productivity boost offered by agentic coding tools—but speed is only part of good software development.

The most effective AI-assisted developer thinks like a head chef. They define the product, communicate precise requirements, evaluate the plan, inspect the output, and maintain a high quality bar. Learn the fundamentals, use AI for leverage, and remain responsible for every change that enters your codebase.