[Medium] I made software for my favorite guitarist (2019)

This post was originally published on Medium in 2019 and has been imported to my personal blog archive.

How I made software for my favorite guitarist

If you have been awake and present in the world of guitar and progressive music anytime in the last decade, then you likely already know who Tosin Abasi is. He is an amazing instrumentalist, considered by many guitarists to be one of the best to ever touch the instrument by the time he was in his mid-twenties. Tosin is most well-known for his incredible technique, playing the eight-string guitar and taking everything about the stringed apparatus to the next level. He broke the mold of what the instrument was capable of so deeply, in fact, that he had to start designing new guitars with various companies/luthiers so that his hardware could keep up with his technique.

What you might not know is that in 2017 Tosin launched his own custom guitar company, Abasi Guitars. Being a massive fan of both Tosin and his band, Animals As Leaders, I found out about this very early on. I hit up their website the day that it went live, and what I found was mostly a placeholder page with a simple landing page and a contact form. Being a software engineer by day and a guitarist by evening, I decided to reach out using this contact form. I had seen a few tools recently that took guitar customization beyond a simple form, but I knew that they still weren’t utilizing the full power of the modern web. For some reason, they reached back out.

It was truly that simple. I found a contact form and I used it. The next day I was having a phone conversation with the CFO of Tosin’s new company, and I was explaining to him my vision of what guitar customization could be like on the modern web. I proposed using WebGL to provide users with an interactive experience where they could choose the options they wanted on their guitar and receive feedback in real-time, giving them the ability to spin the guitar around in 3D. After getting some exciting feedback on my ideas, I started working on it right away. I worked on it non-stop in my free time, excited about the chance to prove myself to the public, myself, and my favorite guitarist. Before long I had a working prototype using React and Three js. It wasn’t perfect, and it didn’t even use the correct model (at this point they didn’t even have an artist onboard). Unfortunately, the company dropped off the face of the earth by the time I had anything tangible. So I put the project down and continued living my life for about another year.

One day I opened my Gmail inbox to find that the CFO had reached out to me again. They had made some bad business decisions and invested in the wrong person, he said. They had been screwed over and it was a hard road for them. But more importantly, they were back on their feet and ready to get back to work on their products, marketing, and website. So I dusted off the old React app and got back to work. A year in the React world is a lot, though, so the core API had changed majorly and I had to rewrite some stuff. Not a huge deal. This time they also had an artist on board! The fantastic Alexander Marks, who did all the models/textures for the guitar. Please head his way for all of your 3D modeling needs.

Of course this time I secured an agreement for payment since I didn’t want to waste any more time on a project that was going nowhere. The payment was egregiously low, but I figured that most of the value for me was coming from the exposure to the scene, the various things I would learn along the way, and the fact that I was retaining all rights to the code so that I could reuse it for future projects. So on to the software.

I knew that the end result was that customers would have a pleasant user experience designing their guitar. I also knew that the client would have changing requirements for the various features offered to the customer, pricing for those features, and other changes. So I knew that I needed to do this by configuration, allowing the client to configure options/prices/whatnot for the guitars at their own whim.

The original prototype had actually used the Shopify API to perform orders, and I had leveraged a useful organizational trick within Shopify to allow the client to do all of their customizations just by manipulating things within their Shopify account. So essentially the available options for the guitar were being built dynamically by reaching out to the Shopify API and getting a list of products and doing weird stuff with that data. Step 1 was to create this new configuration dashboard, which would be used to configure available options, set prices, view/manage orders, and view all sorts of statistics about how customers were using the application. In the end, none of this made it to production, but you can see the results of my efforts in the screenshots below.

This was built as a separate React application, and it bears the mark of an application that was created both quickly and without a designer. That being said it was very solid functionally. I used Firebase for the backend, mainly so that I could get up and running quickly. I had plans to eject at some point so that I could do an asset/graphics pipeline, processing/minification of models, generated user content/screenshots, and all other sorts of fancy stuff. As the project went on, however, my energy levels decreased, and at some point, I realized that my level of integration with the client was never going to reach the point that I had hoped. By the end of the project we even ejected from using firestore for the configuration items, and I essentially turned my entire API into a .json file embedded in the client application.

Most of you must be ready for a demo of the final application already. Here it is, with all of its flaws: the Abasi Custom Guitar Configurator. This app is also embedded on the Abasi Guitars website.

Overall I’m actually fairly happy with the outcome of this project. It’s easy to sit down and pick on the flaws of any application, and the mobile experience is definitely awful, but this was not an easy project for me on multiple levels. This was my first time spearheading the design and UX of a front-end application. I’ve been a backend engineer for most of my career, and while I’ve created multiple frontend applications for both my full-time employers and clients over the years, I’ve almost always had a talented designer working with me. Let’s take a moment to appreciate the designers on our various teams and the amazing impact that they have on creating beautiful software.

This was also my first time working with a small business whose primary concern was marketing, and whose budget for the software was essentially nonexistent. I did some mediocre time tracking while building the app, and between the various iterations, I clocked over 300 hours. That might not sound like a ton, but at my typical contracting rate that puts this app well over $25,000 USD for any other client. Let’s just say that the budget was…not that. I also did this on the side while working full time, writing and practicing music with my band, and having a family and other various responsibilities.

Moving forward I hope to take this platform much farther. I plan to rewrite all of the components using svelte, build a full backend that offers customization of the final configurator UI, and use Rust/WASM to build a much better graphics API for the WebGL portion. In the end, I hope to come into this space in a strong way, offering what might potentially be the first competitive alternative to SketchFab’s set of configurator tools, with a focus on mobile experiences.

If this sounds like something you might be interested into any extent, or you have questions, please reach out to me at ty@tytr.dev

Thanks for reading!