Elder Scrolls Legends card explorer app

Project requirements

• 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 accommodates, 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.

Installation

This project requires:

1. Node.js ^14.0.0.
2. Yarn ^1.22.4.

yarn && yarn start

This command will install all required dependencies, start webpack-dev-server and automatically open http://localhost:8080/ in your browser.

NPM scripts

Decisions

• Use native fetch vs using 3rd party package, because no IE support is required.
• Use subsetted Inter variable font for performance reasons and greater design capabilities. Variable font browser support is really good, so there no reason to use static fonts fallback with @supports"">CSS @suppots at-rule for this project. The font was subsetted with the help of fonttools and was reduced from original 318KB to 31KB.
• Add sound effect on user interaction with use-sound hook. Lets the app communicate using 2 human senses instead of 1.
• Agressively cache .js and .mp3 files with Netlify and Webpack contenthash file names.
• Use @media/prefers-reduced-motion">prefers-reduced-motion CSS media feature in NoCardsFound component to avoid physical symptoms like nausea, dizziness, and malaise for certain users (requires system configuration on the user’s side).
• Use a responsive grid with 1, 2, and 4 cards per row to avoid half-empty rows. (Initial and all subsequent fetches load 20 cards).
• Add dark mode feature and save user selection in the LocalStorage to improve UX.
• Use Angular’s git commit message styleguide to introduce consistency in the git history.
• Use ESLint, Stylelint, and Prettier to avoid friction between developers.
• Use Browserlist to share target browsers between Stylelint and babel-preset-env.
• Use Netlify JavaScript minification instead of Webpack to avoid increasing local build time.
• Use Theme Specification for organizing CSS-in-JS.

TODO

As always the project in never done you just stop working on it. Here is a list of things, which will be nice to add:

• Add link preload for font file to give it the highest priority and load it ASAP.
• Add CI and test suites.
• Add SVG favicons for light and dark themes.
• Add manifest.json and ServiceWorker for the offline-first experience.
• Add sitemap.xml and robots.txt for better SEO.
• Add React prop-types to catch bugs early on.

Issues

• On iOS, after switching activities, sounds are not played anymore. There is an open Github issue.

Resources

• Elder Scrolls Legends access ESL API endpoints, which can get information on cards and sets.
• React is a JavaScript library for building user interfaces.
• Styled Components is a CSS-in-JS library.
• Webpack is a static module bundler for modern JavaScript applications.
• Babel is a JavaScript compiler.
• ESLint is a pluggable and configurable linter tool for identifying and reporting on code quality issues in JavaScript.
• Prettier is an opinionated code formatter for JavaScript and other languages.
• Stylelint is a mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
• Netlify is a web hosting infrastructure and automation platform.
• Yarn is a fast, reliable, and secure dependency management.
• Renovate is an automated dependency updates tool.
• Browserlist is a tool for sharing target browsers between different front-end tools.
• use-sound a React Hook for Sound Effects.

Lighthouse