Portfolio Gagan Arora
All projects

Project · E-commerce Platform

store.prempackaging.com

A full-stack e-commerce platform and custom CMS for Prem Industries India Limited, selling packaging products online.

Visit the live store Ask me about it
Home page of store.prempackaging.com, with category navigation, search, cart and wishlist
The store's home page.

The project

Overview

store.prempackaging.com is Prem Industries India Limited's online store for packaging: corrugated boxes, paper bags, poly bags and its PACKPRO and ROLLABEL ranges, including boxes for sellers on marketplaces such as Amazon, Flipkart and Ajio.

I built it as a full-stack platform: the store customers shop on, the APIs behind it, and a custom CMS the team uses to manage catalog, inventory, orders and fulfilment.

The store's home page on a phone
The same page on a phone.

At a glance

What's Inside

What is where, and how it connects. Select any node to read more about it.

The project

store.prempackaging.com

A full-stack e-commerce platform for Prem Industries India Limited: the store customers shop on, the APIs and payments underneath, and the custom CMS the team runs it from.

  1. store.prempackaging.com · Part 1 of 3

    For customers

    The shop itself: finding a product, choosing a size and checking out, plus enquiries for custom packaging.

    • store.prempackaging.com · For customers

      Catalogue and search

      Customers browse packaging by category, or search for a product.

      • Categories include corrugated boxes, paper bags and poly bags, plus the PACKPRO and ROLLABEL ranges.
      • Results can be sorted.
      • Boxes are also listed for sellers on Amazon, Flipkart and Ajio.
      Leads to
      Size filters

    • store.prempackaging.com · For customers

      Size filters

      Boxes are filtered by length, breadth and height.

      • Sizes switch between inches and millimetres.
      • A brand filter narrows the list further.
      Comes after
      Catalogue and search

    • store.prempackaging.com · For customers

      Cart and checkout

      A product page shows the pack size, stock status and quantity before it goes in the cart.

      • Products can also be saved to a wishlist.
      • A promo code is applied at checkout.
      • Customers sign up, sign in and follow their past orders.
      Comes after
      Size filters
      Leads to
      Payments

    • store.prempackaging.com · For customers

      Custom orders

      For packaging that is not in the catalogue, an enquiry form takes the details.

      • It asks for the company, product category, minimum order quantity and contact details.

  2. store.prempackaging.com · Part 2 of 3

    Under the hood

    What the shop runs on: payments, one back end, and hosting.

    • store.prempackaging.com · Under the hood

      Payments

      Payments run through Razorpay, which reports back through its webhooks.

      Comes after
      Cart and checkout
      Leads to
      One back end
      Built with
      Razorpay Webhooks

    • store.prempackaging.com · Under the hood

      One back end

      Node.js and Express REST APIs serve both the store customers use and the dashboard the team uses.

      Comes after
      Payments
      Built with
      Node.js / Express REST APIs

    • store.prempackaging.com · Under the hood

      Hosting

      The platform runs on AWS, using EC2 and Amplify.

      Built with
      AWS EC2 & Amplify

  3. store.prempackaging.com · Part 3 of 3

    For the team

    What the team works in: a custom CMS for orders, fulfilment, catalog and inventory.

    • store.prempackaging.com · For the team

      Orders and fulfilment

      Orders reach the team in the admin dashboard, where they are managed through to fulfilment.

      Comes after
      One back end
      Built with
      Custom CMS

    • store.prempackaging.com · For the team

      Catalog and inventory

      The team manages the catalog and its inventory in the same custom CMS.

      Comes after
      Orders and fulfilment
      Built with
      Custom CMS

    • store.prempackaging.com · For the team

      Admin dashboard

      The CMS is a custom admin dashboard, built with React.

      Built with
      React
The store as a graph: the platform, its three parts, and what each part holds. Lines show what belongs where; select a node to see what it leads to.

Case study

The Story

Problem

Prem Industries India Limited sells packaging: corrugated boxes, paper bags, poly bags and its PACKPRO and ROLLABEL ranges. Its store has two sides: what customers shop on, and what the team uses to manage catalog, inventory, orders and fulfilment.

Solution

A full-stack platform: the storefront, the Node.js and Express APIs behind it, and a custom CMS for the team, as a React admin dashboard.

Technical decisions

  • One Express back end serves both the store and the admin dashboard.
  • Payments run through Razorpay and are reported back through its webhooks.
  • Hosted on AWS, using EC2 and Amplify.

Outcome

Live at store.prempackaging.com, where customers browse by category, filter boxes by size in inches or millimetres, check stock, apply a promo code and check out.

The platform

What I Built

  • The storefront

    The product catalogue, cart and checkout flows that customers use to buy packaging online.

  • A custom CMS

    A React admin dashboard for the team to manage catalog, inventory, orders and fulfilment.

  • REST APIs

    Node.js and Express APIs that the platform runs on.

  • Payments

    Razorpay, integrated through its webhooks.

  • Deployment

    Deployed and running on AWS EC2 and Amplify.

Architecture

How It Fits Together

Front ends

Storefront

Where customers browse, fill a cart and check out.

Admin dashboard

The team's custom CMS, built with React.

API

Node.js / Express REST APIs

One back end serving the store and the dashboard.

Behind the API

Store data

Catalog, inventory, orders and fulfilment.

Razorpay

Payments, reported back through webhooks.

Hosted on AWS, using EC2 and Amplify.

In production

On The Live Store

Open the store
Corrugated boxes category: 20 of 55 results, a size filter in inches or millimetres, and product cards with prices and discounts
A category page: sorting, a size filter in inches or millimetres, and discounted prices.
Product page for a corrugated box, with price, pack size, stock status, quantity, add to cart and wishlist
A product page: pack size, stock status, quantity, add to cart and wishlist.
Custom packaging enquiry form asking for company, product category, minimum order quantity and contact details
The enquiry form for custom packaging orders.

What a customer can do today

  • Browse by category, sort the results and search for a product.
  • Filter boxes by length, breadth and height, in inches or millimetres, and by brand.
  • Choose a pack size, check stock, and add to the cart or a wishlist.
  • Sign up, sign in and follow past orders.
  • Apply a promo code at checkout.
  • Send an enquiry for custom packaging.

These screens are from the public store. The admin dashboard and the source code belong to the company and are not public.

Want to know more about this build?

I'm glad to walk through how the catalog, orders and payments work behind the scenes.

Get in touch All projects