StockKeeper App

App to track stock and add new stock entries, code test for ShopKeep application.

Introduction

This app is a basic stock keeping system, as built for a code test. It pulls data from a remote json file in lieu of a server and uses this to populate a list of stock items. The system allows the user to add a new stock item to the list and to edit or delete any existing record. These actions are not persisted on refresh as they are not backed by a server-side solution.

To Build

To build the project run npm install inside the project folder to pull all of the necessary packages, and then run npm run build from the command line in the same folder. This will build the scss files into css files and will combine and minify the JS into one bundled file. It also loads required html files as strings for use as templates inside the JS and minifies any images

To Run

To run the project run npm run serve in the command line and then visit the appropriate address (typically localhost:8080) to view the build.

Assumptions/choices made

• The forms are built with Angular Material styling simply to provide a clean user interface without needing to spend time on design choices for this tech test.

• The existing items are provided with unique IDs, any new items when POSTed would have a new ID generated by the server which would be send back with the rest of the item's data on a successful request.

• While some parts of the site are responsive, the choice to use a table for displaying data means that responsiveness on small mobile screens suffers. To help prevent this the description of items is hiddden on small screens.

Further improvements/notes

• Items could have a quantity field to prevent large amounts of duplicates in the system and to keep the data at a reasonable size.

• Pagination could be added to the table to prevent large amounts of scrolling and large rendered pages

• Unit tests would be written to check the actions and the rendering of the app

• Improved accessibility would be added to the system such as aria-live tags to announce when new rows are added to the table or existing items are updated or deleted

• While there is little static content in the build, some further progressive enhancement to prevent layout jumps would be a good improvement

• With a server properly set up, a directive to display the server's exact error messages on the forms in cause of a failed post would be a benefit for troubleshooting