Inspiration

As Magic: The Gathering players, we know how expensive building new decks can become, especially when we already have growing collections of cards. It can be difficult to remember which cards we own, what they’re worth, and whether we actually need to buy more cards for our next deck. We created ManaSaver to help players make better use of their existing collections and spend less money while enjoying the game.

What it does

ManaSaver helps Magic: The Gathering players organize their card collections, track their collection’s value, and make more informed deckbuilding decisions. Players can add cards, distinguish between different printings and finishes, and view pricing information. By making their collections easier to manage, ManaSaver helps players get more value out of the cards they already own and avoid unnecessary purchases.

How we built it

We built ManaSaver using HTML, CSS, and JavaScript for the frontend, with Supabase handling authentication and our PostgreSQL database. We integrated the Scryfall API to retrieve Magic: The Gathering card information and pricing. A Supabase Edge Function refreshes card prices and records daily collection values, while Chart.js displays collection-value history. We deployed the website using GitHub Pages and GitHub Actions.

Challenges we ran into

One of our biggest challenges was handling different versions of the same Magic card. Cards can have multiple printings, sets, and finishes, each with a different price, so tracking cards by name alone was not enough. We had to redesign our database and pricing logic to distinguish between specific versions of cards. We also worked through challenges connecting our frontend to Supabase, protecting user-specific collection data, and deploying the website through GitHub Pages.

Accomplishments that we're proud of

We’re proud that ManaSaver grew from an idea into a working web application with user accounts, collection management, and card-pricing information. We implemented a database that tracks specific card printings and finishes, integrated collection-value tracking, and deployed a website that other players can access and try.

What we learned

Through ManaSaver, we gained hands-on experience building a full-stack application and connecting multiple technologies. We learned more about relational database design, Supabase Row Level Security, external API integration, serverless functions, and automated deployment. We also learned how important it is to design software around real user needs, especially when a seemingly simple feature becomes more complicated during development.

What's next for ManaSaver

We want to continue improving ManaSaver’s deckbuilding and financial tools. Future improvements could include more detailed historical price tracking, better collection analysis, and additional tools that identify which cards players already own when planning a new deck. Our long-term goal is to help Magic players build more decks while spending less money.

Built With

Share this project:

Updates

Submission history