DEV Community

Cover image for Devcycle Commerce - Live Sale and Simulation
Abdul Samad
Abdul Samad Subscriber

Posted on • Edited on

Devcycle Commerce - Live Sale and Simulation

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

I had the aspiration to build an application with a genuine use-case of feature flags rather than a replacement of backend. This application is a theoratical blend of various services.

The first-person view is of a CEO/Sales-Admin of a medium size fashion startup who are organising a single day sale of, say, New Year Eve. The company has made presence in around 6-7 countries and planning to have the sale in each of them on the specified day.

The application has overall 4 components, the frontend and backend serve their usual purpose, while a dashboard is plugged with them, that gets data in the form of metrics, clicks, usage and other terms of the sales data world. The dashboard is supposed to be used by the Sales Admin of the company who can then use the various features of dashboard to make informed decision about the correct flags for the application. A simulation mimicking the same is present on dashboard.

A schedule is created on the dashboard based on timezones of various countries to activate the sale variable only when the eve arrives in their timezones.

For the countries that now have an active sale, various actions can be performed from the dashboard based on insights and metrics.

I have deployed the website, with different combinations of variations in different country. I have also deployed the dashboard separately.

Use Cases

For ex, lets say company get the complaint that the experimental chatbot is using rude language. The admin can then toggle the chatbot variable off.

Or The products being recommended on recommend page are not being picked in cart and even leading to mid-process abandonment, then recommend-page variable can be turned off.

Suppose, that after reaching cart (any layout - sheet or page), there is high cart abandonment due to high total cost, then the admin can increase the shipping-waiver level that will be utilized on both frontend (to display the promotional banner of waiver) and backend (to calculate the discount on shipping).

There is the chance to have different variations for different countries based on historical metrics and one of the benefits of the data structures that I have used to store and track the state of devcycle.

Feature Flags

The application consists a total of 5 features and 7 variables.

The variables are as follows and affect specific parts of the UI and backend

  1. sale-status (frontend, backend) states whether sale is active in the current user region. A prerequisite for other flags.
  2. sort-strategy (backend) variable contains the strategy for sorting the categories order on home page and the order of products in them. For ex. "profit" strategy would display first the category and products with maximum margins to the company.
  3. recommend-strategy (backend) variable also has the same values of strategies but it is used when recommending products to the user on recommend page. For ex. "stock" would mean that encourage the user to buy overstocked items. recommend-strategy and sort-strategy are part of same feature with variations such as profit-aggressive and stock-aware.
  4. chatbot (frontend) variable toggles an experimental ai chatbot on the website, developed just-in-time for the sale.
  5. cart-page (frontend) variable toggles the new experiemntal cart layout which involves a dedicated cart page rather than currently-used sidesheet.
  6. recommend-page (frontend) variable toggles an experimental recommend page before the cart page. It only works when cart-page variable is true hence part of the same feature called cart-interface on devcycle.
  7. shipping-waiver (frontend, backend) variable specifies the degree of waiving off of shipping fees. Products on the website have free shipping, in-house shipping and third-party shipping. Banners are toggled on the UI and cart layouts (both sheet and page) about the promotion.

The entire reference of all features/variables/variations is available on both website and dashboard.
The website features the current variations and variable values used in that region.
Since dashboard is for admin, it features the current state for all countries at one place.

Image description

Dashboard

On the dashboard, there is a control pane and simulation pane. The control pane is like the devcycle platform custom-built for the application. The simulation pane gives an opportunity to experience the use-case of this application in first person. It mimics insights and metrics that may well be there in a company and a control flow that can be played with as long as the timer runs.

Simulation

The dashboard has the control pane which is like custom-made devcycle dashboard and a simulation pane.

A simulation mimicking the scenario of live-sale is added to the dashboard with carefully-made flow control of what may actually come in real experience.
The game utilises charts and a stream of queries (or insights) which provides actionable suggestions like changing the feature flag to enhance the customer experience.

Image description

Local

The website is deployed with my account credentials and various countries have various variations demonstrated.

Navigating to different countries will give a different combination of feature flags and can be checked on "Flag State" dialog button

Both website and dashboard can be setup locally and information is on the readme page of repo.

Demo

Website: https://devcycle-commerce.vercel.app

Dashboard: https://devcycle-dashboard.vercel.app

My Code

Repo: https://github.com/mr-loop-1/devcycle-commerce

Additional Prize Categories

API All-Star: Awarded to a project that shines by making full use of the DevCycle API— showcase creativity and capability through effective integration!

My DevCycle Experience

I heard about feature flags for first time through this hackathon itself and right after learning about them, I realized how such on-the-go onfiguration was needed in many places of my past projects.

The inspiration to built this app came from the sale flag only, that it can be scheduled for different timezones which was something I thought backend would have a hard time at since it involved showing a different UI too.

This project was the first where I made my own context and reducer in react. It also has the most complex state management by far that I have written. The first time I have visualized data using charts and learnt a lot about reacharts library.

This is also the first time I have made a game, let alone making it playable and I am quite happy with the way it turned out to be.

I look forward to have more interaction with Devcycle's software and community.

One thing I liked about devcycle dashboard is the powerful API and the readymade hooks that made the integration very seamless.

I also realized that need of conditional flagging where my recommedn-strategy variable is only relevant when recommend-page is true. I will submit this feature request after finishing the app.

Challenges

I am happy that I was able to navigate through the various APIs and create a way to mimic the dashboard while keeping up with the complex data structures used to set and update feature flags for various time-zones. The biggest challenge was to update the target after storing the variation_ids.

The biggest time-consumer was the self-development of both apps from ground up as I wanted the app to behave a specific way.

Simulation Panel

The dashboard was planned to involve a 1-minute simulation of a live sale, with players playing as the sales manager of the website and changing feature flag variations based on live insights from various sales teams and metrics.
I will try to complete the panel very soon, even if it doesn't get evaluated as I already have the components made and need to piece together the flow of the game.

I added the simulation panel.

Images

The architecture of the application system

Image description

insights on dashboard simulation

Image description

Live Flag state

Image description

Separate Cart Page with Full Discount banner

Image description

Normal Cart Sheet with same banner

Image description

products with varying degree of discounts

Image description

insight history in simulation

Image description

Image description

Reference of all features

Image description

Top comments (2)

Collapse
 
iabdsam profile image
Abdul Samad

re-worded the article and added a video. Fixed some good bugs that I got queries for. Please tag me if there are any issues.

Collapse
 
sergb_appdev profile image
Sergio Barrera

Great job working on the devcycle e-commerce :👋