How to Build a Simple Web App Using Claude Code in 4 Hours

Building a web app can feel overwhelming, especially if you're a solo founder or an indie hacker with limited time and resources. You might be asking yourself, "Can I really build something functional in just four hours?" The answer is yes, especially with tools like Claude Code that leverage AI to streamline the process. In this guide, I’ll walk you through how to build a simple web app using Claude Code, which can help you generate code snippets and automate some of the more tedious aspects of development.

Prerequisites: What You Need Before You Start

Before diving in, ensure you have the following:

1. Basic Programming Knowledge: Familiarity with HTML, CSS, and JavaScript.
2. Account on Claude Code: Claude Code offers a free tier, which is sufficient for this project.
3. Text Editor: Use Visual Studio Code or any text editor of your choice.
4. Web Hosting Service: You can use services like Vercel (Free tier available) for deployment.

Step 1: Define Your Web App Idea

Spend about 30 minutes brainstorming your web app's purpose. For this example, let’s create a simple to-do list application. The core features will include:

• Adding tasks
• Marking tasks as complete
• Deleting tasks

Step 2: Set Up Your Project Structure

Create a new directory for your project and set up the following files:

• index.html
• styles.css
• app.js

This should take around 15 minutes. Your directory will look like this:

/your-todo-app
  ├── index.html
  ├── styles.css
  └── app.js

Step 3: Generate Basic HTML with Claude Code

Now, let’s use Claude Code to generate the basic HTML structure for your app. Here’s what to do:

1. In Claude Code, prompt it with: "Generate HTML for a simple to-do list app."
2. Copy the generated code into your index.html file.

Expected output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>To-Do List</title>
</head>
<body>
    <h1>My To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task...">
    <button id="addTaskButton">Add Task</button>
    <ul id="taskList"></ul>
    <script src="app.js"></script>
</body>
</html>

Step 4: Style Your App

Next, use Claude Code to generate some CSS. Prompt it with: "Generate CSS for a simple to-do list app." Add the generated styles to styles.css.

Expected output:

body {
    font-family: Arial, sans-serif;
}
h1 {
    text-align: center;
}
#taskInput {
    width: 70%;
}
#addTaskButton {
    width: 20%;
}
#taskList {
    list-style-type: none;
}

Step 5: Implement JavaScript Functionality

Now, let’s add interactivity using JavaScript. Again, use Claude Code with the prompt: "Generate JavaScript for a to-do list app." Copy the generated code into app.js.

Expected output:

document.getElementById('addTaskButton').addEventListener('click', function() {
    const taskInput = document.getElementById('taskInput');
    const taskText = taskInput.value;
    if (taskText) {
        const li = document.createElement('li');
        li.textContent = taskText;
        li.addEventListener('click', function() {
            li.classList.toggle('completed');
        });
        document.getElementById('taskList').appendChild(li);
        taskInput.value = '';
    }
});

Step 6: Test Your Application

Open index.html in your browser. You should see your to-do list app. Test adding tasks, marking them as complete, and checking the functionality. This should take around 30 minutes.

Troubleshooting Common Issues

• App Not Loading: Check if your paths to styles.css and app.js are correct.
• Tasks Not Being Added: Ensure that the JavaScript is correctly linked and that there are no errors in the console.

What's Next?

Now that you have a basic web app, consider adding more features like editing tasks or saving them in local storage. You might also want to explore deploying your app on platforms like Vercel or Netlify, which can be done in less than an hour.

Conclusion: Start Here

If you're looking to build a simple web app quickly, using Claude Code is a practical choice. It accelerates the coding process and helps you focus on the functionality rather than getting bogged down in syntax. Start with your first project today!

What We Actually Use

In our experience, we primarily rely on Claude Code for generating boilerplate code, alongside Vercel for easy deployment. When we need to build something quickly, these tools are always in our toolkit.