Skip to content

Documentation

Jump to bottom
Harvindersingh Chavan edited this page Oct 6, 2020 · 6 revisions

ShopBridge

A simple web application to help track your Inventory

Application Overview

Mobile View

Tablet View

Desktop View

Components

Items Form

User can add Item name, Item description and Item price in the form. Optionally, adding Item image is also supported.

Inventory

User can view all the items in the Inventory as cards.

The cards layout will depend on screen resolution of the user device. Supported layouts are:

  • Single column (Mobile)
  • Two columns (Tablet)
  • Three columns (Desktop & larger)

The cards show two action buttons:

  • View: Opens the Item details page showing all the available item details including description
  • REMOVE: Removes the item from Inventory!

Frontend

This project was generated with Angular CLI version 8.1.2.

Most of the UI components are from Angular Material.

RxJS operators and concepts such as Observable are used to get data from API asynchronously.

Angular core concepts such as routing (parameterised) and services are also used.

Project Structure

Backend

This project uses mockAPI for REST APIs.

Schema for REST APIs

JSON Structure

// Mock Object
{
  "objectId": "1",
  "name": "Power Bank",
  "description": "For emergency Power",
  "price": "50",
  "id": 43,
  "image": null
}

API endpoints

  • GET /items Get all items in Inventory
  • GET /items/:id Get a specific item from Inventory
  • POST /items/:id Add / Update an item
  • DELETE /items/:id Remove a specific item from Inventory

Installation & Usage

git clone https://github.com/Hvinder/ShopBridge.git
cd ShopBridge
npm install
ng serve

Working Demo

https://hvinder.github.io/ShopBridge/inventory

Clone this wiki locally