Cooking up your fist app
Prepping the fundamentals
Swedish meatballs are all made from the same fundamental components: meat, breadcrumbs, seasoning. Sure, the presentation varies, but they all share the same ingredients. Apps are just like that, just with different ingredients.
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 built from the same bases.
The five essential ingredients
1. The instructions. [rewrite]
This is the ingredint list, the step by step instructions on what you want the Ai to build. And sometimes also the purpose and overview of the app that youu want the Ai to build. Just like the recipe for the meatballs.
I bet you have heard about “the prompt”, “prompt engineering” and a lot of Ai lingo, don’t get avskeäckt by those terms, this is it and its simple:
«I want an app that calculates my pizza dough recipe and lists the ingredient amounts so I scale it up or down depending on how many pizzas I want to make, but also the weight of every pizza.
That’s it. No complex specifications, no technical jargon. Just describe the problem you want to solve.
2. Your data
[Bag of flour]
Now we get down to the raw ingredients that the Ai shall use to cook up your app based on the instructions you have given it. Every app needs information to work with. This could be:
- Flower, salt, yeast, and water amounts.
- Hourly- or dayrates for proposals.
- Invoices and pdf with recipts.
- Excel-files with bank statements and transactions.
- Image files for image banks.
The data will be read, manipulates and stored by your app. The beautiful thing? You don’t need to setup a fancy database to store the data, you can, but you don’t have to.
Since
- 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:
- I can open and add, edit or manipulate the data easily in any plain text app.
- The app is self-contained, no need to reinstall or setup a new database if I decide to move the app to another computer.
3. The code
If I had to slap a cooking metaphore in here I guess it have to be “the tools”. The code is like all the tools and machinery you have in the kitchen, like the stove, the mixer and the frying pan. All the gear needed to complete your app … or dish of meatballs.
The ai doesn’t just generate code and dump it on you. It’s more like having a patient head chef that guides, asks 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.»
4. The server
This sounds intimidating, but think of it as the actual kitchen where all the gadgets and ingredients 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 webserver app cos its super simple to start a server with, and you come a long way with the free version.
But I’ve also used Node.js and Python servers, and Claude has instelled, setup and guided me on the things I neede to do to get it to work.
5. Documentation.txt or Claude.md
[ Note books w. Claude logo]
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 detials
- 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 originel 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 your self and your app.
Swedish chef mumbo jumbo
So, once your 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 til your have a solutions. 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 entreprenour.
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.