Using Gadget's Shopify connections, database schema editor, enhanced serverless functions, and auto-generated API package, Simon Barnes was able to rapidly build and deploy a backend API that powers a storefront widget, allowing shoppers to preview customized products before completing their purchase.

“Using Gadget is at least 4-5x faster than setting up an app manually. Time that would normally go into making the project performant, secure, and scalable is saved.”
- Simon Barnes, Technical Director and Partner @ Alleyoop

Branded provides custom packaging for individuals or companies who want to make their products and parcels pop. They wanted to update their website's Product Customization App so that their buyers could customize and preview a product before adding it to their cart.

‍

The older version of this app would email mockups of the desired customizations to buyers within 24 hours of completed purchases. To offer customers a better experience and increase conversion rate, the Branded team brought in Alleyoop, a business strategy and eCommerce development partner, to enhance their web app.

The Problem

Developing custom applications for Shopify involves spending time completing repetitive tasks such as setting up infrastructure and managing deployment. Simon Barnes, an experienced frontend developer and Technical Director at Alleyoop, was looking for a faster way to handle some of these repetitive tasks so that he could focus on writing the code that matters.

His initial plan was to build the application by hosting a frontend project on Netlify. Serverless functions would be used to create the required SVG and PDF files from the customer’s custom selections. All data and relationships could be managed in the browser.

This worked great for an initial prototype, but Branded’s app required more!

Simon wanted to link the generated order previews to customer accounts and save the generated PDFs and their data models so past orders could be previewed and ordered again. This would be too much data to handle on the frontend and required setting up a data storage solution, hosting assets and working with Shopify Customer and Order data to keep everything in sync, greatly expanding the scope of the project.

This expanded project scope would take extra time and effort. Additional layers were needed on top of the frontend application: a backend app, database, and all the connective tissue relating to deployment, scalability, and security. If you aren’t familiar with solutions to these parts of the stack, that could be a daunting task!

Thankfully, Gadget handles this under-the-covers part of the tech stack, reducing the amount of time and effort required for Simon to spin up these parts of an application.

The Solution

Simon discovered Gadget through a post in one of Shopify’s public Slack channels. He scheduled an initial call with Ralf@Gadget and started to re-engineer his solution to meet this expanded scope.

Simon was able to quickly implement his initial solution. He used Gadget’s custom routes to port over the serverless functions that generate SVG and PDF files. And instead of messing around with a CDN and worrying about file storage for images, Simon was able to use Gadget’s built-in file storage solution to handle uploaded logos.

Simon then extended his solution and used Gadget to manage and store the design model of the customized product. Without writing a single line of code, he was able to connect his app to Branded’s Shopify store, import Shopify’s Customer and Order data models, and automatically sync new order and customer data between his application and the Shopify store.

It was also easy for Simon to use Gadget Actions to run custom code triggered by Shopify’s <inline-code>orders/create<inline-code> webhook, allowing him to link the design model to a customer once an order was made and keep his app up to date with Branded’s Shopify store.

Gadget provides an environment that is performant, scalable, and secure, in addition to managing the deployment of the application. Simon didn’t need to spend time messing around in configuration files or adding boilerplate code. There was no time spent setting up Postgres to store the design model and data from Shopify, Gadget handled it automatically.

“Gadget abstracted all of that out. All we had to worry about was what business logic needs to happen. It’s been a dream.”
- Simon Barnes, Technical Director and Partner @ Alleyoop

Instead of spending time building out an API client in his frontend project, Simon was able to use the project-specific npm package built by Gadget to make requests to his app using the automatically generated CRUD API.

The Result

In under 500 lines of code, Simon was able to build the backend application required for his custom application so he could use his time perfecting the frontend experience. Branded’s customers now get previews of orders before they check out, enhancing their shopping experience and greatly increasing the odds of a sale. You can try it out yourself in Branded’s store.

Finishing the backend part of Branded’s app in a short amount of time means that Simon has time to tackle additional projects. He can look to expand his business beyond custom Shopify applications and dive into other types of application development. Learning, creating, deploying, and maintaining a backend and database stack comes with a high startup cost in terms of time and effort required. Using Gadget, Simon doesn’t have to worry about setting up, deploying or managing infrastructure. Instead of wasting cycles on boilerplate and busywork, he spends his time on data modelling, coding business logic, and other items that make his app special and unique.

The managed scalability of Gadget means that Simon won’t have to come back to the application as Branded’s demand and traffic grow. This frees up more time down the road and it becomes much easier to support an increased number of production applications.

Simon continues to build additional applications using Gadget, with 3 more apps planned for the near future.