Tutorial: Build a Working App Without Writing Code

No coding experience required. By the end, you will have a functioning meal planner that you can use on your phone or share with friends and family.

The Fridge Photo Moment

One evening I was staring into my refrigerator with absolutely no idea what to cook. On impulse, I opened Claude on my phone, took a photo of the contents, and typed: "What can I make for dinner with what you see here?" Within seconds I had five recipe suggestions using exactly what was in the fridge. Not generic suggestions. Specific recipes based on the actual ingredients it could see in the photo: half a capsicum, some leftover chicken, a bag of spinach, eggs, and a block of feta.

That moment captures what AI can do for everyday life. But what if you could go further? What if you built a simple app that planned your entire week of meals, asked about your dietary preferences, and generated a shopping list you could take to the supermarket? That is what we are going to build right now.

What We Are Building

A web-based meal planner that:

• Asks you about your household (how many people, any dietary requirements, allergies, foods you dislike)

• Asks about your preferences (budget level, cooking skill, how much time you have on weeknights vs weekends, cuisine preferences)

• Generates a full week of dinner recipes tailored to your answers

• Produces a consolidated shopping list grouped by supermarket section

• Lets you swap out any meal you do not like and regenerates the shopping list

This is a genuinely useful app. It is also a perfect introduction to vibe coding because it is complex enough to be impressive but simple enough to build in one session.

Step 1: Choose Your Tool

We are going to use Bolt.new for this walkthrough because it is the most accessible for beginners. You could also use Lovable or Replit. The process is similar across all three.

Go to bolt.new and sign up for a free account. You will land on a prompt screen that looks similar to a chat interface.

Step 2: Write Your First Prompt

This is the most important step. A vague prompt produces a vague app. A detailed prompt produces something you can actually use. Here is what to type (feel free to adjust to your preferences):

Step 3: Watch It Build

After you submit the prompt, Bolt will start generating code. You will see files being created in real time: HTML, CSS, JavaScript, and application logic. This typically takes 1-3 minutes. A preview of the app will appear on the right side of the screen.

The first version will not be perfect. That is normal and expected. This is where the iterative process begins.

Step 4: Iterate and Refine

Look at what Bolt produced. It will likely have the right structure but some things will need fixing. Common issues on a first pass:

The layout might look odd on mobile. Type: "Make the layout fully responsive. On mobile, stack everything vertically. The shopping list should be easy to use one-handed on a phone screen."

The meal suggestions might be placeholder text rather than real recipes. Type: "The meals need to be real recipes with actual ingredients and quantities. Generate realistic Australian-friendly meals that match the user's preferences. Include actual cooking instructions for each meal."

The shopping list might not consolidate ingredients properly. Type: "The shopping list needs to combine ingredients across all 7 meals. If three recipes need onions, show 'Onions x 5' not three separate onion entries. Group by supermarket section."

Each time you give feedback, Bolt regenerates the relevant parts. This back-and-forth is exactly how vibe coding works. You describe what you want in plain English. The AI writes the code. You test it, give feedback, and the AI adjusts. Three to five rounds of iteration usually gets you to something solid.

Step 5: Test It Properly

Before you share it with anyone, test it yourself:

Fill in the onboarding screen with your real preferences. Does it ask the right questions? Are the options sensible?

Look at the generated meal plan. Are the recipes realistic? Do the cooking times make sense? Do the meals match your stated dietary requirements and preferences?

Check the shopping list. Are ingredients properly consolidated? Are the supermarket sections logical?

Try swapping a meal. Does the shopping list update?

Open it on your phone. Is it usable?

For each issue you find, describe it to Bolt in plain English and let it fix it.

Step 6: Deploy and Share

Once you are happy with the app, Bolt can deploy it to a live URL that anyone can access. Click the deploy button and you will get a link like yourapp.bolt.new that you can share with family or friends.

That is it. You have just built and deployed a working web application without writing a single line of code.

What This Teaches You

The meal planner is useful on its own, but the real value is in what you have learned:

Prompting is design. The quality of your initial prompt determines 80% of the outcome. Be specific about what you want, how it should work, and what the user experience should feel like.

Iteration is the process. Nobody gets a perfect app from a single prompt. The skill is in knowing how to describe what is wrong and what you want changed. This is the same skill you use when working with a human developer.

You can build things. Once you have built one app, the mental barrier is gone. A personal budget tracker, a wine tasting journal, a client contact manager, a home maintenance scheduler: the process is the same. Describe what you want, iterate until it works, deploy.

Try this right now

Go to bolt.new, create a free account, and paste the prompt from Step 2 above (adjusted for your own household). You will have a working meal planner within 30 minutes. Then, next time you are staring blankly into your fridge, open Claude or ChatGPT on your phone, photograph the contents, and ask what you can make. Between the two, you will never be stuck for dinner ideas again.