Elder Scroll: Legends Coding Challenge

Don't you love homework?

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

The API includes this note:

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. Not so sure about the 'Morpheous' font for the title, though.

Requirements

The following are all you need to have installed in order to get started:

• NodeJS >= 10.0
• Yarn >= 1.18
• Git >= 2.0

Fetch the latest version from the git repository (this repository uses the new "not master" terminology, so it may not be immediately visible until you checkout the 'canon' branch), then install any prerequisites.

Assuming you have GNU Make installed:

$ git clone https://git.elfsternberg.com/elf/elder_scrolling
$ cd elder_scrolling
$ git checkout canon
$ make serve

If you do NOT have GNU Make installed:

$ git clone https://git.elfsternberg.com/elf/elder_scrolling
$ cd elder_scrolling
$ git checkout canon
$ yarn
$ yarn build
$ yarn run http-server build/

In both of the above, the server will be available on port 8080.

To run in dev mode:

$ git clone https://git.elfsternberg.com/elf/elder_scrolling
$ cd elder_scrolling
$ git checkout canon
$ yarn
$ yarn server

The server will be available on port 3000.

If you have docker installed, you may run the app this way:

$ git clone https://git.elfsternberg.com/elf/elder_scrolling
$ cd elder_scrolling
$ git checkout canon
$ docker build --tag elderscrolling:1.0 .
$ docker run --publish 8080:8080 --name elderscrolling --detach elderscrolling:1.0

The server will be available on port 8080. To stop the docker session, remove it from the server, and clean up your disk space afterward:

$ docker kill elderscrolling
$ docker rm elderscrolling
$ docker rmi elderscrolling:1.0

Note that this will not remove the node-alpine image on top of which elderscrolling is build.

Observations

This was a lot of fun. I don't know how "cheating" it was to use the react-grid-layout library, or react-modal, but I'm always glad to let the professionals do the work. Working "around" the way hooks really, really want to avoid expensive paints, in order to get the search feature working, was a lesson I know I've had before, but it always frustrates me when I come across it.

There are lot of other things that could be done with the app, but this is "good enough" for now without throwing something like Semantic or Material at it. It's possible to search on fields other than name, for example, and it would be nifty to be able to, say, see all the Unique cards, or all the Creature cards, and so forth. That wasn't in the requirements, and I've given you folks 8 hours already.

That may seem like a lot for such a minor project, but it's been awhile since I last worked with React at this level, and it's also been awhile since I got Emacs up and running with a proper JSX back-end. The LSP server is pretty good, but there are still some rough edges. Using prettier a lot, and setting the code into strict as much as possible, was as helpful as always.

I think I'm going to take apart the scrolling library I used. It's a native JS application with a React wrapper, rather than a full-on React app "written in React," and I feel that there are lessons inside it I could use.

If I had my druthers, I'd have done a two-stage build of the Dockerfile; one just build the thing, but the second would consist only of the 'build/' directory and a static web server that only does fileserving; one thing I dislike strongly about Dockerizing NodeJS (or any big scripting language, like Python or Ruby) is just how much attack surface area those languages carry with them.

But, like I said, I've given you folks enough time already.

LICENSE

The Elder Scrolls, The Elder Scrolls: Legends, ZeniMax, Bethesda, Bethesda Softworks and related logos are registered trademarks or trademarks of ZeniMax Media Inc. This product is not produced, endorsed, supported, or affiliated with ZeniMax Media Inc.

The coding challenge itself is probably copyright Highspot.

The fonts are covered by the SIL Open Font License. A copy of that license can be found in the ./public/fonts folder.

All original software, as well as the background images, contained in this repository is copyright Kenneth M. "Elf" Sternberg (c) 2020, and is licensed with the Mozilla Public License vers. 2.0. A copy of the license file is included in the root folder.