post

Footer About

Footer Get Involved

Footer Links

Mind the Product

General

Product Unplugged Episode 3 with Pierce Healy

Product Unplugged Episode 2 with Lorilyn McCue

Product Strategy

Building Product Teams

Diversity and Inclusion

Digital Transformation

Artificial Intelligence (AI) & Machine Learning (ML)

Product Leadership

Product Management Career

Product Ethics

Minimum Viable Product

Enterprise Product Management

OKRs

Customer Research

Hypothesis and Testing

Business Strategy

User Research

👩‍🚀🚀   Live now for MTP members: <a href="https://mtp2017stg.wpengine.com/membership/#events" style="color:#FFFFFF;text-decoration:underline;">Driving Innovation AMA with Tendayi Viki</a>

Roadmaps: Break the rules without breaking the principles

Got questions about your product career?

Product roadmaps vs data – Jeremy Levy on The Product Experience

From engineering to product management at Google

Mind the Product joins Pendo

Liam helps people to create and launch new digital products as a freelance product manager and consultant. Get in touch at <a href="https://www.thelaunchco.io">The Launch Co</a> or connect with him on <a href="https://www.linkedin.com/in/liamseansmith/">LinkedIn.</a>

Liam Smith

<p>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.</p>
<p>But nowadays, that’s not the case.</p>
<p>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?</p>
<p>Because that’s exactly what I did.</p>
<p>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.</p>
<figure style="width: 818px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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>
<p>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.</p>
<p>So, I decided to try to build something (an app) for myself.</p>
<h3>Deciding how to Build it</h3>
<p>At first glance, the options for creating an app seemed pretty limited: pay someone to do it or learn to code.</p>
<p>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).</p>
<p>You can see the dilemma.</p>
<p>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?</p>
<p>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.</p>
<h3>Deciding What to Build</h3>
<p>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.</p>
<p>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).</p>
<p>Requirements done.</p>
<p>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.</p>
<figure style="width: 796px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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://mtp2017stg.wpengine.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>
<p>I was least confident about getting ingredients delivered to my door each week, so that’s where I started.</p>
<p>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.</p>
<p>Back to square one.</p>
<p>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!</p>
<figure style="width: 883px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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://mtp2017stg.wpengine.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>
<p>The one thing I knew about the recipes was that I didn’t want to create them. That meant sourcing them online.</p>
<p>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.</p>
<figure style="width: 872px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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://mtp2017stg.wpengine.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>
<p>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.)</p>
<p>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.</p>
<figure style="width: 874px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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>
<p>For the UI design, Bubble has a simple Wysiwyg editor and I started by just copying the design from the prototype.</p>
<figure style="width: 832px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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://mtp2017stg.wpengine.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>
<p>But I quickly noticed a problem.</p>
<p>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.</p>
<figure style="width: 854px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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>
<p>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.</p>
<h3>Bringing it to Life</h3>
<p>Powering the user interface are something called Workflows. These comprise the logic that says if <em>this</em> happens then do <em>that</em>, for example, displaying a pop-up on a button click. Again, no code.</p>
<p>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.</p>
<figure style="width: 903px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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>
<p>Finally, it was time to test it out…</p>
<p>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.</p>
<p>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.</p>
<h3>Making it Look Pretty</h3>
<p>Last but not least, I slapped a landing page on the front along with a new name and colour scheme.</p>
<figure style="width: 927px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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>
<p>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.</p>
<figure style="width: 861px" class="wp-caption alignnone"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.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>
<p>So, there you have it.</p>
<p>Proof that someone with zero coding ability can build a fully functioning web application.</p>
<p>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.</p>
<p>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.</p>
<p>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?</p>
<div class="g g-21"><div class="g-single a-73"><a class="gofollow" data-track="NzMsMjEsMSw2MA==" href="https://community.mindtheproduct.com/c/general/"><img decoding="async" src="https://mtp2017stg.wpengine.com/wp-content/uploads/2021/10/Membership-Circle-banner-ad-scaled.jpg" /></a></div></div>

How I Built an app Without Writing a Line of Code

Liam Smith

Read more

Comments