How to Build and Deploy an App With Claude Code

TL;DR

Install Claude Code, open a project folder in Cursor, and create a detailed specification before asking the coding agent to generate files. The workflow uses Claude Code for planning and development, Cursor for viewing and managing the project, and the Hostinger extension for deploying the completed application to a domain that other people can access.

Transcript

Today, I'll show you not only how to build, but also how to deploy a full web application using Claude code. I'll walk through every step as if you're a complete beginner. By the end of this video, you can have a fully functioning application. This deployed on your own domain that other people can actually access. Let's dive in. So to get started h... Read More

Key Insights

• Claude Code requires a premium Claude subscription in the demonstrated workflow, and it can be installed with the command provided on its website. After installation, running the Claude command in a terminal starts the tool and may prompt the user to authenticate their account.
• The terminal version of Claude Code is preferred for the demonstrated deployment workflow. Claude also provides a desktop application with a code tab, but the tutorial presents direct terminal access as easier to use when the project eventually moves into deployment.
• Cursor is a free code editor available for Windows, Mac, and Linux. It is described as a fork of Visual Studio Code, and the tutorial uses it to view generated files, add an image, organize the project, and access extensions needed for development and deployment.
• A dedicated project folder gives Claude Code a clear place to generate application files. The tutorial creates a folder named "my site code," opens it through Cursor's Open Folder command, and monitors new files through the file menu on the editor's left side.
• The Claude Code extension brings the coding agent into the editor beside the project files. Users can start a new local session, resize or reposition its panel, and choose between the cleaner native interface and the less graphical terminal experience from Cursor's settings.
• Claude Code offers automatic editing, approval-based editing, plan mode, effort controls, and model selection. The tutorial keeps automatic editing enabled, sets effort to medium, and notes that higher effort takes longer and consumes more credits, while alternative models can be more cost-effective.
• The key to obtaining a useful application is defining the desired result before generating code. The tutorial recommends identifying features, visual direction, logos, colors, pages, and content, then giving those ideas to Claude Code so it can expose missing requirements through follow-up questions.
• A Markdown specification can preserve the agreed website requirements before implementation begins. In the portfolio example, Claude Code is asked to collect details about work experience, skills, personal characteristics, hiring reasons, GitHub projects, page structure, and design before creating any code files.
• More videos from this channel:
  • How Do AI Agents Work Beyond the Language Model?
  • How to learn JavaScript fast in 75 minutes
  • How to Learn Python Web Development from Scratch
• More from this channel: Tech With Tim

Questions & Answers

Q: How do you install and start Claude Code?

Claude Code can be downloaded after obtaining a premium Claude subscription. The tutorial recommends copying the installation command from the Claude Code website, pasting it into a terminal on Mac, Linux, or Windows, and running it. Once installation finishes, enter the Claude command in the terminal. The tool may request account authentication before opening a usable coding session.

Q: What tools are needed to build and deploy the app?

The demonstrated workflow uses Claude Code, a code editor based on Visual Studio Code, and the Hostinger connector. Cursor is the recommended editor and is described as free to download for Windows, Mac, and Linux. Claude Code handles planning and code generation, Cursor displays and organizes the files, and the Hostinger extension is reserved for deploying the finished application.

Q: Why does the tutorial use Claude Code in Cursor?

Running Claude Code inside Cursor places the coding session beside the project's files, making generated content easier to inspect and manage. The file menu on the left shows the project structure, while the Claude Code panel can remain open on the right. This arrangement also supports adding images and installing the Hostinger connector needed later in the deployment process.

Q: How do you prepare a project folder in Cursor?

Open Cursor, select the Open Folder command from the File menu, and choose a location that will be easy to remember, such as the desktop. Create a new folder with any suitable project name, then open it. The tutorial uses "my site code" as an example. Generated files will subsequently appear in Cursor's file sidebar on the left.

Q: Which Cursor extensions should be installed for this workflow?

Install the Claude Code extension and the Hostinger connector from Cursor's extensions area, represented by a puzzle-piece-style icon. Search for each extension and select Install. The tutorial also accepts the prompt to trust the Hostinger connector's publisher. Claude Code provides the development interface, while the Hostinger connector supports the later site deployment stage.

Q: Which Claude Code settings are recommended for beginners?

Beginners are advised to keep Claude Code's default native interface instead of switching to the terminal-style display inside Cursor. The tutorial enables automatic editing, chooses medium effort rather than high effort, and leaves the model on the demonstrated default. It notes that increased effort requires more time and credits, while alternative models may be more cost-effective.

Q: How should you plan an app before generating code?

Start by describing the application, its purpose, intended pages, important features, preferred appearance, available logos, and desired color theme. If the idea remains incomplete, ask Claude Code to question you about missing design and content decisions. This back-and-forth process creates a clearer specification and is presented as a way to obtain a significantly better result before any files are generated.

Q: What should a portfolio website specification include?

The tutorial's example specification covers prior work experience, skills, personal characteristics, reasons the owner should be hired, and selected projects from GitHub. It also asks Claude Code to gather information about the design and page structure through follow-up questions. The resulting decisions should be saved in a Markdown file that guides implementation before the coding phase begins.

Summary & Key Takeaways

• The setup begins with a premium Claude subscription, the terminal version of Claude Code, and a VS Code-based editor such as Cursor. After installation, users authenticate Claude Code, create a memorable project folder, open it in the editor, and use the file sidebar to follow the generated project structure.

• Claude Code and the Hostinger connector are installed through Cursor's extensions area. Claude Code can run through its native editor interface or a terminal-style experience. Beginners are advised to keep the default interface, allow automatic editing, use medium effort, and choose a model based on desired cost and capability.

• Development should begin with a clear specification instead of immediate code generation. Users can describe their rough idea, desired pages, visual preferences, features, logos, colors, experience, skills, and projects. Claude Code can then ask follow-up questions and record the resulting plan in a Markdown file before building and deploying the application.