This week I created toasti, a much improved (but for now still ugly looking) connection games app for iOS and Android.
Tools I used:
Flutterflow - a low-code app builder
ChatGPT - to generate content
StableDiffusionXL (via PlaygroundAI) - to generate images
The first version of the AR Games App that I made in Week 1
We’re Not Really Strangers - inspo for some of the content
Context
I’ve missed a few weeks as I’ve been busy with other projects, but this week I finally did something I’ve wanted to do since Week 1 - revamp the AR Games app and launch it on to the App Stores.
I was prompted this week by an email from Authentic Revolution - they announced a web app of their games manual.
I can’t help but notice just how similar it is to my version that I released at the start of the year. They also used Glide, they made cute original images for each game like I did, and had a few sorting options. Granted, it’s a super basic app, and probably many people would approach it in the same way, but still…
Anyway, it motivated me to take the Next Step from my Week 1 project and make it a native app available to download on iOS and Android.
Process
I learned about Flutterflow while working on another project, and thought it looked like a slick and accessible wrapper for Flutter, a cross-platform framework that lets you write code once and deploy on iOS, Android, and other browsers. As LLMs evolve, it’s becoming increasingly clear to me that coding and human-computer interaction will continue to become more abstracted, and it makes sense to move my brainpower ‘up the chain’ too - this lets me do more with tools that automate a lot of the low level coding. So learning Flutterflow - which took me ~5-10 hours to feel comfortable - is a low investment path to building and launching apps, and much faster than learning eg. Flutter or React Native.
I mostly learned through trial and error and a few tutorials, the trickiest part (but really quite straightforward) was mapping the Firestore database (where the content is housed) to Flutterflow UI elements (like lists and buttons).
As for the content, I re-used the connection games manual from my week 1 Glide app, and beefed it up with 3 other sources:
50 Sentence stems generated by ChatGPT seeded with sentence stems I had used at events
90 questions inspired by “We’re Not Really Strangers” - split into 3 sections: Perception, Connection, Reflection
Questions from a 1997 study, titled ‘The Experimental Generation of Interpersonal Closeness’, and rehashed many times as “36 Questions to Fall in Love”
I presented each of the question sets as a list, some with filters, and some with a ‘surprise me’ option with a 1 minute timer.
For several of the buttons and menus I created background images using Stable Diffusion XL. The design is still very inconsistent between pages, the logo needs to be a bit less cute, and the flow of the app can be upgraded, and there’s probably a few bugs, but its a good start! Next week I’ll fix a bunch of those things.
Learnings
No-code / low-code tools still have a learning curve. I probably spent 5-10 hours before I felt decently comfortable using Flutterflow. Still, that’s a lot less than it would take to learn Flutter!
Good design is hard and takes just as much time as building the functionality. I didn’t have time to work on good design this week, but in a future week I will
Next steps
Test it in the wild
Improve the design
Release for Android on the Google Play store
Translate it to a few different languages
Start making more apps