Trading Cards Showcase

This web app showcases trading cards using the following API: https://docs.magicthegathering.io/#api_v1cards_list.

App Functionality

Main components

• <ShowCase>: Responsible for fetching a paginated card list & managing state shared by <Filters>, <CardList>.
• <Filters>: Handles filtering logic and updates the API url based on filters for names and colors.
• <CardList>: Simple component, which displays a loading state, a list of <Card>s & and an error message, if given.
• <Card>: Displays the "front side" of the card by default with basic information. Handles the card click which will fetch card details and display them on the "back side".

Running & using the app

ℹ️ The following scripts must be run in the project directoy.

Prerequisites

To run this application make sure you have stable versions of Node.js 16.15.x and npm/yarn installed.

Run the app locally

• Run npm install to install all dependencies
• npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

Linting and Formatting

• Run npm run lint to check the code with eslint.
• Run npm run format to format with prettier.

Testing

• npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Generate the production build

• npm run build builds the app for production to the build folder.

Technologies used

This application uses:

• React
• Typescript
• Styled Components
• Testing Library for tests
• ESLint for linting
• Prettier for code formatting
• Husky for pre-commit code formatting hooks

...and was bootstrapped with Create React App.