Practical example of a no-code app as my first development

I learned a lot on my journey to No-Code – here are the articles on “What is No-Code” and “No-Code as a helper for companies and innovation“. Now it’s time to take the first steps. After trying out various no-code platforms, I finally chose Bubble. My first impression of Bubble was extremely positive. The platform greeted me with an intuitive user interface and clear instructions. Bubble’s drag-and-drop system allowed me to implement my ideas immediately. Choosing Bubble is of course subjective, as there are many other great platforms out there. Ultimately, however, you have to choose one.

For me, the intuitive user interface, the active community and the marketplace for plugins played a decisive role in choosing Bubble. Also, Bubble is initially free to use and a subscription is only required when an application is released.

First steps

My first step was to familiarize myself with the user interface. I then watched tutorials on Bubble and YouTube – my current no-code playlist can be found here. The advantage of a platform with many users is the wealth of blogs, videos and courses created by the community. As a user, you don’t have to rely solely on the information provided by the platform. In addition, there are already predefined modules, such as the registration and login function, which can be implemented directly. This was helpful for me to better understand how it works.

Bubble offers different levels: The design level is where the graphical representation (front end) takes place, the workflow level (back end) is where the functions are created and linked, and finally, the data level is where the database is located. Compared to traditional programming, where you would write the code at the workflow level, this is easier with no-code. It still took me a moment to get used to it. Essentially, an element (e.g. a button) is made clickable and the corresponding function is stored. The user does not need to be able to program, but should be familiar with the logical flow of programs and the concept of if/when/then. For example: When the Price list button in the footer is clicked, the visitor should be redirected to the “Price list” subpage.

Concrete project

After gaining an initial overview and familiarizing myself with the basic functions, I decided to implement a small test project and develop my own app – a contact management app that I had been missing for a long time. The idea behind it was to get in touch with my important contacts personally on a more regular basis. This idea had been with me for a while, and as it didn’t seem particularly complex to implement, it was the perfect way to familiarize myself with no-code. Why my own app? Because I firmly believe that you learn faster and more effectively through practical implementation than by simply studying the functions in theory. That’s why I recommend everyone to get a small practice project. If you don’t have your own idea, reprogramming an existing app can also be a good solution.

Implementing your own no-code application

1. Clarify the idea and define functions

Before I started with the actual creation of my app, I had to clarify my ideas and define the functions. The focus of the app was on efficient contact management. I therefore defined key functions such as registration, login, overview of contacts (sorted by interaction) and detailed view. I also created data fields for names, contact information, notes and more. Bubble made this process much easier by allowing me to visually design my data model. It is also easy to make further customizations and changes during the creation process.

2. Add functionalities

Before I turned my attention to the design, I created the functionalities. The real fun began when I started adding functionalities. Bubble made it easy to create the registration and login as well as forms for new contacts. After that, the sorting functions, displaying birthdays and setting up a payment function for a premium version were more difficult. The ability to easily create workflows to trigger certain actions impressed me and was basically very intuitive.

3. Testing and optimizing

Once I had implemented the basic functionalities, it was time for the test run. Bubble allowed me to check my app in a preview mode. Here I made sure that everything worked as I had imagined. I then took the time to gather initial feedback and make any improvements.

4. Design and user interface

Now it was time to take care of the design. Unfortunately, I realized that this took more time than expected. Although I could have done it myself, I got external help due to time constraints. Bubble makes it easy to create pages and customize the layout with different design elements. Colors, fonts and other elements can be easily changed, and dynamic content can even be added to create an appealing user interface. Despite external support, I was able to make or add certain adjustments myself, which proved to be useful. The ease of use is an advantage, especially for later, as professional help is not always needed to customize a text element or image.

Challenges and solutions

During my no-code journey with Bubble, I encountered a few challenges. However, the commitment of the Bubble community and the extensive documentation helped me to overcome these hurdles. Also, the ability to search the Bubble forum or YouTube for help and learn from other no-coders proved invaluable (here’s my current no-code playlist on YouTube). For example, although there is a Stripe plugin, I needed help with linking correctly and creating “buy buttons”. I found a good tutorial on YouTube. This shows that although no-code is easier than programming, it still requires a certain amount of technical understanding and not everything is created with one click.

Support from freelancers

I had now created all the functions of my app. I then encountered two problems: Firstly, I didn’t have time to create a nice design myself, and secondly, I didn’t just want a web app, but also a native app for my iPhone. At the same time, I had the ambition to get my little app into the App Store effectively.

Is that feasible for a no-code app?

Yes, depending on the platform, this is already part of the platform, but unfortunately not in the case of Bubble.

For reasons of time and complexity, I got support from a freelancer. Freelance platforms make it easy to find experts for Bubble. I worked with Monam Khalid, who also helped me with the native app and integrating it into the Apple and Google Play stores. In the end, I used a wrapper for my native app. In the course of the implementation, I also came up with the idea of using the ChatGPT API to integrate catch-up messages, and this also worked with Bubble in the end.

Finally, I was able to go live with the first version of my app as a web app and as a native app. From that point on, of course, I also had to pay to use Bubble. For those who are interested, the result can be found today under the name Dunion (web app, iOS or Android).

Conclusion: No-Code and Bubble – a successful combination

Developing my contact management app with Bubble was not only instructive, but also extremely encouraging. The no-code platform enabled me to implement my ideas without deep insights into the code. Bubble has proven to be a powerful tool for creative minds who want to create innovative applications without extensive coding knowledge.

The no-code movement has had a groundbreaking impact on the way we create software. The simplicity and accessibility of platforms like Bubble open up a wealth of opportunities for creative minds. My journey with Bubble marks just the beginning, and I look forward to exploring more no-code platforms and implementing even more exciting projects. I particularly see the potential in creating a Minimal Viable Product (MVP) to do an initial market test on a small budget, as well as developing internal help tools or productivity apps.

Click here for the first three parts of the series:

1. What is No-Code? Simply explained
2. Why does no-code help companies and promote innovation?
3. What no-code platforms are there?

Yves Gogniat

Yves Gogniat ist Experte für Informations- und Technologierecht mit den Schwerpunkten Datenschutz und IT-, Vertrags- und Gesellschaftsrecht. Er verfügt über ein breites Wissen in den Bereichen Blockchain-Technologie, Krypto-Währungen und hat seine Erfahrungen in verschiedenen Kanzleien sowie in der öffentlichen Verwaltung gesammelt.