25 Nov 2020

Sneakerbot to E-Commerce Tool: Part 2 - Expansion

Page Overview

Starting in 2017, PhiloAIO was an early attempt of mine to create a sneakerbot to purchase highly coveted streetwear (clothing). Over time, I realized that botting shoes was not my calling. Despite leaving the sneaker community, I learned a valuable lesson: E-Commerce is the way of the future. This blog will document the changes I implemented to turn PhiloAIO into a multi-channel E-Commerce listing platform.

Transition to E-Commerce

E-Commerce has been a recurring theme in my software development career. My first “job” as a sneaker reseller required me to use Amazon, Ebay, StockX, and many more E-Commerce websites.



Transitioning from sneakerbotting to a multi-channel e-commerce platform is quite difficult. The first step is to create the base structure necessary. In my case, this would be designing and creating an adequate sidebar menu.

The sidebar design I used in my sneakerbot is very minimalistic and does not meet the necessary functions that are required by a complicated program like a multi-channel e-commerce listing tool.

The requirements for my sidebar were as follows:

  • Minimalistic, yet detailed
  • Users can use the sidebar to find any resource they want
  • Has to be aesthetically pleasing
  • Includes key functionality like messaging, settings, and helpful resources
  • Displays user’s name
  • Can switch between legacy and new sidebar

Following these requirements, I designed a sidebar that I believe fits all the criteria.

Building this sidebar required using Electron’s native chromium client as well as an Angular sidebar component. The folder structure in code looks something like this:

Next Steps

My next steps will be implementing a theme so users can choose between a professional theme or a cooler theme.

Sources

  1. Getting started with Angular Sidebar component. (n.d.). Retrieved December 09, 2020, from https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started/
  2. (n.d.). Retrieved December 09, 2020, from https://angular.io/api/core/Component
  3. BrowserWindow. (n.d.). Retrieved December 09, 2020, from https://www.electronjs.org/docs/api/browser-window

Tags: