Grotto Builders! is an online deck builder, deck explorer, and card explorer for the recently released small-time trading card game Grotto Beasts! created by Jerma985.

I have grown to love this game since I first received my Starter Kit in June, and have played it with my girlfriend almost every day. However, after some time we got tired of the starter decks and wanted to create our own from scratch. Since it is such a nich game with a small community, there were no websites or even official tools available to assist fans in designing a deck. Therefore, I knew I had to take this matter into my own hands!

I wanted to create something very user friendly and stylish, to match the tone of Grotto Beasts! and to help other fans of the game (and because I love designing cool web apps ;D). When designing the UI, I was inspired by the tried-and-true MTG deck builders (such as Moxfield); and when choosing the colour scheme and design language, I took inspiration from the official Grotto Beasts website branding and its card designs. I aimed for the design to be as clean and informative as possible, while focusing on looking modern, friendly, and colourful, without distracting the user. And of course, easily adaptible to mobile.

When designing the mobile version, I stuck with my clean and modern design language, and opted for using bottom navigations icons for the navbar that can be scrolled away, instead of a cluttered and boring traditional burger menu.

The logos used throughout the website are either Twitter emojis or from Hero Icons, save for the Card Icon and Deck Icon, which were designed by me.

✦ ✦ ✦

Besides looking very sleek and feeling very snappy, Grotto Builders! is packed with features that have been developed over time. The main pages of the website are:

• Card Explorer: for browsing and searching for every card in the game
• Deck Explorer: for exploring all official decks and all community-created decks
• Deck Info Page: detailed decklist info, with hand simulations and cool graphs
• Card Info Page: detailed info on a card and its effect
• Deck Builder: easily choose cards to add to your deck, and set your deck’s info

Some additional very cool features present in Grotto Builders! are:

• Instant and responsive search bars, with plenty of filters and sorting options to easily find what you’re looking for
• Deck remixer for copying an existing deck and making some changes, giviving credit to the original creator
• Exporting decklists to a text file
• Bookmarking your favourite decks
• User authentication with Discord, including automatically signing back in

For the technical side, Grotto Builders! is extremely snappy not only due to my hard work, but thanks to being built with SvelteKit. The backend database where all the card info, decklists, and user info is stored is powered by Pocketbase. Both the web app and the database are self-hosted by myself in a Linux VM powered by Linode.

✦ ✦ ✦

Grotto Builders! is a work in progress and being actively mantained by me, since it became a big part of this small community. User feedback and suggestions are taken into account and incorporated where possible. Stay tuned for new features and more updates!