I picked up Old School Magic in 2017, after a long hiatus from the game, and became a proud member of the Sisters of the Flame crew out of New York in 2018. In early 2019, I started developing MagicOS.co, an online collection management and brewing app for Old School Magic. I had been using other Magic collection management tools, but found several issues with them:

• They presented your collection using text and tables, neglecting the visual appeal that (old) cards have
• They worked well either for collection management or deck brewing, but provided no or only constrained capabilities in the other discipline
• They did not reflect what cards you have in your collection when visualizing the decks you brewed
• They worked badly on mobile devices, which is an issue for me (I have a very long commute...)

So I decided to build my own app to address these perceived shortcomings, and MagicOS.co is the result of that. In this post, I lay out some of the design decisions I made.

Collection Management

The collection management capabilities of MagicOS.co evolve around the idea of visualizing your cards. "Stacks" show the copies of a card you own, being aware of the rarity of different printings. I.e., the borders in the stacks are sorted to show oldest printings first:

Stack of Animate Dead, reflecting different printings

In the above example, the three dots on top of the stack indicate that you own more than 4 copies. Clicking on a stack shows details on every copy of that card you own and allows you to alter information like the card's condition, acquisition cost, or acquisition date:

Card details of Animate Dead

Using stacks, you get a nice visualization of your collection, which can be sorted by different criteria (in the below screenshot, the collection is sorted by the card stack's dollar value):

A collection

As you see from the above screenshot, MagicOS.co shows some basic statistics on top of your collection, including counts of cards and copies, as well as the collection value. Card values are based daily updated market prices from TCGplayer. Card conditions are reflected in these values, following Cardsphere's condition guide, i.e., slightly played (SP) cards are valued at 90%, moderately played (MP) cards at 75%, and heavily played (HP) cards at 60% of the original near mint (NM) TCGplayer market price.

Clicking the symbol next to the card counts reveals some more detailed statistics on your collection, including set completions:

Statistics about your collection

Finally, the search bar on top of the collection can be used to filter the collection by card names, and to search for cards to add to your collection. Left to the search bar, the filter symbol allows to filter which cards to display based on sets, card types, card colors, or a combination thereof:

Filter your collection view

Deck Brewing

Deck brewing in MagicOS.co shares some of the features I like in other apps, for example ManaStack.com. One important difference is that the printings shown in decks reflect the versions of card in your collection, or fall back to the oldest printing. Consider the following screenshot, where the printings of Animate Dead and Triskelion reflect the cards in my collection:

Deck, laid out by CMC

As you add / remove cards to / from your collection, decks immediately reflect these changes. Other relations between your collection and decks is that you can sort cards in your collection based on how many decks you use them in. This may help you identify barely used cards that could go up for trade... Also, you can add cards from within the collection view to your decks.

Decks lay out cards based on card colors, convereted mana cost, or card types. Some details differ from other apps, though, for example that spells with "X" in the casting cost are grouped separately.

The bar on top of the deck shows some basic statistics about the deck, it's validity in different formats (currently checking Swedish, EC, and Atlantic rules) considering also the printings in your collection (I am working towards n00bcon ~2030), and how many cards in the deck are currently not in your collection (showing, on demand, affiliate links to TCGplayer).

Clicking on the symbol next to the card counts reveals deck statistics that show distributions of card colors, converted mana cost, mana symbols (e.g., how many times the blue mana symbol appears across cards in the main board), and sources (e.g., how many cards produce mana of a certain color - considering special cases like City of Brass, Black Lotus, or Felwar Stone):

Statistics on your deck

Finally, MagicOS.co provides some playtesting / goldfishing capabilities. However, this feature is reserved for Patreons...

Playtesting a deck

Pricing

I spent a lot of effort building MagicOS.co, and honestly considered making it a paid service at first. However, I would rather have more happy users than trying to make a buck off of it. That's why MagicOS.co is free to use.

However, I have running costs for the domain and for using the Google service to serve the app and persist user data (see "Technology" section). I thus decided to create a Patreon page, and hope to eventually receive enough from that to cover these costs (I can't name exact numbers as many of the costs like bandwidth and database usage depend on the number of users and how they use the app). In addition to Patreon, the app includes TCGplayer affiliate links for when you try to complete a deck (see above).

I decided (for now) to give a small incentive for people to become MagicOS.co Patreons, by making the playtesting / goldfishing ability only available for them. Let's see how that works out.

Technology

If anybody is interested, here are some details about the technology used to build MagicOS.co.

The application is a single-page app written in TypeScript and relying on React. All routing is done within that single page, relying on the Reach Router. That means MagicOS.co is basically serverless, as the single HTML page, all JavaScript, and the card images are statically served from Google's Cloud.

One of the beautiful things about Old School Magic (from a technology point-of-view) is the limited, fixed card pool, which allows the data about cards to be bundled with the application logic. In consequence, user data (collection, decks) consists merely of references to cards, making network traffic after the initial pageload super-lightweight. MagicOS.co stores data in Google's Firestore database as-a-service. Relying on its real-time capabilities, changes to your collection or decks are instantly synced across devices, without having to reload the page. Furthermore, Firestore provides some offline-capabilities, so that the app also functions when the network is shaky (everytime I am in the tunnel out of Grand Central Station...). Being serverless, MagicOS.co interacts with the database directly.

MagicOS.co stores card pricing data in Google's Cloud Storage service, and fetches it upon the initial pageload. Once a day, a Cloud Function updates that data.

That's all. I'd be happy if you want to give MagicOS.co a try, provide feedback to me (see my contact details on this page or via contact@magicos.co), or if you even want to consider becoming a Patreon.

Magic: the Gathering™ and its respective properties references are © Wizards of the Coast.