SapphireMC
A custom website and store for a Minecraft community.
Project overview
SapphireMC is a Minecraft community offering a variety of game modes. The team reached out to me after seeing Spaugur's earlier work in the game-hosting space and asked for help with a problem they had been struggling with on their previous Tebex site. The main problem was simply speed. The site was built on a hosted Tebex solution with a purchased theme that hadn't been designed specifically around SapphireMC's needs. The experience was slow and clunky to use, which made the checkout process unnecessarily cumbersome. I've always believed that the faster and simpler an online store is to use, the more likely an interested customer is to complete the purchase. After looking at the options available, we decided to build a completely new site from scratch. The goal was to create a site that was as fast, simple and accessible as possible. All of the design and the structure of the checkout flow aimed to move interested customers from their first visit through the payment process with as little friction as possible.
My role
In this project I handled all the design and development of the site. The project involved a number of new challenges for me, including learning the Tebex Headless API — how it works and how it could be integrated with Next.js. I designed and built the entire site from scratch, including the homepage, the store, the checkout flow and other pages related to the community. On top of that I handled the setup and hosting of the site on Spaugur's own infrastructure. SEO, performance monitoring and speed optimization were also an important part of the project, since one of the main goals was for the site to be as fast as possible and give users a good, seamless experience. Finally, I went thoroughly through the entire checkout flow and tested different user flows to make sure the store, payments and Tebex integrations worked correctly before the site went live.
What I learned
I'll be the first to admit that I'm not a backend developer. I generally try to stick to frontend development, but on this project I decided to step a little outside my main area of expertise and challenge myself. After familiarizing myself with the APIs Tebex offers, I decided to use their Headless API solution and started working on integrating it with the site. I'll admit that work turned out to be far more complex than I had originally anticipated. Once the design and frontend development were well underway, work on the Tebex integration began. It soon became clear that not all the information I needed could be fetched directly from the API. So I used Claude Code as a helper tool to implement the API integrations and set up a simple database to hold the additional information that was missing. I also used Claude Code to review the structure of the API integrations and help me spot potential problems before they could turn into technical debt later. This was a challenging but also very enjoyable part of the project. I learned a lot about integrating with external systems, working with APIs and the importance of thinking carefully about structure and data flow before a solution grows.
What would I have done differently?
Unfortunately the project was done under considerable time pressure, and I would gladly have liked to spend more time on polish. There are various parts of the site that work well but are, in my opinion, not quite finished. I would have liked to add more micro-interactions, fine-tune the design in a few places and give myself more time to try different solutions and implementations. Despite that, I'm very happy with how the project turned out and how the site works today. The project achieved the main goals it set out with, and the result was a fast, simple and user-friendly site that solved the main problems the older solution had.