Skip to main content

Vibing

Your foundation is in place — auth works, the database is secure, and Claude Code knows your project inside and out. From here on, you're in the driver's seat. This is where you start building features by describing what you want and letting Claude Code do the heavy lifting.

There's no single right way to do this. The whole point is to explore, experiment, and build the app you have in mind. That said, some things make sense to tackle before others. This page gives you a suggested order and example prompts to get you going.

How vibing works​

The loop is simple:

  1. Describe what you want in Claude Code
  2. Review what Claude writes — read through the code, make sure it makes sense
  3. Test it in the browser
  4. Iterate — if something isn't right, tell Claude what to fix

You don't need to get everything perfect in one prompt. It's totally normal to go back and forth: "make the button bigger", "move the sidebar to the left", "actually, add a search bar at the top instead". Claude remembers the context of your conversation.

Commit often

After each feature works, commit your code to Git. You can ask Claude to do this:

Claude Code prompt:

Commit the current changes with a descriptive message

This way you always have a checkpoint to roll back to if something goes wrong.

Suggested build order​

Here's a logical order for building out your app. Each step builds on the previous one, so you're never blocked waiting for something you haven't built yet. Adapt the prompts to match your app idea.

1. Build a form to add data​

You have a database table, but no way to add data to it yet. Start here.

Claude Code prompt:

Create an "Add [Item]" page at /[items]/new with a form that lets the user fill in [your fields]. On submit, insert the row into the [table] table in Supabase (using the logged-in user's ID). After saving, redirect to /dashboard. Also add an "Add [Item]" button to the dashboard that navigates to this page. Make sure only logged-in users can access this page.

Once this works, you can actually start populating your app with data.

2. Display data on the dashboard​

Right now the dashboard just says "Welcome." Let's show the user's data there.

Claude Code prompt:

On the /dashboard page, fetch all [items] for the logged-in user from Supabase and display them as a list. Show each item's [key fields]. Each item should be clickable — link to /[items]/:id for now (we'll build that page next).

3. Build a detail page​

When you click on an item, you should see everything about it.

Claude Code prompt:

Create a detail page at /[items]/:id that shows all the information for a single [item]. Include an "Edit" button that navigates to an edit form, and a "Delete" button that removes the item (with a confirmation dialog). Make sure the page checks that the item belongs to the logged-in user.

4. Add navigation​

By now you have several pages but probably no way to move between them other than typing URLs. Time for a proper nav bar.

Claude Code prompt:

Add a navigation bar that appears on all authenticated pages. It should have links to Dashboard and Add [Item]. Highlight the current page. Include the user's name and a sign out button on the right side.

5. Search and filter​

Once you have enough data, you'll want to find things quickly.

Claude Code prompt:

Add a search bar to the dashboard that filters [items] by [field] as you type. Also add filter buttons for [categories] — clicking one shows only matching items. Both should work together.

Most apps have more than one type of data. If your app needs a second table (e.g., notes attached to items, or sub-tasks within a project):

Claude Code prompt:

Create a [related_table] table with a migration. Each [related_item] has an id, user_id, [parent]_id (references [parent_table]), [your fields], and a created_at timestamp. Enable RLS so users can only access their own data. Then add a "[Related Items]" section to the detail page where the user can see existing entries and add new ones. Display them in reverse chronological order.

7. Make it look good​

Once everything works, ask Claude to polish the design.

Claude Code prompt:

Improve the overall design of the app. Add consistent spacing, better typography, and a cohesive color scheme using Tailwind. Make the landing page look more professional. Make the dashboard feel clean and organized. Make sure everything is responsive and looks good on mobile.

Go your own way​

The list above is a suggestion, not a rulebook. Once you get comfortable with the loop — describe, review, test, iterate — you can build whatever you want. Some ideas that work for many app types:

  • Data visualization — charts, graphs, or visual representations of your data
  • Import/export — export your data as CSV, or import from a spreadsheet
  • Tags or categories — a page that shows all your labels and how many items each has
  • Timeline view — a chronological view of all activity across your data
  • Dark mode — toggle between light and dark themes
  • Photo uploads — store images in Supabase Storage with RLS
  • Notifications or reminders — time-based alerts for items that need attention

The more you build, the more you'll learn about how your project works — even if Claude is writing the code, you'll start recognizing patterns and making better design decisions.

Tips for vibing effectively​

Be specific in your prompts. "Make the dashboard better" is vague. "Add a search bar that filters items by name as you type" gives Claude something concrete to build.

Test after every change. Don't stack up five prompts before checking the browser. Build one thing, see it work, then move on.

Read what Claude writes. You don't need to understand every line, but skimming the code helps you learn what's going on in your own project. Over time, you'll start catching things before they become bugs.

Update CLAUDE.md as you go. If you establish a pattern you like — a folder structure, a naming convention, a way of handling errors — add it to CLAUDE.md so Claude keeps following it.

Commit before risky changes. If you're about to ask Claude to refactor something big, commit first. That way you can always roll back if it goes sideways.

You're building a real project​

Seriously — what you have at this point is a real, working web application with authentication, a database, and a growing feature set. It's something you can put on your resume, show to people, and actually use. Every feature you add from here makes it more yours.

Have fun with it.