INVENTORY SYSTEM APPLICATION

TECHNOLOGIES

BACKENDphp logo
DATABASEmysql logo
FRONTENDjquery logo
STYLINGCSS
MARKUPHTML 5
Inventory System image

DEVELOPMENT

FRAMEWORK PROPRIETARY
DESIGN PATTERN MVC
TEMPLATE ENGINE NO

This application is a full inventory product system made custom specifically for the company. The product system allows employees to display their products and have customers add their products to a shopping cart. Company employees added their inventory in the backend for their items to be displayed in the frontend. This integrated with the company's custom content management system, and custom shopping cart.

The backend system was responsible for:

  1. Create an item.
  2. Add pricing for an item, including multiple sizes.
  3. Specify if an item is out of stock, if so display to user and prevent ordering.
  4. Specifiy if an item is active or inactive.
  5. Add short and long descriptions for an item.
  6. Add Item images - both thumbnail and large image.
  7. Add custom video for each item (if needed).
  8. Grouping - set a specific item to a specific user defined group.
  9. Custom Sorting. Sort by SKU or by group.

The frontend system was responsible for:

  1. Display products by group.
  2. Display price, quantity and sizes available.
  3. Integrate adding item with custom shopping cart.
  4. Display thumbnail image and short description.
  5. Display large image and long description.

BACK

 INVENTORY SYSTEM DETAILS

 PRODUCT DISPLAY

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Products displayed
  •  Display item SKU
  •  Display item description and image
  •  Display item size and price

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

The products chosen are displayed to the customer.

Back to top of web development portfolio TOP

 PRODUCT CATEGORIES

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  View product categories

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

The customer can select products from a list of product categories that satisfy what they're looking for.

Back to top of web development portfolio TOP

 PRODUCT GROUPS

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  View products belonging to a specific group

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

The customer can choose all products based off of the group or collection chosen. For example, customers could shop according to the category "shampoos", but also shop according to the group "like it curly" or collection "concept vert". The "like it curly" group or "concept vert collection" could contain shampoos for curly hair, along with any other category of products related curly hair or products related to the collection.

Back to top of web development portfolio TOP

 PRODUCT DESCRIPTION

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  View each product description
  •  View each product image

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

The customer always has the ability to view the product description and product image without navigating away from the page.

Back to top of web development portfolio TOP

 PRODUCT INGREDIENTS

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Display product ingredients

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

Displays the product's ingredients to the user without the user having to navigate away from the page.

Back to top of web development portfolio TOP

 PRODUCT SIZES

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Display product sizes available

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

Each product's size is displayed to the user.

Back to top of web development portfolio TOP

 OUT OF STOCK

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Display product sizes currently out of stock

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

Display to the user which size is out of stock, with a backend option to display when the product will be back in stock.

Back to top of web development portfolio TOP

 PRODUCT ADDED

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Choose quantity to add
  •  Add product to cart

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

The user can add an item and valid quantity of the item to their shopping cart.

Back to top of web development portfolio TOP

 PRODUCT VIDEO

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  View video corresponding to product group

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

The customer has the ability to watch a product's video right then and there without navigating away from the page. This simple yet necessary ability decreases failed conversions.

Back to top of web development portfolio TOP

 INVALID QUANTITY

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Quantity Validation
  •  Output error to user

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

Output error to customer when invalid quantity type is added to the cart.

Back to top of web development portfolio TOP

 PRODUCT PRICES

Detail Image of Portfolio item Inventory System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Display product prices

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND-

Each product's price per size is clearly displayed.

Back to top of web development portfolio TOP