- 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.REQUIREMENTS CHECKLIST
- Conventional commits via
husky hooks: Allows user to have a strict commit message philosophy - Show skeleton cards when loading more cards or waiting for search results
- Search: Implemented Fuzzy Search using
fuse.js - Component styling via
@Material-UI
This project was bootstrapped with Create React App.
npm install
OR
yarn
npm start
OR
yarn start
src: Top level folder with all the logic- component
GameCard: the card are populated in grid format from the API using this componentSkeletonCard: populates the skeleton card (alternate to loading spinner) for loading more content
constants/index: contains the constants and messages used in the componentsApp.js: contains the logic for using API to fetch cards, show Skeleton cards for 'Infinite scroll' for 20 cards at a time and fuzzy search usingfuse.js- App.css`: contains component styling so that the app can be viewed on different screen resolutions
- component