Shopify-Summer2022-Challenge

Build an inventory tracking web application for a logistics company with the following features

• Basic CRUD Functionality. You should be able to:

  • Create inventory items
  • Edit Them
  • Delete Them
  • View a list of them

• Along with one additional feature:

  • Allow image uploads AND store image with generated thumbnails

For a video demonstration visit

• Youtube Video

Table of Contents

• Installations
• CRUD Functionality
• Images
• Future Features
• Note For Shopify Developers
• Contact Me

Installations

• First create a Firebase Project
• Go to your Firebase project Dashboard and click on storage in the build tab. Once you have initialized your firebase storage, inside the storage menu there will be a tab called Rules, where you would have to change the following line:

 allow read, write: if request.auth != null;

to

 allow read, write: if request.auth == null;

• Generate an serviceAccountkey for your firebase project. Go to your Firebase project -> Project Settings -> Service Accounts and download the firebase SDK by clicking Generate New Private Key button
• Rename the file to serviceAccountKey.json and put it in the root folder. The file will look like this

 {
  "type": ,
  "project_id": ,
  "private_key_id": ,
  "private_key": ,
  "client_email": ,
  "client_id": ,
  "auth_uri": ,
  "token_uri": ,
  "auth_provider_x509_cert_url": ,
  "client_x509_cert_url": 
}

• Create a .env file and enter your create a variable called BUCKET_URL and store your firebase bucket url

  BUCKET_URL=YOUR_BUCKET_URL

• To install all the dependencies run

npm i

• Please also run this command

brew install GraphicsMagick

How to Run it

• To run the application, start up your terminal /command prompt ,and go to the project folder and then run the following command

node index.js

Features

CRUD Functionality

• All the inventry items are stored in the Firebase Database

• Create inventory items : POST {/api/inventory/add}

  • Sample body request:

  {
     "item" : "sanitizer",
     "qunatity" : 4
  }
  

  • Sample Postman Request:

• View inventory : GET {/api/inventory/view}

  • Sample Postman Request:

• Edit inventory item : PUT {/api/inventory/edit}

  • Sample body request:

  {
     "item" : "sanitizer",
     "qunatity" : 9
  }
  

  • Sample Postman Request:

• Delete inventory item : DELETE {/api/inventory/delete/$item_name}

  • In the request url replace $item_name with the item you want to delete from the inventory
  • Sample Request:

Images

• Once images are uploaded, a thumbnail is generated which is then stored in the Firebase Storage that can be later downloaded using the download url genrated by Firebase

• Upload Image and store the generated thumnbnail: POST {/api/image/upload}

  • Sample body request:

  {
     "file" : test2.png
  }
  

  • Sample Postamn Request:

• Image Download : GET {/api/images/download}

  • The file's download url is generated using firebase
  • Security during download:
    • The download url is an unique url generated by firebase
    • Since we have made some chnages in the security rules of the firesbase storage,any body for now can download the images
  • Sample body request:

  {
     "imageName" : test2.png
  }
  

  • Sample Postman Request:

Future Features

• Make the UI interface for the app
• Update the create inventory request so that it accepts images as well.

Note for Shopify Developers

• If required I will migrate to aws or gcp in the future releases.
• Currently the create inventory request only accepts two body parameters which are item name and quantity, if required i can update it and store more metadata such as expirty date, product_condition,shipment date,etc

Contact Me

Email : pritish.panda@mail.utoronto.ca