Sound Buttons is an intentionally tiny, mildly meditative, app for your iPhone. Find it here: https://apps.apple.com/us/app/sound-buttons-tiny-music-toy/id6743234562
Why did I make this?
I made Sound Buttons in order to try out a few things:
- Reacquaint myself with React Native
- Make something small and game-like
- Tinker with LLMs in the coding process
Overall, this was a successful project! More on each of those points below:
React Native
I’d last tried React Native about 4 years ago. My experience with it came up recently in an interview and I wasn’t satisfied with my current knowledge, so I set out to make a small toy app to prove that I could go from concept to something live in the iOS App Store built on React Native.
As is typical with greenfield projects the hardest part is figuring out the tooling and workflows. React Native is pretty good these days! The less said about the developer experience of the App Store the better.
One thing I appreciate about React Native is the ability to start the app in the terminal, open a simulator, make changes to the code, and see them represented in the simulator with minimal fuss. I’ve done a handful of games in Unity and the process of seeing a Unity game in a simulator would take a LOT longer back in the day. We are making progress!
The component tree in this app is an Index route where we enter the app and handle some high level setup and a component that’s reused for the buttons themselves. The buttons have logic to handle pressed events that changes their animations and updates their background colors.
Game-like
Steve Kemsley, my collaborator at Scope Creep Studios, and I keep gravitating towards making small meditative and minimalist experiences (although, go check out Bug Drop! if you want to play a pretty great platformer). Sound Buttons was also born from that sensibility. What if the primary and only interaction was just tapping buttons and hearing some nice sounds?
With that as the hook for the project I fired up React Native and the Expo framework and started to explore Expo Audio to handle the sound. The circles are HTML/CSS and are animated with react-native’s built-in Animated library.
Steve tried out my first iteration with some test sounds I’d dropped in and immediately texted back:
He was, of course, right and way too kind about it. A few hours later he delivered a folder of mp3s for an expanded sound palette. I added them to the build and sent it off to the app store for review.
LLMs
On the LLM front, I wanted to see how ChatGPT could help me get acquainted with new libraries. For something like this where you mostly need search documentation for correct syntax it’s fantastic. My first use case was in building the sequence of animations. I knew the Animated library would support the things I needed (opacity and x/y positions) even if I wasn’t sure of the ins and outs of the API. Asking ChatGPT to build that sequence gave me a block of code that was not quite right; however, gave me enough context to tweak it from there.
I also used it to reformat some repetitive imports for me. There are 15 sound files in the app, instead of writing each line myself I gave ChatGPT this prompt:
“Given this string, repeat it 15 times but replace 1 in the string for the next number in the sequence: const sound1 = require(“./Sounds/1.mp3”);”
It easily gave me:
const sound1 = require("./Sounds/1.mp3");
const sound2 = require("./Sounds/2.mp3");
const sound3 = require("./Sounds/3.mp3");
// etc.Could I have done that in another way? Yes, absolutely. I’m sure VIM users are screaming right now about how I wasted my time. Heck, I bet excel could do it even faster. However, it was fast enough for something quick like this. I could see formatting being a strong use case for integrating LLMs into text editors.
Lastly, for kicks I sent the text of this post through ChatGPT and asked it to rewrite it for LinkedIN. I hated the result! If I was on a deadline to get something handed in I might have felt differently about what it gave me.
What did I learn?
I feel much more confident about the current state of React Native and it’s nice to get my head back in the space of thinking about making games again! I’m still a curmudgeon about LLMs for certain things, although do find value in them for documentation lookup style tasks.
And, if Sound Buttons gets any updates I have plenty of ideas for what to do next. It probably needs a settings page to tweak colors, shapes, speeds, and sounds. And a credits screen as well. Maybe a way to track how many buttons you pressed during each session? There’s always more to do! I’m confident that the structure of the app can easily support those new features, which is a great place to be for an initial launch.
Go check out Sound Buttons on the iOS App store!