For a long time, I have had a very specific opinion about Minecraft web stores: most of them work, but they do not really feel connected to the server. Too often, you click a store link, land on a completely different-looking page, choose something, and hope you entered the right username.

When I started working on Skill Arena, I knew I did not want that feeling for the store. I wanted someone going from the server to store.sarp.gg to instantly recognize Skill Arena. Same atmosphere, same attention to details, and a store flow that does not make the player think too hard about what they are doing.

This was not just a case of putting a blue background behind Tebex packages. The store ended up becoming its own small project with player accounts, Java and Bedrock delivery choices, Serbian and English translations, voting, staff pages, purchase information, mobile navigation, and a lot of tiny things that are easy to ignore until they break.

The goal was never just to make it look nice

The visual direction came first because it gave the rest of the site a clear rule to follow. Skill Arena is Minecraft, but I did not want a generic grass-block theme or a page full of random Minecraft screenshots. I wanted it to feel more like a custom in-game menu: dark, clean, pixel-inspired, and mostly blue with enough contrast that the important actions are obvious.

The result is a UI built around a few things:

  • a dark navy background instead of pure black
  • bright blue for actions, links, and important states
  • pixel-style typography where it adds personality, without making every paragraph difficult to read
  • thin borders, square-ish panels, and small glow effects
  • coin artwork and player skins used as part of the interface instead of filler decoration

I like when a design has rules. Once the spacing, colors, card styles, and buttons were consistent, every new section became much easier to build. A vote card, package card, staff card, or recent-purchase card can all feel related without being identical.

Tebex is doing the important part, so I had to work with it properly

Tebex handles fulfilment, billing support, and refunds, so payment processing is not something I want to reinvent. The custom store still has to respect the way Tebex expects products, baskets, accounts, and checkout to work while keeping the polished Skill Arena layer around it.

There were a few details that mattered here:

  • package data still needs to come from the store setup, not from fake hard-coded products
  • the basket has to stay tied to the correct player
  • player account changes need to be clear so Coins do not go to the wrong person
  • legal text cannot just say whatever sounds nice; it has to match the actual Tebex checkout process
  • the Tebex legal footer needs to be visible and link to the correct Tebex pages

One of the first things I changed was the boring default feeling around package browsing. Instead of a flat list, each Coin package is presented like something you would actually choose in a game. Popular and discount labels are visible, the coins have a glow around them, and hovering a package gives the player a simple View or Pregledaj prompt depending on the selected language.

The stack behind the store

I built the store itself with Next.js, React, TypeScript, and Tailwind CSS. Next.js made sense here because the project needed a proper server layer as well as the interface: product data, baskets, checkout redirects, player lookups, recent purchases, voting data, and server-status checks should not all be exposed directly from the browser.

The main pieces behind the site are:

  • Next.js App Router for the web application, routes, SEO metadata, and server-side API endpoints
  • React for account selection, the cart, dialogs, language state, and interactive store UI
  • TypeScript to keep package, basket, account, and API data less chaotic while the project grows
  • Tailwind CSS for the custom pixel-inspired interface and responsive layouts
  • Tebex Headless API for the webstore, basket management, checkout, package data, and purchase information
  • Minecraft profile lookups for Java player data and avatar support
  • MC-Heads for compact player heads and Visage for staff skin busts
  • Minecraft-MP API for the voting leaderboard
  • mcstatus.io for the live Minecraft server status

The important part is that these services are not just thrown onto the page. The website wraps them in the same Skill Arena UI so the player is not bounced between five completely different-looking systems.

The account flow was the part I cared about most

The worst mistake a store can make is letting somebody pay successfully and then deliver the purchase to the wrong account. That is why the account area became more than just a username field.

Skill Arena supports both Java and Bedrock players, and they do not work exactly the same way. The store has separate choices, clear wording around the player name, and a locked dot prefix where it is required for Bedrock delivery. Players should not have to guess whether they need the prefix or a full Xbox gamertag.

The instructions say exactly what the player should do:

Enter only the name shown in game. The required . prefix is added automatically.

That one line prevents a surprising number of questions.

The selected account stays visible in the navigation with a skin head and platform, so players can see who will receive their Coins before opening the cart.

For copying the server IP, the button itself temporarily changes to IP Copied! or IP je kopiran! with a check mark instead of opening an annoying extra alert.

Java, Bedrock, Serbian, and English: small choices that multiply quickly

The store is bilingual, with Serbian and English available from the header. I did not want a half-translated page where the main heading is Serbian but the checkout states suddenly switch back to English, so I went through all of the player-facing text:

  • empty basket messages
  • login and logout labels
  • account selection
  • package buttons
  • recipient fields for gifts
  • basket reset messages
  • temporary store-unavailable states
  • vote and staff content
  • server and checkout notices

Some words needed a decision instead of a direct translation. I kept Java Edition and Bedrock Edition as names players already recognize, while translating the helpful text around them. Translations were not hard, just one of those polish jobs that has to be finished properly. Keeping the text in one translation system made both languages feel equally complete.

Player skins were more annoying than they should have been

Minecraft skins look simple until you try to load them consistently on a real site.

I wanted player heads for logged-in accounts, voters, and recent purchases, plus larger bust-style renders on the staff page. External skin renderers can fail, cache strangely, or disappear when someone refreshes at exactly the wrong time.

I tested different ways of loading skins and eventually settled on direct Minecraft skin rendering sources for the situations where they make sense:

  • heads for small account, vote, and purchase displays
  • bust renders for the staff page, where the character needs more presence
  • a reliable fallback skin for people whose skin cannot be found

The fallback matters. A missing image icon makes a finished site look broken immediately, especially next to a player’s name. I would rather show a consistent fallback than a browser error. This was probably one of the most annoying parts of the whole store: when skins do not load after refreshes, it is all you can see. It took a lot of testing to make the visual result feel stable instead of random.

The store grew into more than packages

Once the store itself started feeling right, it made sense to add the pages around it instead of leaving it as a single checkout screen.

Vote

The vote page is built in the same design language as the store. Right now it focuses on Minecraft-MP, shows the top five voters, and explains the monthly Coin rewards:

  • 1st place: 300 Coins
  • 2nd place: 250 Coins
  • 3rd place: 200 Coins
  • 4th place: 150 Coins
  • 5th place: 100 Coins

I wanted the page to give players one obvious action, show why voting matters, and make the reward system understandable without a wall of text.

Staff

The staff page is intentionally simple. It groups the team by rank in individual cards, from Helpers through Owners, and uses Minecraft skin busts without turning into a huge, heavy 3D showcase.

I also added a direct link from my own staff card to djinq.dev, which is a small thing, but it makes the pages feel connected instead of isolated.

Recent purchases

Recent purchases are another example of something that should be simple. The useful information is the player name and the package or Coin amount, not a complicated payment history. The cards stay compact and use the same player-head treatment as the rest of the website.

Mobile was not an afterthought

The desktop header has a lot going on: logo, Store, Vote, Staff, server IP, login, cart, and language switcher. It looks fine in one row on a large monitor, but that does not mean it will look fine on a phone. The mobile version needed its own proper menu, not just smaller text until everything barely fits. I also made sure moving between Store and Vote takes the player back to the top of the page; otherwise, a new page can open halfway down the screen and look like it failed to load.

Responsive work is not glamorous, but it is the difference between something that only looks good in screenshots and something people can actually use.

What was easiest and what was hardest

The visual system was the easiest part. Once the dark blue palette, pixel font, cards, and buttons were in place, every new part had a recognizable language. The hard part was making that work in real use:

  • making Tebex flows feel custom without breaking delivery
  • keeping Java and Bedrock account instructions clear
  • loading Minecraft skins reliably
  • making the large header work on phones
  • keeping legal and refund wording consistent with Tebex

None of those are as exciting as designing a shiny Coin package, but they are what decide whether a store is actually good.

What I learned from this project

The biggest lesson was that a custom web store is not just a design project or a payment page. It is part of the player experience: clear account selection, a trustworthy basket, consistent language, and visuals that belong to the server all matter.

There will always be more to add and improve, but store.sarp.gg already feels like an actual part of Skill Arena now, not a link that happens to sell Coins. And honestly, that was the whole point.