Claude Code in Action: Build a Full-Stack Web App in Ten Minutes

From Static Page to Full-Stack: A Complete Hands-On Upgrade

As AI-powered coding tools mature rapidly, Claude Code is becoming a go-to solution for developers building web applications from scratch. Based on a hands-on tutorial by Bilibili creator Xiaoyin, this article walks through the complete process of using Claude Code to upgrade a static "AI Tools Navigation Page" into a full-stack web application with login and settings functionality.

The core goal is to build an MVP (Minimum Viable Product)—the smallest executable version of a project. It doesn't aim to launch a real account system, connect phone numbers, payments, third-party logins, or a production database. Instead, it focuses on getting the login and settings API flows working end-to-end, helping beginners understand the fundamental architecture of modern web applications.

Why Go Full-Stack?

Static web pages are fine for displaying content, but when all data, account state, and user settings pile up on the frontend, maintenance becomes increasingly difficult as features grow. The essence of a frontend-backend separation is clearer responsibilities:

• Frontend: Handles UI display and interaction, preserving the navigation page styles
• Backend: Centrally manages tool data, demo login, and settings persistence
• Communication: The frontend fetches data via API without directly touching backend data files

This is the standard architecture used by the vast majority of modern web applications today. The project is split into two independent directories—frontend and backend—each with its own role.

API (Application Programming Interface) is the core mechanism for frontend-backend communication. Instead of directly reading backend data files, the frontend sends HTTP requests (e.g., GET to fetch data, POST to submit data), and the backend returns JSON-formatted responses. This approach allows both sides to change their internal implementations independently, as long as they agree on the interface format. In this project, the backend uses Express (a lightweight Node.js web framework) to create API endpoints, while the frontend uses Vite as the development server and build tool. Dev Proxy is a Vite configuration option that forwards /api/* requests from the frontend to the backend service during development, bypassing the browser's same-origin policy (i.e., CORS). Browsers block requests to different ports or domains by default for security reasons—the proxy makes the two services appear as "the same origin" from the developer's perspective.

Using Claude Code to Generate the Login Feature

In the hands-on phase, the first focus is the login feature. The key prompt is straightforward: implement demo-account login only, save the temporary token returned by the API on success, and clear it on logout. The existing categories, trending list, detail pages, and external site links must remain unchanged, and a demo account with preset credentials is required.

The workflow is equally direct: press Win to open PowerShell, navigate to the project directory, type claude to launch, then run /resume to restore the most recent conversation and paste in the prompt. Claude Code starts by presenting a modification plan—including the approach, login flow, list of files to be changed, and an explicit list of things that won't be touched. This "plan first, execute second" pattern is one of Claude Code's standout qualities, giving developers a chance to review before committing to changes and greatly reducing the risk of unintended edits.

After execution, a "Login" button appears in the top-right corner of the page. Clicking it at this point, however, shows that the service isn't running—because the backend hasn't been built yet. This perfectly illustrates the nature of frontend-backend separation: the frontend UI is ready, but real authentication waits for the backend to come online.

Building the Settings Page for Data Persistence

The settings page doesn't need to be complex—just two options that produce visually obvious results:

• Which category opens by default
• Whether tool cards display in compact or expanded mode

The verification standard is simple: save the settings, refresh the page, and confirm they still apply. That's proof the settings page has achieved true persistence.

After passing the settings page prompt to Claude Code, it generates a complete set of changes: two new backend files, establishing the initial skeleton of a frontend-backend separated architecture, covering login page, settings page, save settings, refresh persistence, URL-based modal closing, and logout functionality.

One important practical lesson here: add all features first, then ask Claude to perform the frontend-backend split at the end. This produces a clean, complete separated architecture rather than a messy structure that results from splitting while still building.

Data Persistence refers to the ability of data to be saved and restored after a program closes or a page refreshes. This contrasts with "in-memory state"—data stored in JavaScript variables that disappears the moment the page reloads. In this MVP, persistence is achieved by having the backend write settings to a local file (such as a JSON file) rather than a real database. By comparison, a Token is the core carrier of login authentication: after a successful login, the backend generates a random string (token) and returns it to the frontend, which stores it in localStorage (browser local storage). Every subsequent request includes this token, and the backend validates it before responding with data. On logout, the frontend deletes the token and the server invalidates it, ending the session. This flow is the simplest model of authentication in modern web applications.

Frontend-Backend Split and npm Dependency Management

Once all features are complete, a dedicated prompt instructs Claude Code to perform the frontend-backend split: the frontend reads data by calling APIs, the backend is responsible for writing data, and a unified dev proxy forwards API requests so the frontend doesn't have to deal with CORS.

This is a good moment to clarify a concept that often confuses beginners—the two uses of npm:

• The npm used earlier to install Claude puts a command onto your computer (global install)
• Running npm install inside a project reads the local package file and downloads dependencies like vite and express into the project
• npm run executes scripts defined in the package file

The actual servers are powered by vite and express—npm just handles downloading packages and running scripts. This distinction is critical for understanding the Node.js ecosystem and is a blind spot for many beginners.

Understanding Node.js package management helps clear up a lot of beginner confusion. package.json is the project's "configuration manifest," recording the project name, script commands, and the names and version numbers of all dependencies. When you run npm install, npm reads this manifest, downloads the corresponding packages from the internet, and stores them in the project's local node_modules folder. This means node_modules typically doesn't need to be committed to a code repository—anyone who gets your project just needs to run npm install once to restore the full environment. npm run dev executes the dev command defined in the scripts field of package.json, which usually maps to something like vite (frontend) or node server.js (backend). The fundamental difference between a global install (npm install -g) and a project-level install (npm install) is that the former writes the command to your system PATH so it's available anywhere, while the latter only applies to the current project.

Starting Both Servers and Verifying Functionality

With the project complete, it's time to verify—and there's an important startup order to follow: the backend must start before the frontend. The reason is simple: the frontend depends on data provided by the backend, so the backend needs to be ready first.

Starting the Backend

Open a new PowerShell window, navigate to the backend directory (cd directory/backend), run npm install to download dependencies, then run npm run dev to start the backend service. This window must stay open, since it's hosting the running service.

Starting the Frontend

Open another terminal window, navigate to the frontend directory, and similarly run npm install followed by npm run dev. Once it starts, a frontend URL will be returned.

Copy the frontend URL into a browser to see the complete web application. During testing, entering the demo email and password logs in successfully—the avatar in the top-right corner shows "demo." Clicking the avatar provides access to settings and logout. In settings, changing the default category to "Image Generation" and the card display to "Compact," then saving and refreshing the page, confirms that the settings persist. This marks the complete end-to-end connection of the frontend-backend data pipeline. After logging out, the avatar disappears and all functionality checks out.

Key Takeaways from Building a Full-Stack App with Claude Code

Through this tutorial, a navigation page that could only display static content was transformed into a complete web application with a frontend UI, local API, account entry point, and settings functionality—featuring a standard frontend-backend separated architecture, launchable from two terminal windows, with all flows verified.

For beginners, the value of this process lies not just in the final product, but in the systematic demonstration of several key concepts:

1. The right way to use AI coding tools — have Claude plan before executing, and perform the architectural split only after all features are complete
2. The core logic of frontend-backend separation — clear responsibilities, API-based communication, dev proxy for CORS
3. Understanding the toolchain — the distinct roles of npm, vite, and express
4. Server startup dependencies — backend first, frontend second, terminal windows must stay open

In the wave of AI-assisted programming, tools like Claude Code are dramatically lowering the barrier to web development. Even users with zero prior experience can build a deployable MVP in a short time, given reasonable prompts and a grasp of basic concepts. This is the new capability that the age of AI programming offers everyone.