Technical Test - Items Manager

View Demo

Table of Contents

1. Problem Statement
2. Solution
   • Assumptions
   • Built With
   • Features
3. Getting Started
   • Prerequisites
   • Development Server
   • Unit Tests
4. License
5. Contact

Problem Statement

You'll develop a single page application that provides the functionality defined by the needs of the following user:

As a user I want to have access to an Item Manager where I can search items given the following criteria:

• Title
• Description
• Price
• Email

Each item will have these fields and a picture.

When I perform a search that has results, I’d like to view a list of the items showing all the information. The app must provide me the ability to sort the listed items by title, description, price or email.

Also, I want to be able to have a favourite items list, so I must be able to select the items from the list and save them on my favourite list. The list should be displayed on a modal containing all those items showing only the picture and the title. The modal should be opened by clicking on a button displayed in some place on the page where it’s easily accessible. In the favourite modal, I want to be able to search by title and the possibility to remove the items from the favourite list without having to close the modal. I don’t want the favorite items to be preserved when I refresh the page.

The data that holds the items contains 20 items. The 20 items should NOT be displayed all at once. I’d like to see 5 items each time (with an initial load of 5 when the page is loaded), so some pagination method should be implemented to view the remaining items (clicking a button, with endless scroll...it’s up to you).

(back to top)

Solution

Assumptions

Following assumptions were made when building this POC (proof of concept).

• Provided S3 endpoint does not support server-side filtering therefore filtering would have to be done in memory.

Built With

This project uses the following set of frameworks & libraries:

• Angular
• Fuse.js
• Istanbul JS
• Jasmine
• Karma
• Less CSS
• NGXS
• TypeScript

Features

Responsive Design

85%+ Code Coverage

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Node JS
  • You can download and install the lastest version from the official website.
• Angular CLI
  • Run the following command in your console to install Angular CLI globally on your development machine.

  npm install -g @angular/cli

Development Server

1. Clone the repo

   git clone https://github.com/thehaseebahmed/ng-items-manager.git

2. Install NPM packages

   npm install

3. Start the dev server

   npm run start

Unit Tests

To execute the unit tests via Karma, run the following command.

npm run test

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Haseeb Ahmed - @thehaseebahmed - [email protected]

Project Link: https://github.com/thehaseebahmed/ng-items-manager.git

(back to top)