post

Footer About

Footer Contribute

Footer Get Involved

Footer Links

Mind the Product

Guest Post

Building for change: When transformation and product management meet

Product Development

What are product features? Definition, examples, and 5 types

B2B product management

Artificial Intelligence (AI) & Machine Learning (ML)

Building Product Teams

Business Strategy

Data Driven Product Management

Digital Transformation

Diversity and Inclusion

Minimum Viable Product

OKRs

Prioritisation

Product Design

Product Research

Product Development Process

Product Ethics

Product Discovery

Product Leadership

Product Management Career

Product Strategy

Stakeholder Management

🌎 <a href="https://www.mindtheproduct.com/world-product-day/" style="color:#FFFFFF;text-decoration:underline;">Happy World Product Day!</a> Be sure to celebrate product, yourself, and your peers today! 🎉

Why teams often struggle with OKRs: A conversation with Jeff Gothelf

Lessons from my first year as a Prod Ops Manager

How Google makes AI work at Enterprise scale – Miku Jha (Director, AI/ML and Generative AI, Google Cloud)

5 ways to invent and simplify as an AI/ML product manager

Liam Smith

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 <a href="https://almostvegan.co.uk/" target="_blank" rel="noopener noreferrer">vegetarian meal planning app</a> using a “no-code” application builder and a few nifty tools available online for free.
<figure style="width: 818px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/c29ec3d8-7408-409a-aa1b-e085124a4470_pasted20image200.png" alt="" width="818" height="396" /><figcaption class="wp-caption-text">The (Almost) Vegan meal planning app</figcaption></figure>
<h3>The Idea</h3>
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.
<h3>Deciding how to Build it</h3>
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 <a href="https://bubble.is/home" target="_blank" rel="noopener noreferrer">this tool</a> 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 <a href="https://www.udemy.com/bubble-is-learn-how-to-build-apps-without-code/" target="_blank" rel="noopener noreferrer">an online course</a> and got cracking.
<h3>Deciding What to Build</h3>
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 <a href="https://marvelapp.com/" target="_blank" rel="noopener noreferrer">free prototyping tool</a> and whoever I could find around the house as guinea pigs.
<figure style="width: 796px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/f4e271b7-aa60-47b7-9075-45816c8217d9_image2.jpg" alt="" width="796" height="446" /><figcaption class="wp-caption-text">The home screen prototype</figcaption></figure>
<figure style="width: 791px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/9f14b2ae-28c5-4d75-9279-ab4e5fdd1d5f_image5.jpg" alt="" width="791" height="444" /><figcaption class="wp-caption-text">The meal planner prototype</figcaption></figure>
<h3>Deciding Where to Start</h3>
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 href="https://www.amazon.com/afx/ingredients/verify" target="_blank" rel="noopener noreferrer">a publicly-available API</a> and it didn’t deliver to my address.
Back to square one.
I then came across a <a href="https://whisk.com/shopping-list/" target="_blank" rel="noopener noreferrer">shopping widget</a> 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!
<figure style="width: 883px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/e7800271-07a8-434f-8e3e-43275c530817_image11.jpg" alt="" width="883" height="496" /><figcaption class="wp-caption-text">Integrating with five UK supermarkets was as simple as pasting a bit of JavaScript into my app</figcaption></figure>
<figure style="width: 841px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/5f400324-89a2-434a-a61d-e7a11c506592_image4.jpg" alt="" width="841" height="472" /><figcaption class="wp-caption-text">The Whisk shopping list</figcaption></figure>
<h3>Adding the Recipes</h3>
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 <a href="https://developer.yummly.com/" target="_blank" rel="noopener noreferrer">Yummly</a>, <a href="https://developer.edamam.com/" target="_blank" rel="noopener noreferrer">Edamam</a>, <a href="http://api2.bigoven.com/" target="_blank" rel="noopener noreferrer">Big</a><a href="http://api2.bigoven.com/"> Oven</a> and <a href="https://www.food2fork.com/about/api" target="_blank" rel="noopener noreferrer">Food2Fork</a>, 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.
<figure style="width: 872px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/0656c416-50a9-426b-a676-111e56c7c7dd_image8.jpg" alt="" width="872" height="484" /><figcaption class="wp-caption-text">Bubble makes it easy to connect APIs – it took less than 10 minutes</figcaption></figure>
<figure style="width: 885px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/cee68afd-c9e5-408d-a4a7-97e90209c4eb_image10.jpg" alt="" width="885" height="498" /><figcaption class="wp-caption-text">The Yummly API test page, displaying real recipe data</figcaption></figure>
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 &#8211; 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.
<figure style="width: 874px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/f878f640-19b1-4074-8c19-520ea7525403_image6.jpg" alt="" width="874" height="493" /><figcaption class="wp-caption-text">The recipe data, displayed in Bubble</figcaption></figure>
<h3>Creating the User Interface</h3>
For the UI design, Bubble has a simple Wysiwyg editor and I started by just copying the design from the prototype.
<figure style="width: 832px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/097f3d4b-8c42-4888-bdc3-41c75ad69472_image3.jpg" alt="" width="832" height="469" /><figcaption class="wp-caption-text">Bubble’s intuitive page editor</figcaption></figure>
<figure style="width: 865px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/c2c6053e-a7d5-43aa-805b-537f9e03001a_image12.jpg" alt="" width="865" height="492" /><figcaption class="wp-caption-text">Testing the first version of the meal planning page in Safari</figcaption></figure>
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.
<figure style="width: 854px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/af2dedc2-2ed8-473a-aaa4-326c984add31_image7.jpg" alt="" width="854" height="449" /><figcaption class="wp-caption-text">Bubble’s responsive editor – trying to make a desktop page fit onto a mobile screen</figcaption></figure>
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.
<h3>Bringing it to Life</h3>
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.
<figure style="width: 903px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/eac9c354-89d6-4aa0-947f-6fd2685247ee_image9.jpg" alt="" width="903" height="509" /><figcaption class="wp-caption-text">Bubble’s workflow editor – this example triggers a pop-up on a button click</figcaption></figure>
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.
<h3>Making it Look Pretty</h3>
Last but not least, I slapped a landing page on the front along with a new name and colour scheme.
<figure style="width: 927px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/1e72d7ad-83ae-4bee-bf4f-178021c3e5e3_image13.jpg" alt="" width="927" height="522" /><figcaption class="wp-caption-text">The (Almost) Vegan landing page</figcaption></figure>
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.
<figure style="width: 861px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2019/07/0337ff67-c015-40f4-907a-b8587d584504_image14.jpg" alt="" width="861" height="485" /><figcaption class="wp-caption-text">The (Almost) Vegan meal planner</figcaption></figure>
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&#8217;t afford to build that new website or app – or worse, commit thousands to an idea with a sketchy business case – what&#8217;s your excuse going to be?

How I Built an app Without Writing a Line of Code

Liam Smith

Read more

Comments