Open Soundbox 🔊

Open Soundbox 🔊

Web • Nov - Dec 2023

A fully customizable and mobile ready soundbox app made with Next.js & Airtable.

Why ?

With each of my group of friends, we always had some characteristic and fun sounds that we wanted to be able to find somewhere easily.

I first created a soundbox app back in 2020 with Thunkable. The only viable way to connect it to an online source was with Airtable, so I went with it.

It worked great ! But as the time went by, more and more of my friend were using an iPhone and therefore had no access to the app anymore. In addition, Thunkable has become a 100% paid service, and the API key system of Airtable used by Thunkable were going to be deprecated.

It was time to make something new.

How ?

As I didn't want to bother myself to pay for an Apple developper account to try to make my weird apps available on the app store, the solution was to create a Progressive Web App.

Open Soundbox is a fully customisable and mobile ready open source soundbox app
Open Soundbox demo

I've kept using Airtable because it was where my data was, and it also allowed me to grant access to my friends to they can directly manage the sounds. It ended up being a terrible choice. More on that later.

Open Soundbox content and configuration can be managed on airtable online UI.
The content is managed on Airtable

The REST API provided by Airtable is great. Within 2 hours, the app was complete. I then added configuration options to be able to create multiple soundboxes from this one project.

Moving away from Airtable

While Airtable was great for it's ease of use, it is not a great technical choice for this project.

  • Triggers on updates were a paid option, so caching server generated pages that were revalidated on change were not possible. Too bad for a project that could have made great use of the server side generation.
  • The user limit for editing data was quickly reached.
  • Airtable generates a temporary URL for each image, lasting for approx 90 min. The Next.js image optimization had to run every time the image url changed. As a result, I quickly crossed the image optimization limit of my Vercel account, now having no image at all.

I haven't had time to make the change for the moment, but it could be a great opportunity to create my own admin panel to manage content and granting access to other users.

Next.jsAirtablePWASSR