Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v8 or higher recommended)
  • npm (comes with Node.js)
  • PostgreSQL database
  • Git for cloning the repository
The application uses a PostgreSQL database to store deck and card data. Make sure PostgreSQL is installed and running on your system.

​
Installation and setup

1

Clone the repository

Clone the MTG Deck Builder repository to your local machine:
git clone <repository-url>
cd mtgDeckBuilder
2

Install dependencies

Install all required npm packages:
npm install
This installs:
  • React and Redux for the frontend
  • Express for the backend server
  • Sequelize for database ORM
  • Material-UI for the component library
  • Webpack for bundling
3

Configure the database

Set up your PostgreSQL database connection. The application uses Sequelize ORM and will automatically sync your database schema on startup.
Make sure your PostgreSQL server is running and accessible. The database configuration is typically found in the server/db/models directory.
4

Start the development server

Launch both the webpack dev server and the backend API:
npm run start:dev
This command:
  • Starts webpack in watch mode to bundle your React application
  • Runs nodemon to automatically restart the server on changes
  • Syncs the database schema
  • Starts the Express server on port 4000
You should see output indicating:
***************************
Listening on Port: 4000
5

Access the application

Open your browser and navigate to:
http://localhost:4000
You should see the MTG Deck Builder interface with:
  • A card search/selector at the top
  • An empty deck list table with columns for card names, quantities, and probability calculations
  • Column headers showing turns 1-8 for probability analysis

​
Building your first deck

Once the application is running, you can start building your deck:
1

Search for cards

Use the card search interface to find Magic cards you want to add to your deck. The application connects to card data to provide autocomplete suggestions.
2

Add cards to your deck

Select cards from the search results to add them to your deck. Each card will appear as a row in the deck list table.
3

Adjust quantities

Use the increment (+) and decrement (-) buttons to adjust card quantities:
  • Most cards are limited to 4 copies (per Magic rules)
  • Basic lands can be added without limit
  • The green (+) button adds a copy
  • The blue (-) button removes a copy
  • The red (×) button removes the card entirely
4

View probability analysis

As you build your deck, the columns labeled 1-8 show the probability of drawing each card by turns 1 through 8. This helps you:
  • Ensure you have enough mana sources to cast your spells on time
  • Identify if you need more or fewer lands of specific colors
  • Optimize your curve based on when you can reliably cast your spells
5

Preview cards

Click the eye icon next to any card to view its full image in a side drawer. This pulls the official card image from the Wizards of the Coast Gatherer database.
The probability calculations update in real-time as you modify your deck, giving you instant feedback on how changes affect your mana consistency.

​
Production build

To create a production build: 
npm run start
This runs the production server without webpack watch mode or nodemon auto-reload.

​
What’s next?

Now that you have MTG Deck Builder running, explore the features in depth:

Deck Building

Learn how to manage your deck with the interactive interface

Probability Calculator

Understand how the hypergeometric distribution analysis works

Mana Optimization

Master multi-color mana bases and fetch land strategies

API Reference

Integrate MTG Deck Builder into your own applications

Build docs developers (and LLMs) love

Get started for freeTalk to us