Technical Test

App that fetches data from the Magic the Gathering API.

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
  • Development
  • Code structure
• CSS
• 3rd Party Libraries

---

Getting Started

Follow the next instructions to get a copy of the project up and running in your local machine.

Prerequisites

• Install Node.

Installation

Run the following commands:

git clone https://github.com/21Buttons/web-technical-test
npm install

Development

Run the following command:

npm run dev

Code Structure

This is the folder structure:

|
|-- pages/                      Next.js pages
|-- src                         Source code
|   |-- apis/                   APIs (magic)
|   |-- assets/                 Assets (images, fonts, etc...)
|   |-- components/             Dumb components
|   |-- containers/             Containers AKA smart components
|   |-- hoc/                    High order components
|   |-- scss/                   SCSS files using ITCSS
|   |-- store/                  Global store using Redux
|   `-- utils/                  Util libs
|-- .gitignore                  Files that GIT will ignore
|-- next.config.js              Next.js configuration file
|-- package.json                npm configuration and dependencies
|-- package-lock.json           npm fixed version dependencies
|-- README.md                   Your are looking at it
|-- webpack.junk.js             Fake webpack config for IDE settings

CSS

Our CSS architecture is using ITCSS. We are also using BEM Methodology for components.

3rd Party Libraries

In this project, we used three 3rd party libraries (axios, normalizr and swiper).

• axios: To fetch the data from the API.
• normalizr: It normalizes the data coming from the API.
• swiper: To show the item list in a mobile friendly way.