Once upon a time, if you wanted to create a new app or website and didn’t know how to code, you had few options: hire an expensive agency, scour the web for a decent freelancer, or learn to code. That meant investing a lot of your time or money, often without knowing if it would all be worth it.
But nowadays, that’s not the case.
What if I told you that you can build almost any type of app or website yourself, without breaking the bank and without writing a single line of code?
Because that’s exactly what I did.
To prove it, I’ll show you how I created a vegetarian meal planning app using a “no-code” application builder and a few nifty tools available online for free.
The Idea
When my busy work schedule drove me to eating ready meals every night, I knew I had to do something about it. I tried lots of options – from HelloFresh to hiring a virtual assistant in India – but found them all too time consuming or expensive.
So, I decided to try to build something (an app) for myself.
Deciding how to Build it
At first glance, the options for creating an app seemed pretty limited: pay someone to do it or learn to code.
The problem – I didn’t want to spend a load of cash on something that might not work. Equally, I didn’t want to risk paying a low-cost developer only get a poor product back. Doing it myself was more appealing but again, I didn’t think learning to code was the best use of my time (and I still don’t).
You can see the dilemma.
So, when I came across this tool called Bubble, which I could apparently use to build an app for almost nothing (just my time) and without learning to code, I was intrigued. The catch?
I’d need to learn how to use it. So, I headed over to Udemy and paid £10.99 for an online course and got cracking.
Deciding What to Build
Having already tried 101 alternatives, I had a pretty good idea of what I wanted from my weekly meal planning: healthy delicious recipes, a simple and affordable weekly meal plan, and an easy way to get the ingredients delivered to my door.
I also wanted to be able to choose the number of meals each week and servings per meal, swap a recipe, view recipe details, and use it from my laptop and mobile. The latter meant creating a web app that’s accessible from an internet browser (as opposed to a mobile app).
Requirements done.
Before building anything in Bubble, I spent a few hours testing design ideas using a free prototyping tool and whoever I could find around the house as guinea pigs.
Deciding Where to Start
I was least confident about getting ingredients delivered to my door each week, so that’s where I started.
I researched the UK’s main supermarkets in the hope I would find a way to integrate my app with their shopping websites. At the time of writing, however, only Amazon Fresh offered a publicly-available API and it didn’t deliver to my address.
Back to square one.
I then came across a shopping widget by Whisk.com, which turned out to be exactly what I needed. By pasting a tiny bit of JavaScript into the app and configuring a simple workflow (more on that later), I was able to add ingredients directly to five UK supermarket websites. And the best part… it’s free to use!
Adding the Recipes
The one thing I knew about the recipes was that I didn’t want to create them. That meant sourcing them online.
I found a few publicly-available recipe APIs including Yummly, Edamam, Big Oven and Food2Fork, and concluded that Yummly and Edamam were the best matches for my requirements. So, I signed up for free developer accounts with both and created little test pages in Bubble.
Unfortunately, none of the APIs turned out to be quite right for me. Edamam’s recipes were too hit-and-miss and Yummly, while it returned better quality results, was missing a key feature for me – the ability to search by number of servings. (It has since been announced that Yummly’s recipe API will shut down in September 2019.)
At risk of hitting a dead end, I decided to manually add recipe data into the app. This involved copying recipes into an Excel sheet then uploading this using Bubble’s file uploader (no need to create a separate database). It certainly wasn’t a long-term solution but at least allowed me to continue.
Creating the User Interface
For the UI design, Bubble has a simple Wysiwyg editor and I started by just copying the design from the prototype.
But I quickly noticed a problem.
The app was designed for desktop, which meant it looked fine on my laptop but was almost unreadable on a mobile, despite hours of tinkering in Bubble’s responsive editor.
So, I rebuilt it from scratch using a 320px page width (equal to an iPhone SE) and played around with the responsive settings to make it look good on larger devices too.
Bringing it to Life
Powering the user interface are something called Workflows. These comprise the logic that says if this happens then do that, for example, displaying a pop-up on a button click. Again, no code.
Some of the workflows for my app included a recipe search, swapping a recipe, emailing a meal plan and adding ingredients to a shopping list, plus a number of simple ones. All surprisingly easy to do with a little patience.
Finally, it was time to test it out…
I completed my first online supermarket shopping order with Ocado, using ingredients added from my meal planning app. It took me around 25 minutes and the total cost including extras (like toothpaste) was just £40.12. Boom.
Over the next few months, I continued to use it and made updates as I went. This included new recipes and new features, like the ability to send the meal plan to multiple email addresses.
Making it Look Pretty
Last but not least, I slapped a landing page on the front along with a new name and colour scheme.
The name – (Almost) Vegan – was inspired by the growing popularity of plant-based food and my goal to reduce the amount of meat I eat. And for the landing page copy, I studied popular online forums to see what people were saying about diets, meal planning and recipes boxes.
So, there you have it.
Proof that someone with zero coding ability can build a fully functioning web application.
My costs were around £440 – most of which was spent on coaching with a Bubble expert – and it took just a few months on-and-off. Ongoing costs are about £10 per month too, thanks to the free SDKs and plugins.
What’s more, I can make changes to the app in minutes and for no cost – you don’t get that when you outsource work.
So, next time you say that you can’t afford to build that new website or app – or worse, commit thousands to an idea with a sketchy business case – what’s your excuse going to be?
Comments 0