Making a sophisticated no-code app in 2023
--
In the first four weeks of 2023, I researched multiple no-code app tools and made a complex app. Read more about what I learned during these four weeks in this article. This project is part of my last year studying digital design and development.
The project
Who is the client?
The client I chose to work for are the lifeguards in Knokke-Heist Belgium. It is a group of over 250 people who ensure the safety of tourists that visit the coast in Knokke-Heist during the summer. Within the organisation, there are different ranks. You have regular lifeguards, you have a head lifeguard, and 2 adjuncts that support the head lifeguard.
What is the problem?
Handling a large team like this requires good organising. There are a total of 12 posts spread out over 12km (7.5miles). Currently all the communication from daily reports to attendances are done by paper. This is inefficient because all these papers have to get picked up daily by someone that drives from post to post. Besides digitalising paperwork, there are other improvements that can be made. Missing child reports with an image instead of explaining how the child looks like trough a transceiver, leave arrangements and making sure every post is manned.
The solution
During calmer days, lifeguards often fantasize about an app or a website that has all the information in one place. A place where you can easily see which dates you have to work. A place where you can check which sandwich-bars are open. A place where you can see the tides, temperatures and weather. A place where you can see important information like the next resuscitation session or PO-exam. A place where lost children can be shown with an image. A tool that makes their day just a little easier.
I will make an application to meet their demands. Instead of making this application with Flutter or React Native, I will try out different kinds of no-code solutions.
Organisiation crash course
There are a total of 12 lifeguard posts in Knokke-Heist. They are all guarded with 4 lifeguards every day during the summer months (July — August). Each post is made up of 7 lifeguard. One of these seven lifeguards is the post superior (mainly person with most experience). The 12 posts get overseen by a head-lifeguard and 2 adjuncts.
The app
As the title states, the app is somewhat sophisticated. I made a list of features which I’m curious if I can make them in a no-code app builder:
- Different screens and functions for different kinds of users (head-lifeguard and adjuncts should have a different screen then regular lifeguards, post superior needs to have different functions, …)
- Automating the leave arrangement, there are a number of rules which the leave arrangements must meet (Always one superior has to be present, not allowed to work longer then 5 days, everyone has to work first and last day of the month, …)
- Adding tide and weather information from external source.
Native, web or PWA app?
Native apps
- Pro: Fast performance
- Pro: Better use of OS and device specific functionalities.
- Con: Building OS specific apps can be time-consuming
Web apps
- Pro: No installation needed
- Con: Limited number of functionalities as compared to Native apps.
- Con: Internet connection required at all times
Progressive web apps
- Pro: Look and feel of native application
- Pro: Use very little data
- Pro: Gets updated like web pages
We are looking for an app that has the look and feel of a native application. Additionally, the turnaround time has to be as short as possible. A progressive web app fits the best with all these requirements.
No-code tools
There are over a dozen of no-code app builders that you can use. A few examples are:
Trying out all the options would be too time consuming. I decided to pick 4 tools based on special features and advice of a teacher that has been researching no-code apps for a longer period. I tested all the features of each tool extensively and wrote down my full experiences with them.
5 Pillars for my perfect no-code tool
- Easy-to-use
- Making forms with validation
- Integrating own design
- Database with authentication options
- Option to add custom code if no-code isn’t enough
Glide Apps
No-code app development tool for web and mobile devices.
Overall experience
Glide’s building tool works quite well. It’s fast, looks good and the layout is well thought out. The components have predefined styling which has the advantage that the app looks great without making any style changes. The downside of this feature is that you have very limited design choices.
Pros
Everything you make looks good and works. Glide is ideally suited for making an inventory tracker or a personal budget tracker. Adding and showing data from a spreadsheet, Airtable or its built-in Glide Tables is a breeze.
Cons
Besides not being able to really bring in your own design. You are also limited in terms of development. You can’t filter in relations from a table. You can’t make a tab without linking it to a table. You can’t easily add external data sources. It’s built for people that have limited programming and design knowledge. When you are a professional, you bump into many walls.
Conclusion
Glide is a very powerful tool but it doesn’t meet the requirements that I have for this project. Making a sophisticated app isn’t yet possible with Glide. Read more about my experience with Glide here.
Bravo Studio
Bravo Studio is the only no-code app development platform that enables you to connect your existing Figma or Adobe XD design with the backend of your choice
Overall experience
I’m blown away by how powerful Bravo Studio is. Their documentation and videos are well structured and once you learn the basics, you can build basically anything.
Pros
It’s easy to make a functional app that also has the design you want. Any design you want is possible with Bravo Studio. They have a powerful backend that can support large scale apps. Designers can transform their design into a fully functioning app and publish it to the web store.
Cons
You can only preview the app on your phone with the Bravo Vision app. It would be helpful to have that built into the website with the possibility to check if your design looks right on all devices. It would be a handy feature to add a free student plan.
Conclusion
Bravo Studio is really unique. They take a different approach to no-code apps if you compare them with other tools, but it’s working out well. I’m looking forward to how the tool progresses in the near future. Read more about my experience with Bravo here.
Adalo
Create fully custom no-code web & mobile applications with Adalo’s easy-to-use drag and drop platform.
Overall experience
Adalo is yet another very powerful no-code tool that lets you build anything you can think of. Apps can be designed in any way you want, with no limitations on the features you can include.
Pros
It’s a very powerful tool that has features no other tool has. You can easily add variable text to your app with magic text, or send certain users a notification when a form is submitted. They also offer a 14 day free trial which allows you to try out all their features to the full extent.
Cons
I would like to see forms getting improved a bit more. There is a forms component but you can’t change the input type there. It assumes everything is text-based. You can create custom forms but then you can’t make fields required or add user feedback when a field is filled out incorrectly.
Conclusion
Adalo is a really handy tool. It gives you all the design and development options you need when making an app but still manages to be simple and clear. Read more about my experience with Adalo here.
FlutterFlow
FlutterFlow lets you build apps incredibly fast in your browser
Overall experience
The last one on the list to try out was FlutterFlow. It has the most features and options of all the tools which makes the learning curve a bit steeper.
When you start to understand how all the functions work, you don’t want to switch back to another tool
Pros
FlutterFlow is packed with features. It’s the only no-code tool where you can view your code, edit permission requests, write custom functions and widgets, and so on. You have an incredible amount of settings you can customise to your liking.
Cons
All these features come with one downside: the online builder is laggy and slow for me. It was unusable in Safari so I switched to Google Chrome. It was a bit better but still not perfect.
Conclusion
FlutterFlow is by far ahead of the competition if it comes down to features and functionalities. It may even have too many features for a regular user who just wants to create a basic application. But for someone with previous programming knowledge. The most powerful no-code tool out there. Read more about my experience with FlutterFlow here.
Second iteration
In the third and final week of this project, I had some time to pick one of the four tools I tested and make a minimum viable product. I decided to stick with FlutterFlow for multiple reasons. The main reason is that FlutterFlow is the most in-depth tool that has far more customization than any other tool. Additionally, it’s the only tool where you can view your code, push it to Github and even download it. This allows you to test your app in Xcode or Android Studio.
Does it make developing apps faster?
The ultimate goal of no-code tools is to shorten the development cycle and make programming more accessible for everyone. Sure, making an app can be done in less time and by more people. But there are also some drawbacks to FlutterFlow that slow down my productivity (a lot).
The first thing that slowed me down was having to run the app to test it out. Every time you want to try out a feature that uses data from Firebase in your app, you have to click on the run in test mode button. You have to wait 2–3 minutes. In my experience, this often takes longer than the suggested time. Once it’s built, you have 12 minutes until the testing session ends. You do have the option to instant reload the test mode but this often fails and results in me waiting again for 5 minutes until it finishes building again.
The second problem that slows me down probably more than the first problem is lag. FlutterFlow was unusable in Safari. It felt like working on a Windows XP computer in 2023. As FlutterFlow is built by two ex-Google engineers, I quickly assumed that it would be optimised for use in Google. It was better in Google but as you can see in the video below, it’s not on point.
Hitting no-code limits
No-code tools work fine for apps that need general functions like forms and cards. But when it comes to something more sophisticated, you quickly hit some no-code walls.
I have a page called post that has 3 different views based on data from Firebase. Either you aren’t assigned a post, you are assigned a post but there is no planning yet, or you have been assigned a post and a schedule is set. Making this work without any errors isn’t an easy task. This is mainly because you can’t add conditional visibility that uses data from a backend query on the same container. So to make the post page work, I have to add boolean options to the user table and based on those options add conditional visibility.
I wanted to make a function where the user clicks on a day from a calendar widget and sees if he has to work that day or not. In order to do this, I listen to the date the user clicks and compare it to the dates the user works. If the date is a match, I want to show the user it’s a working day. The problem I faced here is that the date format of the calendar is either 30/01/2023 00.00.00 or 30/01/2023 23:59:59. When placing a date in the database, you only have the option to input time in AM and PM and you can’t pick 00.00.00 as a time. This means that when you check if the dates are equal, the result will be false because of the timestamps. There isn’t an option to disable timestamps or change the time.
Was I able to finish the app?
I wasn’t able to complete all the user stories in one week. I got far but there is still a lot of work left. Technically, it is possible to make a full app with FlutterFlow. It would require some custom functions and widgets which can be done. I would rather say my app (at this moment) is a proof of concept that shows it can be done.
Want more?
Interested in the user stories, planning, coach feedback or code? Go to GitHub
