No-code newsletter #2

Foreword from Tom

Here’s the second newsletter. Things are progressing within 4degrees (the agency I run) with leads coming in every day asking about the possibilities of using no-code for their projects. I may be biased, but it’s always worth having a look at whether no-code could be suitable for your project before you get started. I always say that no-code isn’t great because it’s the absence of code, no-code is great because it allows individuals and organisations to launch.

The templatification of no-code

Is there a need to repeat a task once it has already been completed? This question is highly relevant in the realm of software development. With traditional coding methods, once the code is written, it can be saved and reused in the future. This practice is widely adopted in the tech industry, with platforms such as Github providing access to pre-written code that can be copied or adapted to fit specific needs.

The same concept applies to no-code, where pre-written code is stored in the form of templates that can be easily accessed or purchased. The main goal of no-code is to save time, making templates an ideal product for those looking to streamline their workflow.

Leading no-code platforms are actively expanding their template libraries. For example, there are individuals selling templates for Notion at a yearly fee, and it won't be long before similar models are adopted in the no-code world. On Bubble (suitable for web applications), clones of popular apps such as Facebook, Uber, and Instagram can be found in their template library, while Flutterflow (suitable for mobile apps) is still in its early stages, but its template and component library is expected to grow in the coming years.

In the future, it is possible that all tasks will have a corresponding template in the library. The role of a no-code agency would then shift to finding these templates, customizing their design, and adapting their data structures.

This is a prime time to explore opportunities in the no-code template market, and it is definitely worth considering.

No code news

Bubble launches immerse.

A 10 weeks, fully-funded and hands-on virtual residency program for Black and Afro-Latinx entrepreneurs where founders learn to build the apps of their user’s dreams

Flutterflow marketplace is growing!

The FlutterFlow Marketplace has a load of templates to speed up a build. Here a few of the new templates that have been added: Photo Sharing App, Messaging App & Streaming App.

The no-code/ low-code market is growing!

Low-code development technologies market forecast to hit $44.5 billion by 2026!

Platform spotlight

Last week I talked about how bubble was the number 1 tool at the moment for no-code development however it fell down considerably if you want to make a mobile app.

Not to worry though because flutterflow is here!

As described by chatgpt. “FlutterFlow is a low-code platform for building and deploying mobile applications. It allows developers to create mobile apps for iOS and Android platforms using a visual interface, without having to write a lot of code. The platform provides a library of pre-built UI components, such as buttons, text fields, and sliders, that can be easily customized and arranged to create a complete app. The platform also offers features such as backend integration, data storage, and real-time synchronization, making it a complete solution for building and deploying mobile apps. FlutterFlow is based on the Flutter framework, an open-source UI toolkit developed by Google, which allows for fast and smooth app development. The platform is designed to provide a streamlined and efficient way to build and deploy mobile apps, making it a good option for businesses and organizations that need to quickly launch a mobile app without a lot of development effort.”

As written above Flutterflow is based on the flutter framework however there are other similar products such as draftbit which does something very similar but using the react framework.

Flutterflow is an amazing tool and I’ve launched some really cool apps recently. One of the benefits to making no-code mobile apps is that they are much easier to design than web apps – purely because the screen is much smaller so you don’t have the extra space!

Flutterflow is relatively new in the no-code world however it is growing very fast and as it does the template and widget library is growing which is opening up possibilities for what can be made.

I love this tool and can’t wait to see where it goes.

If you know how to use bubble and flutterflow you will be a very complete no-coder.

Project spotlight

Eccomerce store mobile app

Here is an in depth guide into how to launch an ecommerce app in 9 steps using Flutterflow.

Please note… this is a no-coders guide, not a guide for coders. This is meant to show what is possible and loosely show you the steps to go about doing it.

1. Create the shop

Any good ecommerce store needs a front page that showcases the products and tells the user what the store is about.

How: There is a really good Nike store template shown below that you can download off the flutterflow marketplace (for free) that does just this . However it is only a front page and a product page.

2. Create the product details page, cart and checkout

There are specific pages that all eccomerce stores need to have, these include product details page, cart, checkout and payment confirmation screens. All of these are needed to give the full eccom experience.

How: Templates for all of these can be found in the in the page template section.

3. Customise the above

The above two steps tell you how to add the pages to the app however the design will not be custom to your store and the branding will look all over the place. If you have an existing brand update the colours, text and images to match, if you have no existing brand just make sure that it all looks good.

4. Create authentication/ ability to sign up (this is optional)

Authentication is the process of signing up or logging a customer in.

It is possible to create a store without authentication however it is always worth creating this so that you can learn about your customers.

How: Enable authentication in firebase and flutterflow then add an onboarding form which can be found in auth templates.

5. Create the database

At the moment the app structure is in place however this needs to relate to something. There needs to be data in the backend that pulls through to the UI to showcase images, text and pricing that relates to each individual product.

This is relatively simple given that the only data that will need to be held on the database is the users and the products. This can be more complex if you want it to be but in the simplest case there are only going to be users buying products so all you need to set up in the database is users and products.

How:

For the store.

1. Create a database in firebase and sync this with flutterflow.

2. Create a type as product, set the fields to information that relates to each product for example ‘name’, ‘price’, ‘description’, ‘availability’ etc. Anything that relates to the product.

For users:

1. Set up a ‘type’ in firebase for users and add ID, name and email etc

6. Create the logic

The logic flows are the behind the scenes steps that are taken in order to make things happen. Without the logic flows you would have a series of pages that look pretty and do nothing.

The logic flows can be split into two parts, the UI based logic flows (moving from screen to screen) and the logic flows that interact with the database to create, update and delete data.

How:

1. Set up the UI workflows so that a user can navigate between pages, for example.. once a product has been clicked on in the collection page, you will be sent to the product details page.

2. Set up the onboarding flow so that when a user inputs their email and password this is saved in the database.

7. Set up order management

Set up email alerts to let you know when a product has been bought.

When you get orders through you will need somewhere to organise these orders, there are third parties that can do this however as an MVP something as simple as google sheets can work.

8. Set dynamic texts

Software products are typically structured in a very simple manner. There will only ever be a very low amount of pages but the data that is pulled into pages changes. In the below example for the shop, the page will always look this way however [$..name] is a variable that chanes depending on what product was clicked. If a shoe was clicked then the data for that shoe will be sent and the texts will show what information is associated with that image. When the shop now button is clicked this will send the user to a product page and the data for this shoe will also be sent.

9. Create the rest of the pages needed

For example about us, blog, terms and conditions and privacy. You can find templates for these all over the internet.

What tools to use

For web apps – Bubble

For mobile apps – Flutterflow

For automations – Make

For quick launches – Softr

For websites – Webflow

For ecommerce - Shopify

Who am I?

My name's Tom Noble and I run 4degrees, a zero to one agency that specializes in no-code tools to help clients validate and launch tech products for a fraction of the cost and time.