72 lines
3.1 KiB
Markdown
72 lines
3.1 KiB
Markdown
# 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.
|
|
|