This project was bootstrapped with Create React App.

TS-Scryfall

A rebuild of Scryfall.com, using TypeScript, React, and Redux to build on top of Scryfall's API.

Table of Contents

• Baseline Features
• Additional Features
  • Deck Building
• Missing Pieces

Baseline Features

• Card Results page
  • Display of cards in search results
    • Image
    • Pricelist
    • Full
  • Sorting cards
  • Paging through results
• Card Details page
  • Card Image
  • Card Details
  • Card Printings (see Missing Pieces)
  • Toolbox
  • Purchase Links
  • MTGO Purchase Links
  • Copy-Paste
  • Notes and rules (see Missing Pieces)
• Header card search
• Advanced search page
  • Card Name
  • Oracle Text with symbols
  • Type Line with partial matching
  • Colors
  • Mana Cost with symbols
  • Stats
  • Formats
  • Commander
  • Sets and Blocks
  • Rarity
  • Criteria
  • Prices
  • Artist
  • Flavor Text
  • Lore Finder
  • Preferences
• Syntax reference page
• Set listing page
  • Set name and symbol
  • Display sub-sets of a set
  • Set block
  • Number of cards in a set
  • Release date
  • Sorting
• Set Details page
  • Set Header (see Missing Pieces)
  • Display of cards in set
    • Image
    • Pricelist
    • Full
  • Sorting cards
• Random card page
• Header search functionality

Additional Features

Deck Building

To get a better feel of Redux and state management, I am working on functionality to create decks. This will replace Scryfall's "Saved Cards" feature, as this is just a more advanced form of it.

Missing Pieces

The following pieces of the original Scryfall site aren't in TS-Scryfall:

• Notes and rules information for individual cards

  • Scryfall's API doesn't return the notes and rules information when requesting a card via /cards/:setCode/:collectorNumber

• Listing out different prints of a card on card prints sidebar

  • Scryfall's API doesn't give a list of different prints for a card when searching. In order to get this list, we'd have to do a secondary query for each card.

• SVG images for some sets

  • Scryfall uses SVG paths to display different set symbols. There were two options to have this functionality on TS-Scryfall: keep a lookup of the set code and the path value or link to an image on Scryfall by using the set code. The former would need to be updated every time a set was given a set symbol and the latter would have broken images for some set codes (e.g. TSB, some promo sets). Because of how small this issue is to me, I opted for the latter.