Behind the Craft by Peter Yang

Behind the Craft by Peter Yang

AI Track

Claude Code Beginner's Tutorial: Build a Movie App in 15 Minutes

A step-by-step guide for beginners to ship a new feature with Claude Code from scratch

Peter Yang's avatar
Peter Yang
Sep 03, 2025
∙ Paid
26
2
Share

Dear subscribers,

Today, I want to share a complete beginner’s tutorial on using Claude Code.

I think Claude Code is the best AI agent available in the market today.

The best way to see what it’s capable of is to try it yourself. In the tutorial below, I’ll show you how to set up Claude Code and add a watchlist feature to a movie discovery app in just 15 minutes. You’ll learn how to use plan mode, Claude.md, and more.

Timestamps:

  • (00:00) Installing Claude Code in terminal and Cursor

  • (03:29) Cloning the movie app and getting Claude to explain the code base

  • (07:37) Using plan mode to write a detailed spec before coding

  • (10:44) Initializing claude.md for persistent project memory

  • (13:43) Building a watchlist in one shot with proper planning

Watch now on YouTube or read the written guide below.


This post is brought to you by…Jam

Fixing bugs in a timely manner is the difference between a polished product and a broken one. Jam makes reporting and fixing bugs effortless:

  1. Share a simple link for customers to record bugs in seconds with zero setup.

  2. AI generates detailed tickets with repro steps, logs, and technical details.

  3. Integrate with Jira, Linear, GitHub, and more so bugs flow into your workflow.

Try Jam for free to cut troubleshooting calls by 80% and speed up resolutions.

Try Jam for Free


What we’ll build: A watchlist feature for a movie app

Let's add a watchlist feature to a movie app and show how to use Claude Code to:

  1. Understand existing codebases

  2. Create detailed plans

  3. Execute step-by-step while you grab coffee


1. Install Claude Code in terminal and Cursor

If you work in tech, you've probably met engineers who can move at lightning speed using terminal commands and keyboard shortcuts.

Claude Code is like that person except it’s available 24/7 and never gets tired. To install it, paste this in your terminal:

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

Then type “claude” in the same terminal to open it:

Here's something most people don't realize — you can also use Claude Code inside an IDE like Cursor:

  1. In Cursor, open terminal and type “claude”

  2. Drag the Claude Code terminal to the right panel

It’s that simple! I like using Claude Code in Cursor because it lets me view and edit files while Claude works. Apologies to the Cursor team if you’re reading this. 😅


2. Clone the movie discovery app

First, open terminal and navigate to a folder where you want to create the movie app. Then paste this command:

git clone https://github.com/sudeepmahato16/movie-app.git

Now open the movie-app folder in Cursor and load Claude Code in Cursor’s terminal:


3. Understand the movie app’s code base

Tip: Asking Claude to explain codebases is one of the best ways to learn how to read code and become more technical.

Let's ask Claude to tell us about the codebase we're working with:

Tell me how this app works.

Claude will start exploring the files and give you a detailed overview. Feel free to ask follow up questions like "Explain the tech stack to me in layman's terms."


4. Run the movie app locally with a TMDB API key

Let’s get our movie discovery app running locally first. Ask Claude:

Install dependencies and run the app locally.

Choose "yes, and don't ask again" when it asks for permission to execute commands. Claude will give you a localhost link to open the app. But it'll look broken — no movies will load:

We need to set up a TMDB API key to load actual movies:

  1. Go to TMDB and click “Join TMDB” to create a free account

  2. Go to https://www.themoviedb.org/settings/api and click API on the left

  3. Copy the API key at the bottom of the page

Now ask Claude:

Add this TMDB API key so the movies load: (PASTE YOUR API KEY)

Say "Yes" to create an env file. Go to localhost and you should see movies! 🍿


5. Use plan mode to write a spec for the watchlist

We’re finally ready to add our watchlist feature! Let’s get Claude to write the spec first.

Tip: In Claude Code, hit shift-tab to enter plan mode. This tells Claude to research and plan without changing your codebase.

Now let’s get Claude to write a detailed spec for our watchlist with this prompt (note that I’m asking it for 3 specific components instead of just the product requirements). All three are needed for AI to follow your instructions properly:

This post is for paid subscribers

Already a paid subscriber? Sign in
© 2025 Peter Yang
Privacy ∙ Terms ∙ Collection notice
Start writingGet the app
Substack is the home for great culture