I've implemented a Cards/Card interface, but it's heavy and direct,
with absolutely not a care in the world about how much memory your
browser can give me. It only moves forward in time, and accumulates as
it goes. The React is brutal and heavy, but for a prototype, eh... it's
a prototype.
I'm a firm believer in prototypes.
Criticism: "Cards" is doing too much, and not enough. It would make
more sense to have a moving window, showing no more than what it would
take to show the user what is expected at that moment, with the ability
to load high and low, keeping only what the user is _looking at_ in the
DOM tree.
Proposal: Cards needs a CardCollection proxy object, which the Cards view
object (personal convention: TSX files are named for what they show,
semantically; TS files may be suffixed with "Model" or "Collection",
a'la Backbone, to seperate them from the views, if needed; "Model"
objects are very rarely needed) taps it as the user moves up and down;
the IntersectionObserver tool would be pretty good for this; and if the
proxy actually _cached_ the fields it had already seen, it wouldn't be
slow at all.
The proxy object could also support the search feature by keeping two
collections: one of the "whole" set, and one of the "last search" set;
the proxy could swap between them as needed.
Enhancement: Well, it could use a "zoom" feature with a nice overlay.
It might even be lovely to have a second page with all the things I
haven't shown, like attributes, subtype, rarity (not, not the pony),
or keywords.
Enhancement: It is possible to search based on set, attributes, and so
forth, so a sidebar with those as filters would also be kinda cool.