How to use Claude Code to build a web app
Building an entire web app in a single prompt
It’s been a little since I’ve written on Claude Code. In our last post, we walked through how to use Claude Code to add a feature to an existing application… but what about building something new from scratch?
Today I’ll build a fully-featured web application using only Claude Code. I won’t write a single line myself.
If you’ve been following the newsletter for a while, you already know that I love using Cursor. So why switch to Claude Code? Well I haven’t yet, but projects like these are how I explore new tools to be sure I have the most leverage in my job as a software engineer. So far, I’m finding that Claude Code is performing much better with larger codebases.
Staying on top of all these AI-tools takes time, which is why I write this newsletter. I do deep dives like this so that you can quickly leverage the best tools to do your best work, without having to spend all your free time in front of a keyboard.
If you’re new here, join 1,000+ other subscribers who get the newsletter straight to their inbox.
So what app are we building?
I want to build a job application tracker. I’m not job hunting, but last time I did, it was a pain in the butt to keep track of. This seems like a pretty simple CRUD app to use as an example that can easily be extended with useful features. I want users to be able to track what jobs they applied to all in one place, and show them their applications status, some information about the job, and maybe even some AI-augmented resume advice.
Does something like this exist already? Maybe. But I’m doing this for the love of the game. Let’s get our hands dirty.
Installing Claude Code
Open your terminal and install it with NPM:
npm install -g @anthropic-ai/claude-codeMake sure you get a successful install. Your screen should look something like this.
Some helpful Claude Code commands
Breifly, here are some of my favorite commands for Claude Code:
/clear(keep your context clean and reduce token usage)/model(choose your model to stay inside usage limits)/exit(leave the CLI)/cost(see how many tokens you’re using)/agents(see available subagents)
Plan mode
If you haven’t already, you can start Claude Code with:
claude
Next, hit SHIFT + TAB until it cycles to plan mode. Here, we’ll briefly describe our project to Claude. Here’s the prompt I started planning with:
I want to start a new application, called job-application-app. It will be for users to track the job hunt. First and foremost, it should let users keep track of jobs they are going to apply for or have already applied for. Jobs should have a job title, job company, job link, and status. Status should be one of "not yet applied", "applied", "rejected", "interviewing", "offer". Jobs should also have 0 or more notes. Jobs belong to the user and can only be red, updatated, or deleted by their creating user. This should be a Rails app with the latest version of Rails 8. Use lots of Rails defaults, including MVC. Use tailwind (configure when running the rails new command), make the UI simple and modern. Use devise for authentication.
After some thinking time, it proposed a pretty decent plan:
I’m happy with the plan, so I selected the (out of view of the screenshot) option for getting started.
Getting moving
I recently learned you that you can configure Claude Code in your IDE to bring some extra comfort and features. Just launch it from inside your IDE (mine is Cursor!) and run /ide to configure.
Whether you do this is largely a matter of personal preference. From the above planning step, Claude got started right away. My favorite thing about Claude Code is how it keeps an up-to-date todo list.
Context is important
If you’re initial run doesn’t cause Claude to create a Claude.md file, make one yourself by running /init
This is where you can put information to get automatically red into context, including useful info about your project, architecture info, common tools, or custom instructions. Keep this pretty short so it stays useful.
Take the time to be intentional about the context you give to Claude Code, as the better your context, the better your results.
Wrapping up the app
What’s crazy is that I had planned more sections of this article, but Claude Code built this whole app in one shot. It even set up a test account for me!
I’m pretty pleased with the job view page and the edit functionality too!
There are a few design changes that I want to make, but I’m even more excited to add some AI-powered features to help job-seekers compete in such a tough market. But I’ll leave these for another post :)
If you want to see more progress on this app made by Claude Code, drop me a comment or reply to this email to let me know!