Construct a Film App in 15 Minutes

Expensive subscribers,

At present, I need to share an entire newbie’s tutorial on utilizing Claude Code.

I feel Claude Code is the very best AI agent accessible out there as we speak.

One of the best ways to see what it’s able to is to attempt it your self. Within the tutorial beneath, I’ll present you learn how to arrange Claude Code and add a watchlist function to a film discovery app in simply quarter-hour. You’ll learn to use plan mode, Claude.md, and extra.

Timestamps:

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

• (03:29) Cloning the film app and getting Claude to elucidate the code base

• (07:37) Utilizing plan mode to write down an in depth spec earlier than coding

• (10:44) Initializing claude.md for persistent undertaking reminiscence

• (13:43) Constructing a watchlist in a single shot with correct planning

Watch now on YouTube or learn the written information beneath.

This put up is dropped at you by…Jam

Fixing bugs in a well timed method is the distinction between a cultured product and a damaged one. Jam makes reporting and fixing bugs easy:

1. Share a easy hyperlink for purchasers to document bugs in seconds with zero setup.

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

3. Combine with Jira, Linear, GitHub, and extra so bugs move into your workflow.

Strive Jam totally free to chop troubleshooting calls by 80% and pace up resolutions.

Strive Jam for Free

Let’s add a watchlist function to a film app and present learn how to use Claude Code to:

1. Perceive present codebases

2. Create detailed plans

3. Execute step-by-step whilst you seize espresso

If you happen to work in tech, you’ve got most likely met engineers who can transfer at lightning pace utilizing terminal instructions and keyboard shortcuts.

Claude Code is like that particular person besides it’s accessible 24/7 and by no means will get drained. To put in it, paste this in your terminal:

npm set up -g @anthropic-ai/claude-code

Then sort “claude” in the identical terminal to open it:

Here is one thing most individuals do not understand — you too can use Claude Code inside an IDE like Cursor:

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

2. Drag the Claude Code terminal to the appropriate panel

It’s that straightforward! I like utilizing Claude Code in Cursor as a result of it lets me view and edit information whereas Claude works. Apologies to the Cursor staff for those who’re studying this. 😅

First, open terminal and navigate to a folder the place you need to create the film app. Then paste this command:

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

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

Tip: Asking Claude to elucidate codebases is likely one of the greatest methods to learn to learn code and grow to be extra technical.

Let’s ask Claude to inform us in regards to the codebase we’re working with:

Inform me how this app works.

Claude will begin exploring the information and offer you an in depth overview. Be happy to ask comply with up questions like “Clarify the tech stack to me in layman’s phrases.”

Let’s get our film discovery app operating domestically first. Ask Claude:

Set up dependencies and run the app domestically.

Select “sure, and do not ask once more” when it asks for permission to execute instructions. Claude gives you a localhost hyperlink to open the app. However it’ll look damaged — no films will load:

We have to arrange a TMDB API key to load precise films:

1. Go to TMDB and click on “Be part of TMDB” to create a free account

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

3. Copy the API key on the backside of the web page

Now ask Claude:

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

Say “Sure” to create an env file. Go to localhost and it is best to see films! 🍿

We’re lastly prepared so as to add our watchlist function! Let’s get Claude to write down the spec first.

Tip: In Claude Code, hit shift-tab to enter plan mode. This tells Claude to analysis and plan with out altering your codebase.

Now let’s get Claude to write down an in depth spec for our watchlist with this immediate (observe that I’m asking it for 3 particular parts as a substitute of simply the product necessities). All three are wanted for AI to comply with your directions correctly: