# Elder Scroll Display

## Synopsis 

The Highspot Coding Challenge.  The premise is to display a deck-builder
card catalog (such as Magic The Gathering, although in this case it's
Elder Scrolls) made available via a RESTful API.  The requirements as
set out in the Code Challenge are:

### Requirements Checklist

- ✓ Show results in a card grid format with the image prominently displayed.
- ✓ Each card displays: Image, Name, Text, Set Name, and Type. Additional fields are optional.
- ✓ Display a loading indicator when communicating with the API.
- ✓ Use a responsive design that accommod_es, at minimum, desktop and mobile.
- ✓ Initially, fetch and display the first 20 results returned by the API.
- ✓ As the user scrolls down the page, load and append additional cards using "infinite scroll."
- ✓ Retrieve additional pages of results as-needed but do not load more than 20 cards with
  each request.
- Allow the user to search for cards by Name.
- ✓ Use modern open-source web technologies to implement your solution (React, Backbone,
  Angular, Vue, Underscore, etc.).
- Provide instructions for prerequisites, installation, and application setup and build in a
  README file.

### Evaluation Criteria

- Are all stated requirements met?
- Does the application successfully build and run?
- Is the code well-organized and easy to understand?
- Does the code reflect contemporary web development techniques?
- Are functions and variables clearly named to express their purpose?
- Was the solution visually appealing?
- Were any scope decisions, TODO items, and known issues called out in
  code comments or the README file?

### Available Resources

- Endpoint: https://api.elderscrollslegends.io/v1/cards
- Documentation: https://docs.elderscrollslegends.io/,
  https://docs.elderscrollslegends.io/#api_v1cards_list

NOTE: The Elder Scrolls Legends API is a free, third-party service built
by an independent developer; it is not affiliated with Highspot, or with
the intellectual property owners of Elder Scrolls Legends. Please help
us use it responsibly.

## Initial impressions

This is a single-page application.  The 'search' is more of a filter,
sending the `?name=<param>` to the `/cards` API endpoint.  To meet the
requirements of the application, the `pageSize=20` argument must be
passed to the endpoint.

Startup seems to be relatively straightforward, and there won't be
anything fancy here: A flexbox will probably do just fine, as will a
progressive fill.  I'm inclined to _not_ use MaterialUI here; it's
probably overkill.  Just an application, with some nice CSS and a decent
cache.

For the search feature, we'll want to go with whatever the API offers,
but when clearing the search, let's go for a fast reload with no data
requirements.  That's provide some speed when going back to the basics.
I won't be using the ServiceWorker, as I don't feel confident enough in
my familiarity with it to make it matter.

Also, because I'm a *nerd*, I can't start without first picking out a
theme: white on black, with a paper texture from my design library
desaturated, darkened, and rendered a seamless tile, using the Google
'Marcellus' font, which kinda sorta looks Tolkeinesque.