Features include user authentication, user interfaces, API integrations, basic deck building and validation, card search page, contact page, and release notes structure. The toolbox includes: ReactJS, AWS, Express, Axios, MongoDB, and MTGJSON SDK. Hosting provided by Netlify and Heroku.
Version 0.5 was released on 01-24-2022. Subsequent patch release dates are below.
Table of Contents
- User Account and Authentication
- AWS Services
- Sign in/up, email verification, and password reset
- Home and User Portal, Deck, and Account Pages
- Application Programming Interface
- Save new deck to database
- Update current deck in database
- Delete current deck from database
- Clear all decks when user account has been deleted
- Search for cards and commanders
- Search for deck
- Load all decks for user
- Load all public decks
- Deck Technology
- Deck building
- Deck statistics and validation
- Card selector
- Commander selector
- Image selector
- Boards and cards
- Private and public decks
- Generic Card Search Page
- Current Bugs and Development Roadmap
- API and direct URL routing
- Examine and setup new production and development environments
- Expand and modify current card collection
- Develop a deck search page
- Deck voting and views on public decks
- Import decks from other sources
- Expand user account information
- Patch Notes 0.5.1
- View, New, and Edit Deck style enhancements
- Sorting card search results by name and set
- Updates to Card Selector for mobile functionality
- Deck count validation for supported formats
- Deck format validation
- Disclaimer information
- Patch Notes 0.5.2
- Deployed new development and production environments
- URL routing for deck pages
- Deck mobile styles adjusted for both mainboard and sideboard
- Added Web Manifest and Service Worker
- Patch Notes 0.5.3
- Authentication Updates
- Copy deck link feature added
- Card Search page functionality
- Navigation styles and functionality
- Overall card searching updates for selectorso
- Card validation updates
1. User Account and Authentication
a. AWS Services
User accounts, email verification, and user pools are all managed within AWS Cognito and IAM. The application is built with React and AWS Amplify with Reach Router directing the user through user-only content and public content across the site.
b. Sign in/up, email verification, and password reset
The application checks for user credentials within local storage, if none exists then the user is redirected the sign-in page. From there a user may input credentials that will be checked against the userpool, the service accepts or rejects the login attempt, confirms user has verified via email, then upon success you are routed to the application's user portal page or given an error to validate or credentials may be wrong. A sign-up page may be accessed across these pages as well as a password reset feature.
c. Home and User Portal, Deck, and Account Pages
There is a generic homepage for the website. Once logged in, the main 'homepage' is the User Portal page with more decks available for viewing. Only public decks are displayed on this page, each with a button to load the full decklist page.
Decklist pages are inherently public, but will not display a deck if an attempt to load the deck occurs with the URL. Currently outside URLs are not registering and will be part of the next major update, see below.
New Deck and Edit Deck pages are private and intended only for users who are logged into their respective accounts. An attempt to load these pages will redirect the user to login to the site. Once in, the deck building and editing process begins. A delete deck button is available on the edit deck page.
User Profile and Edit Profile pages work exactly like the New and Edit Deck pages. Currently we have limited user account features and this will be expanded upon in upcoming releases.
2. Application Programming Interface
a. Save new deck to database
The database is a document collection on MongoDB and accessed via custom API. First order of business was setting up a deck schema and saving the deck to the database. Each deck consists of the following fields: id, user, modificationDate, deckName, deckImg, description, format, commander, cards, and privacy. Commander returns null unless the format specifies to go through that information.
The cards field is an object array of mainboard and sideboard. Each card within the board has the following fields: id, multiverseid, name, count, image, set, setName, manaCost, cmc, identity, colors, supertypes, types, subtypes, text, flavor, printings, and legalities.
The API gathers form information from the New Deck page upon save and sends the data to be saved to the database. Upon successful save, the user is redirected to their Profile page and will see the new deck available to view and edit.
b. Update current deck in database
An edit button exists on each deck of the user's profile page. On the Edit Deck page, upon submitting the form data, a request to the API will be made to update the deck's data and reroute the user to the profile page. Only the current user who built the deck is allowed access to edit the deck and update the information.
c. Delete current deck from database
On the Edit Deck page, a warning disclaimer and delete button exist at the bottom of the right column. A disclaimer will appear before deleting the deck. Once accepted, the request will remove the deck from the database based on the unique ID parameter and verifying the current user made the request.
d. Clear all decks when user account has been deleted
A full account wipe was added to the API when the user accepts the disclaimer to delete their account from the Edit Profile page. The API will request that the database searches for all decks by the current user and removes them permanently.
e. Search for cards and commanders
In order to build a deck, the user must search for cards to input in either board or select as a commander. There is an API call to search for cards by name and return all results to their respective component in the Edit Deck page.
f. Search for deck
A generic call to search for a deck based on the unique ID each document entry has inthe database.
g. Load all decks for user
Once the user logs into their account and heads to the My Account / Profile page, the application will request all decks by that user and display them in alphabetical order.
h. Load all public decks
Once the user logs into their account and is redirected to the User Portal page, the application will request all decks that are public and display them in order by the latest modification date.
3. Deck Technology
a. Deck building
There are three main aspects to the lifecycle of the deck building process as it pertains to the application. First is adding it to the database, then viewing, editing, and finally deletion. The current fields on the edit deck page are all associated with the deck's document data within the database with the following fields: id, user, modificationDate, deckName, deckImg, description, format, commander, cards, and privacy.
Currently supported formats include: Standard, Pioneer, Modern, Legacy, Vintage, and Commander. Once these basics are ironed out with validation there will be more formats included. As for now, there are no partner features but that will be incorporated as well.
The companion feature was added and it detects one of the ten companions within your sideboard. If there is only one card of that type, it will automatically count as your companion.
b. Deck statistics and validation
Viewing the deck opens up other features we've added that include seeing the deck's mana curve, card type counts, count of cards within the deck, and the beginnings of validating the deck for legality in the specified format.
Initial validation includes: 60- and 100- card formats currently supported as well as having more or less than 15 cards within the sideboard. Commander card count over 1. The sideboard is disabled for Commander and future formats that do not support sideboards.
c. Card selector
The card selector is a major component that allows the user to request a list of cards that match the search criteria for a name of a card. The API returns cards with that name within the first 100 results provided by the MagicTheGathering.io API. This may need future adjustments to make sure we can access all cards in our search, similar to the full card search page. The response is then filtered for cards with a multiverseid provided by Wizards of the Coast. A match of the card name and the set it was printed in is built into the select list. An option may be chosen then added as a card. The information is then recorded into either the mainboard or sideboard.
d. Commander selector
Based off of the card selector, this component performs the same request but filters the response for legendary cards. This will need more focus and eventual expansion to include partners and further validation measures.
e. Image selector
The simplest of the selectors, this searches for cards and returns only cards with images provided by Wizards of the Coast with a multiverseid within their Gatherer database.
f. Boards and cards
There are two boards built as separate components in a tabular structure on the View Deck page, and an expanded list on the Edit Deck page. The primary objective was to make sure cards had all the proper data necessary to do a deep dive into deck validation.
Current card fields include: id, multiverseid, name, count, image, set, setName, manaCost, cmc, identity, colors, supertypes, types, subtypes, text, flavor, printings, and legalities.
g. Private and public decks
Decks have the ability to be either public or private. By default, the deck option is public on the New Deck page. A private deck will not appear on the application Home or User Portal pages. When viewing your deck there will be a notification that the current deck is private. All deck pages are currently inaccessible from the URL created. This is due to working with storing data locally and minimizing API calls to keep the application fast. This should be resolved in the next major update. See below for more details.
4. Generic Card Search Page
The first page built for the web application was the Card Search page. This utilizes the MagicTheGathering.io API directly and not through the SDK like the rest of the application. This will most likely be revisited after user feedback to better plan an approach to deliver all cards that should be available. Most cards that are not part of the Wizards of the Coast Gatherer do not have images associated with them in their database. It's a low priority to populate each individual image within our app so we will be revisiting a solution for the missing images. For now we have a generic card back to represent a missing image.
5. Current Bugs and Development Roadmap
a. API and direct URL routing
Currently the URLs generated for each deck only work within the application due to keeping lower API calls and storing the data locally. There will be an update to this and each deck will check for local storage, if none exists, we will call on the API to grab the deck data and display the page, but only if the deck is publicly accessible.
b. Examine and setup new production and development environments
In looking into what is necessary to bring public deck URLs to the application, there will be a new staging and production environments deployed to make the background work more seamless. All links will continue to work after this transition.
c. Expand and modify current card collection
Although every card with a unique multiverseid
is availble for deck building, currently all faces of cards are individualized and searchable as well as many cards without artwork. We will be working on modifying card searching and the way the API retrieves data to combine double-face cards and bring in other special printed cards currently not accessible in deck building.
d. Develop a deck search page
Simply put, there will be a new page that allows a user to search through all publicly accessible decks.
e. Deck voting and views on public decks
User engagement will slowly be added to the application. The first wave will include deck voting and total views of publicly accessible decks.
f. Import decks from other sources
A major addition will be importing decks from various sources. An API call will be made to take the user's submitted list, determine the format, find all necessary data, then return a response with a new deck list ready to save. We will be looking at all decklist exported formats and determine the best possible way to import and build a decklist that works within the database structure.
g. Expand user account information
The addition of more fields for user information will be added to the Profile and Edit Profile pages. This will be a stepping stone to introduce more user engagement tools in the future.
6. Patch Notes 0.5.1 — 01-27-2022
a. View, New, and Edit Deck style enhancements
All three pages were enhanced for mobile view and functionality. Removing account information and focusing on deck information only, features were made more prominent with adjustments to margins, padding, and spacing all around.
b. Sorting card search results by name and set
The API was updated to sort the card searches by set then alphabetical name of each card within the response data. The generic Search Cards page, Card Selector, Commander Selector, and Image Selector have all been updated with cleaner sorted results.
c. Updates to Card Selector for mobile functionality
The card selector was upgraded to an uneditable list of buttons. We will look into editing each entry manually and see what may be needed to call to the API and update the hidden card data and current board states.
d. Deck count validation for supported formats
Deck count validation has been implemented for 60- and 100-card formats that are currently supported. In doing so, the application is prepared to incorporate more formats once validation is complete for the base set of formats.
e. Deck format validation
Each card is now checked to match legality within the specific format of the deck built. We will be looking into an API call to update all decks within the database when banning and restriction announcements are released. Vintage required a special treatment to match the restricted cards in the list and make sure the count did not exceed 1 of that card.
f. Disclaimer information
Disclaimer information was updated to include the Wizards of the Coast Fan Content policy disclaimer and proper copyrights.
6. Patch Notes 0.5.2 — 01-30-2022
a. Deployed new development and production environments
New development and production environments were set up with unique variables to better control and smooth out future updates.
b. URL routing for deck pages
Publicly accessible deck pages are now able to load from their unique page URLs.
c. Deck mobile styles adjusted for both mainboard and sideboard
Styles and approach to the card selector were enhanced to provide a smoother deck building experience. A slight rework on approach was required to match desktop and mobile views.
d. Added Web Manifest and Service Worker
Progressive web application features were added for optimization.
6. Patch Notes 0.5.3 — 02-02-2022
a. Authentication updates
Cleaned up display and functionality issues for Sign In, Sign Up, Password Reset and Verify pages. Accounts can successfully register at all steps with a unique verification page if the original window is closed. There is a strict password reset requiring to stay on the page for confirmation and new password. Styles are now uniform to the rest of the site.
b. Copy deck link feature added
A new button was added to the Deck page allowing mobile app users to copy the URL for the specific deck page. This button only appears for publicly accessible decks.
c. Card Search page functionality
Revise functionality of the card search form and clean up unique styles of cards for results.
d. Navigation styles and functionality
Navigation links were updated and is prepared for adding Deck Search page. New styles applied and connected all pages to properly highlight navigation links.
e. Overall card searching updates for selectors
The Card, Commander, and Image Selector components have been updated to parse user search text and apply commas to the search. This allows a user to search for cards with less accuracy in the card name.
f. Card validation updates
A thorough check was completed on validating cards for decks based on format, count, and restrictions for special formats. Cards that have no legal status are now showing up correctly with error styles.