Cooking up your first app

The five essential ingredients

Swedish meatballs are all made from the same fundamental components: meat, onion, breadcrumbs, seasoning. Sure, the presentation varies, but they all share the same ingredients. Apps are just like that. Same basic ingredients, different presentation.

If you trim off the excess, the polish, and the fluff, every app – from the simplest to-do-list to the most complex social network – is basically built from the same five essential ingredients.

1. The data

This is the raw ingredients that the Ai will use to cook up your app based on the instructions you have given it. Every app needs data to work with. In my pizza dough calculator it was flour, salt, yeast, and water amounts, but in other apps it is:

• Hourly- or dayrates for proposals.
• Invoices and pdf with receipts.
• Excel-files with bank statements and transactions.
• Image files for image banks.

The data will be read, manipulated and stored by your app. The beautiful thing? You don’t need to setup a fancy database to store the data, you can if you really want to, but you don’t have to.

Since 99% of the apps I build is for me only I store everything in simple text files:

• json files for structured data.
• csv files for larger volumes of data.
• Plain text (.txt) or markdown (.md) for everything else.

The reasons I use text files are:

1. I can open and add, edit or manipulate the data easily in any plain text app.
2. The app is self-contained, no need to reinstall or setup a new database if I decide to move the app to another computer.

2. The code

If I had to slap a cooking metaphor in here I guess it would have to be «the tools» or «kitchen utensils». The code is like all the gadgets you have in the kitchen: the stove, the mixer and the frying pan. All the things needed to take your ingredients and manipulate, transform, and enrich it into your dish … or app-idea in this case.

The Ai doesn’t just generate code and dump it on you. It’s more like having a patient head chef that guides and explains each step in the app-cooking with you. «Here’s how we’ll store the data, here’s how we’ll calculate the new amounts, here’s how we’ll display the results.»

3. The server

This sounds intimidating, but think of it as the actual kitchen where all the gadgets, ingredients and in the app context: code and data are stored, then it gets way easier to grasp.

I mostly use php as the programming language, that requires an Apache or NginX server. I run everything locally on my laptop using the mamp pro. Mainly because it’s super simple to start a server with, but you can come a very long way with the free version also.

It’s super easy to get your own server running. First, go into the «Sites» folder in your laptop. Create an empty project folder, in my case it was «pizza-calculator». You don’t need to do anything more in that folder since your Ai companion will create all code in it.

mamp Free

1. Start mamp
2. Click «Preferences»
3. Choose «Document root» as Users > your-user > Sites
4. Click «Start".

Now you can access your project via http://localhost:8888/your-folder-name.

http://localhost:8888/ lists all your project folders if you have lots.

mamp pro

1. Create a new site, choose «Empty".
2. Name it (this will be your url) and choose your newly created empty project folder. I always go for project-folder.local
3. Click «Start» to start the server.

Now you can access your app by clicking «Open» in mamp or visiting http://project-folder.local

You now have a server setup and can get to work. Easy as that!

I’ve also used Node.js and Python servers, and Claude has guided me on how to install, setup and configure them to get everything to work the way I want it.

In my pizza calculator case I created the project folder and the code and data I have in /Sites/pizza-calculator looks like this:

4. The instructions, the prompt.

This is where you throw your Ai-friend into cook mode, the step by step instructions on what you want the Ai to build. For simpler apps it is straightforward. Just like the recipe for the meatballs. The first app I built was a pizza dough calculator:

Can you please provide a simple php-based pizza dough calculator.

It should be based on this recipe:

3 gram fresh yeast
1080g cold water
1360g Tipo-00 flower
340g high protein flower
65g salt
50g olive oil

The recipe makes 11 dough balls with a weight of 260g each.

The functionality of the calculator shall be:

- Dropdown with how many dough balls I want to make.
- Desired weight of the dough balls
- Scaled recipe is presented
- Total dough weight is presented

That’s it. No complex specifications, no technical jargon. Just describe the problem you want to solve.

For larger and more complex apps you will need a bit more tweaked approach: prd, instructions, planning, tasks … but that’s for a later post :-)

5. Documentation.txt or Claude.md

This might be the most important piece, and it’s something I wish someone had told me from the start. For every app I build, I ask Claude to create a simple text file that explains:

• The purpose of the app
• Technical details
• How it’s structured
• What each function does
• What files are involved
• and so on.

Why is this so important? Because just as you will add, adjust and modify your original meatball recipe you will add, adjust and modify your original app idea. This documentation file is what you and the Ai will fall back on to have as the one source of truth, shared view and memory when you come back to develop the next feature in your app, you can do without it but, trust me, you will forget how everything is built.

When I want to add a feature a week or a month later, I tell Claude: “We need to build blah blah blah … Please read the documentation and build this new feature using the same structure and thinking as the rest of the app.”

It’s like future proofing yourself and your app.

Swedish chef mumbo jumbo

So, once you have gotten your head around the above and perhaps built your first app, you will notice that what once sounded like a whole lot of Swedish Chef “Inne de ge pöot, dårnå koverin de kesterol verddå boilijn.”-mumbo-jumbo actually starts to make sense. Just like in food, each ingredient has a clear purpose, everything fits together logically, and over time you can improve, swap out components without rebuilding the whole thing.

Want to change how your data is stored? Setup a proper database. Need a different interface? Swap out the styling. Want to add new features? Just extend the existing feature set.

The power of clarity

«But how do I know how to tell Ai how to build my app?” you might say. Neither was I, initially, what I’ve found is that if you try to explain how to build stuff the Ai will try hard to please you.

What you do need is the ability to clearly describe what you want and the patience to break it down into steps, and iterate through them till you have a solution. Very Swedish skills, actually. Jätteenkelt, jättebra.

So, complete your prompts with:

• «Use programming best practices when building this.»
• «Please, suggest alternative solutions as you see fit»
• «Please, evaluate and feedback on my spec.»
• «Take existing solutions into consideration when building this".

What’s Next

In the coming posts, I’ll show you exactly how these building blocks come together to create real, working applications that save hours of my time as a freelancer and entrepreneur.

In the meantime, I have a task for you:

1. Download and install mamp Mac | Windows
2. Signup and download Claude Desktop
3. Give it access to your project folder via the «filesystem"-connector
4. Build your first thing!

Spoiler alert: the hardest part isn’t the building – it’s clearly defining what problem you want to solve.

Next up: How I turned my weekend baking obsession into my first custom app in under an hour.