My First No-Code App with Bravo Studio
Disclaimer: This article contains no tutorials, but I’ve listed several video’s and articles that helped me get started at the bottom of this post, if that’s what you’re looking for. The focus for now it to show you what it enabled us to do, by using my first app as an example.
The Goal
I came across Bravo Studio at some point, promising me things like “From Design to native iOS and Android app. No-code.”. Yea right… was my first thought. On the other hand I was tempted to say: challenge accepted.
Part 1 - The Design
I first needed a design. Since that’s my day to day job this was the easy part. I needed a look & feel that was content focussed. Helvetica, a super minimalistic look to keep focus on the content, combined with primary colours were soon born.
Part 2 - Making the prototype
Bravo Studio comes with an app, that enables you to preview your app before publishing. It requires you to mark certain elements, in order for their software to recognise elements correctly. Such as a form or a search field for example. This is rather straight forward and easily documented in a nice overview.
Part 3 - Connecting API's
A clickable app can also be made with Figma, so where is the awesomeness? Remember I wanted to build a list of words? And that each word would have a ‘backside’ with its meaning? And of course I wanted the ability to add new words and delete learned stuff. This all works via a simple spread sheet like Airtable or Google sheets.
You can set up a Google Sheets or Airtable list with these items (I used the latter since their tutorials are focussed on it), and connect your UI to it using some API mumbo jumbo. When the connection between Bravo Studio is setup correctly, every time you submit something to the app (a new word you learned for example 😉 ) it appears instantly in your Airtable sheet. This is somewhat complex for a designer with little to no coding experience. But luckily Bravo Studio created a section called “connecting to API’s” in their awesome Notion environment. And when you do figure it out, it’s pretty darn awesome. You’re basically creating your own simple backend environment.
Below some screenshots of my app, with a short description of what it does.
Next Steps
I’ve probably just discovered the tip of the iceberg of what is possible with their tool, and they are constantly adding new things. They even made their Trello roadmap publicly available.
I’ve also published my app under the name Vocube, but recently discovered the bug that items appear in random order in the list….
To reflect back on the title, we are used to talk about prototypes in terms of low or high fidelity. Sometimes a Figma prototype just doesn’t cut it when you want some quality feedback on your work. In these occasions Bravo Studio can also serve as a prototyping tool to get feedback before building your app outside of Bravo Studio.
Overall I thing it’s pretty darn amazing that this is possible since 2020/2021. Like I said, we’ve probably only seen the tip of the iceberg of what is possible. And wether we will use it as a hyper fidelity prototyping tool or as a means to bring app’s into the real world, it’s a nice blink into the future.
Useful Links
- Their Youtube playlist with the basics. Easy stuff and enables you to do all kinds fo awesome stuff.
- Their official Help Center.
- Written extended tutorial on how to create something similar as above. Also available in video.
- Bravo Get Started page.
Comments (10)
-
This is an inspiring read! I love how you broke down the process of creating your first no-code app with Bravo Studio. It really makes the world of app development feel accessible to everyone. Can’t wait to try it for myself!
-
This is such an inspiring post! I loved how you broke down the process of creating a no-code app with Bravo Studio. It’s amazing to see what can be achieved without traditional coding. I can’t wait to try building my own app using your tips! Thanks for sharing your experience!
-
Wow, this post really inspired me! I’ve been looking to create my own no-code app and your experience with Bravo Studio is super helpful. The tips you shared about the design process are fantastic! Can’t wait to try it out myself!
-
Great post! It’s inspiring to see how you built your first no-code app with Bravo Studio. I love the step-by-step breakdown you provided — it makes it feel approachable for beginners like me. Can’t wait to try it out myself!
-
Great post! I love how you broke down the process of creating an app with Bravo Studio. The visuals were really helpful for understanding the steps. Can’t wait to try it out myself!
-
Great insights in this post! It’s inspiring to see how accessible app development has become with tools like Bravo Studio. I can’t wait to try building my own no-code app after reading this. Thanks for sharing your experience!
-
Great post! It’s inspiring to see how accessible no-code tools like Bravo Studio can make app development. Your journey and insights really motivate me to start my own project. Thanks for sharing your experience!
-
What an inspiring journey! I love how you broke down the process of creating your first no-code app with Bravo Studio. Your tips and insights are incredibly helpful for beginners like me. Can’t wait to try it out for my own project!
-
This is such an inspiring post! I love how you broke down the process of creating a no-code app with Bravo Studio. It’s amazing to see how accessible app development can be for everyone. Can’t wait to try it out myself!
Stickman Hook play
December 16, 2024This is such an inspiring post! It’s amazing to see how accessible no-code tools like Bravo Studio can make app development. Your journey and tips are super helpful for anyone looking to get started. Can’t wait to try it out myself!