Documentation

ShopBridge

A simple web application to help track your Inventory

Application Overview

Mobile View

Tablet View

Desktop View

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. Clicking on View opens the Item details page showing all the available item details including description. Clicking on REMOVE will delete 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.

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