How to use Claude to build a web app

In this post, I’ll show you how to build a simple weather app using Claude. The app displays a weather forecast based on the selected city, and we’ll walk through the entire development process—from setting up the infrastructure to building the frontend.

To view the final project, check out my GitHub repo.

Here’s what our app will look like:

How does Claude work?

Before we begin using Claude, it may help to generally understand how it works.

Similar to ChatGPT and the other AI assistants, Claude operates through an interface where you can ask it questions. The process of asking is typically called prompting. Some even call it prompt engineering, where you build by interacting with an AI assistant through asking questions in a natural language, vs. writing code.

Taking this a step further, you can also use Claude to conduct “vibe coding.” A difference between what I’m presenting here and vibe coding is that I have a pre-set tech stack chosen ahead of time. If I were to do the same with vibe coding, I would focus more on the conceptual tasks instead of specifying a tech stack. Vibe coding is definitely relevant, and you can use Claude to help do that as well. It’s just not exactly what I’m doing here.

Claude can help with a variety of tasks, including general question and answer, writing, software development, data analysis, and even actual conversations:

Behind the scenes, Claude uses a Large Language Model (LLM), which is an artificial neural network that has been trained to make decisions and provide artificial intelligence:

 

An explanation of artificial neural networks is well beyond the scope of this post. Basically, it’s a data structure that attempts to mimic the way the human brain makes decisions.

LLMs are large datasets that have been built based on training data. When LLMs are “trained,” connections between different points of data are weighted. Ultimately, when you interact with Claude, it traverses the data points within the LLM to make a decision or return a response. The models that are currently used with Claude are the product of much development and training.

When you work with Claude today, you can use different LLMs, including Claude 3.7 Sonnet, Claude 3.5 Haiku, Claude 3 Opus, and Claude 3.5 Sonnet.

Getting started: How to build a web application with Claude

To start using Claude to help you build a web app (or really any application), it helps to have already started conceptualizing what you want.

You can just start a conversation with Claude and ask what it would suggest. This helps if you are not sure of the best technology to use, or the best implementation approach. As I said in the intro, I’m going to build a weather application, so I’ll start with a prompt like the following:

Right away, you notice that it suggested a JavaScript framework and to use a web app. It also listed some popular weather APIs we could use. It provided a list of features to consider, and even asked if you wanted a basic React Component that could operate as an example.

I could’ve started with a list of requirements as well, but I’ve also found it helpful to ask open-ended questions to start. Claude may have considered some things that you might not have.

From here, my usual process is to:

• Ask Claude to build the specific thing I want (i.e. an API endpoint, React Component etc.)
• Confirm details of the thing to be built (i.e. use TypeScript vs. JavaScript)
• Ask Claude to help me scaffold the project from the start (i.e. use something like Vite to build a React app)
• Work through the initial setup and integrate the thing Claude generated
• Iterate through tweaks to the project to get what I want done
• (If applicable) Get Claude to help with actually deploying the project

All along the way, if I encounter an issue, I will usually ask Claude for help with that specific task before proceeding. In the next few sections I’ll go through this process for start all the way through the finishing tweaks.

1. Initial scaffolding of the main component

Based on Claude’s suggestion when I asked about building a weather app, I am next going to write out a formal list of requirements. I’ll then pass these requirements onto Claude to actually do the scaffolding. From the initial suggestion, I narrowed down my requirements to the following:

• Frontend uses React
• Use OpenWeatherMap as the API for the forecast (free tier)
• Have a dropdown that lists a set of cities to choose the weather from (select a city in the dropdown and the page refreshes)
• Have visual indicators for the weather conditions
• Allow for temperature units to toggle
• Enable a response design that would work for both mobile and desktop
• Show a 7-day forecast where each day has a high and low temperature as well as the expected conditions

I take this information and prompt Claude:

With that prompt, Claude then builds an Artifact. According to the official docs, Artifacts “allow Claude to share substantial, standalone content with you in a dedicated window separate from the main conversation.”

You’ll see the Artifact next to the prompt screen:

Notice also in this experience that Claude is remembering the conversation. This is super helpful because you can reference things you discussed earlier. Once the Artifact is created, you’ll note that Claude also lists a feature list.

The great part about building with Claude is that it is a conversation. You can continually tweak the same part of the project or go back and forth between sections of code.

I’d like to make a tweak to the implementation’s styles. I noticed that it looks like the CSS is done with Tailwind, wheras I’d like to use just a standalone CSS file.

I’ll ask Claude to refactor what it has generated to not use Tailwind:

Within what it refactored, it looks like it decided to remove the dependencies for the weather icons as well, and it generated SVGs for the weather conditions:

It even listed the benefits of this approach:

2. Setting up frameworks

With the component scaffolded out, I’d like to go ahead and start building the application. When I use Claude to help build projects, I typically build out a scaffolded body and then add in what Claude refactors or generates for me.

This is different depending on the stack (i.e. .NET web API vs. React Frontend etc.). Sometimes this can be a bit tedious, but one trick I’ve learned is to use commits . With commits, you can see what changed between iterations and potentially undo a change if you need to.

To start, I go ahead and ask Claude to help me do the initial scaffolding:

Initially, Claude creates the main parts of the React project like the App.js file, the package.json and others. Then Claude shows me how to leverage CLIs to set up the project:

Looking at Claude’s implementation steps, I noticed that it is using Create React App. This project is no longer maintained, so I’m going to ask Claude to refactor that setup to use something other than Create React App:

Claude agrees and redoes the setup using Vite. In addition to redoing the setup process, Claude also highlights the advantages of using Vite:

At the end of the response, Claude puts the setup commands in a set that could be converted into a shell script or run individually:

3. Building the application

With this response, I can now start building the application. I also am a fan of prettier for JavaScript or TypeScript projects. I know how to do this, but for fun, I went ahead and asked Claude if it could help me with the setup:

Claude provided a set of instructions and files to be changed to properly set up Prettier. Claude also recommended (and showed how to) integrate with ESLint, and even use Husky for pre-commit hooks. I setup ESLint, but didn’t go with Husky since this is such a simple project.

With all of this setup, I created an API key with OpenWeatherMap and then attempted to run it locally. I ran into the following error:

Based on this error, I copied the message into Claude to see if it could help me:

Reading through Claude’s changes, I realized that the issue is just that my WeatherComponent was not saved as with a .jsx extension. I asked Claude about this, and it confirmed:

With that, I tried again to run the application with my API key from OpenWeatherMap and encountered an error message:

It looks like there is an issue with the use of the onecall endpoint. I took the error message and asked Claude to help figure this out:

In this case, Claude went out to the internet and did a web search on OpenWeatherMap’s API documents. Claude confirmed we were using the wrong endpoint and refactored the API call to use the forecast endpoint:

I also noted that in the refactored fix, Claude used a .jsx extension on the file, as it remembered that we had the .js error from before.

With the refactored component that Claude created, I was able to get it working:

One last tweak I want to make is that I noticed the city dropdown does not show what you selected when you select a city. So I’m going to ask Claude to refactor the component to show that:

With those changes in place, the city name is shown correctly:

With that, I have built my application. The next steps would normally be to work through a deployment process and build out a CI/CD pipeline. For the purpose of this post, I’m going to stop here, and instead talk about my general experiences with Claude and a few other things that you could look into.

Lessons learned: Best practices for using Claude

I’ve used Claude to build projects and help debug very specific issues. In most cases, I’ve found to be very helpful. It doesn’t necessarily replace my work, but rather augments what I do and enables me to focus on real problems.

Claude (and AI Assistants in general) are really helpful with mundane tasks that would otherwise eat up time. AI assistants are also great in helping to answer quick questions or to help suggest solutions to new problems.

Commit changes for your project

It’s easy to get lost in all the changes. Claude does retain a conversation history, but it can also frequently make large sweeping changes.

In your prompts, it helps to be very specific. You can even ask for it to only focus on one set of changes. I’ve also found it very helpful to commit changes I make from Claude to a branch, so I can actively observe what is happening and undo something if it breaks.

If you look at the commits on the Master branch of the example project you’ll see:

Provide as much context as possible

If you are trying to get Claude to help you with a larger, more complex project, it may suggest things that do not integrate correctly. This happened to me when I was working through an Azure Function written in the isolated model.

With the Azure Function, it was attempting to use the in–process model, which requires different bindings. This is all very specific, but that’s my point. It is important to provide Claude as much context as possible when doing development.

Use Claude for architectural questions

I’ve also found that Claude can be very helpful with architectural questions and even includes diagrams. In the following, I was asking about microfrontend caching:

Use your chat history to your advantage

Claude’s chat history is also of great value. You can go back in your chats and retrieve a conversation you had months ago if you forgot what was done. A shared context makes working through problems easier, and at times even more fun.

Understand the limits of AI

It’s better to use Claude to help with development vs. having it do all the development for you. You can certainly get Claude to build all the parts of an application. But as a developer, you also need to understand individual parts. Working directly on the code always helps.

Overall, Claude is a great tool for software engineers. There are often times when you need to build a simple data structure or piece of functionality that Claude can help you quickly scaffold. As I said earlier, it is important to provide context and make your prompts as specific as possible.

When working with Claude, I find myself learning new things and iterating faster on problems.

Wrapping up

I’ve personally had great experiences using Claude. The Artifacts feature is particularly helpful, as you can easily see the code as you develop your application alongside Claude. In this post, I only touched on the basics and built a very simple application. You can use Claude to build a more robust architected system. The important part is to always provide as much context as you can in the prompts.

And it doesn’t stop with Claude, either. Anthropic has just released Claude Code, an Agentic command-line-based tool that developers can use to delegate tasks like refactoring or making simple changes.

Claude really helps with routine tasks and gives developers more time to focus on bigger problems their teams face. I encourage you to look at my sample project, and try out Claude for yourself.

Thanks for reading my post!