Lessons Learned from Building My First Shopify App - A Developer's Journey

Ecommerce, shopping cart, light colors

Of course that this image was generated by ChatGPT

Building my first Shopify app was a journey filled with excitement, challenges, and much learning. My business partner and I had an idea for a referral SaaS designed to help customers easily create campaigns with AI. We decided to start with Shopify as a platform because it targets our audience and has a robust app ecosystem.

The Idea and Initial Motivation

The idea for our SaaS came from a desire to simplify the process of creating referral campaigns for customers. By leveraging AI, we aimed to make campaign creation as easy as possible. Shopify was the perfect platform to start with due to its extensive app ecosystem and our target audience already being there.

You can learn more about our app, Muromo, on Shopify’s app store.

Muromo Shopify App Screenshot

Initial Challenges

From the start, we faced several challenges. The first version we tried to develop didn’t use Remix, so we started with NodeJS and React. Among the issues we encountered was the lack of clear tutorials for using TypeScript and the unclear documentation from Shopify in many cases. Fortunately, we had much experience developing with JavaScript, ReactJS, and NodeJS, which allowed us to progress despite the difficulties.

Migrating to Remix

During the development process, Shopify announced Remix as the recommended way to build Admin apps on Shopify. We had already experimented with Remix before and knew the development experience was much better. We decided to migrate everything to Remix and refactor as necessary. Initially, it was a slow process, but it soon proved a great choice. The development experience improved significantly, and we could progress much faster.

Important Milestones

One of the most important milestones we achieved was fully developing the app and integrating ChatGPT to generate campaign texts and customer communication messages. Additionally, we integrated a theme app extension that allowed us to display a modal to users to sign up on the screen using Liquid, something we had never done before. Finally, go through the entire app approval process and run it on the store. When we received the approval email, we were over the moon. It was a moment of validation, proving that all our hard work had paid off, and it marked the official launch of our app on the Shopify store.

Meme men with open arms

Of course, we know that is only the beginning. We now have to sell it, provide support, and maintain it.

Problems and Solutions

During the development process, we encountered several challenges, from constant updates from Shopify and new APIs to outdated or undocumented features we needed. We had to resort to a lot of trial and error. Shopify forums and GitHub repositories were very helpful in solving many problems. Many things are undocumented or lack defined best practices, so we had to be practical and sometimes creative with our solutions.

Best Practices Adopted

We set up development, QA, and production environments from the beginning, allowing us to better divide testing and development tasks without waiting for each other. We included logs and Sentry in the app, which helped us detect errors faster. We followed Shopify’s guidelines, using Polaris components and their best practices for user experience. We tried to make the code as modular as possible, thinking about possibly developing other Shopify apps in the future. We adhered to industry development standards, and using TypeScript significantly improved code quality. We also kept packages as up-to-date as possible, fixing any issues immediately to avoid future problems.

Development environment diagram

Useful Resources

During development, Shopify community forums, Shopify’s GitHub repositories, development documentation, and VSCode extensions were beneficial. We also relied on Remix documentation, YouTube channels, and tutorials for specific issues.

I like to thank the developers who take the time to respond in forums or share their solutions and experiences on blogs or YouTube. That’s why I decided to create this blog.

Moving Forward

As I work on my second app, I plan to use this blog as documentation. This will help me keep track of decisions and solutions, ensuring everything is remembered. I intend to incorporate more testing for this project using tools like ViteTest, which I want to replicate in the first app. Additionally, I want to include internationalization from the start, making the app accessible to a broader audience. These steps should improve the quality and maintainability of both applications.

Advice for New Developers

For developers starting their first Shopify apps with TypeScript and Remix, I suggest having patience and not giving up. The community is there to help, and I know the internal Shopify developers are working hard to improve the platform. Read the documentation, dive into the code when you can’t find the answer, and constantly experiment without fear of breaking things or failing. Incorporate best practices from the beginning, like setting up separate environments for development, QA, and production. Use error tracking and logging tools, such as Sentry, and keep your packages updated. Lastly, don’t be afraid to ask the community for help and share your experiences to help others.

Conclusion

Building my first Shopify app taught me many valuable lessons, from handling technical challenges to leveraging community support. As I embark on developing my second app, I look forward to documenting the process and continuing to learn and grow. I hope my journey can provide insights and inspiration to other developers on a similar path. Let’s build something great together!

Resources

Here are some resources that I find helpful:

#Starting Out

Subscribe to my newsletter



One update per month. All the latest posts directly in your inbox.