Devcycle Commerce - Live Sale

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 consists of a website that is the e-commerce website of the company and a dashboard application that acts as a control panel to the various actions performed by the admin.

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 will deploy the website, with different combinations of variations in different country and the information of what features variations are being used in the selected country is available in the "State" button of the website.

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 abandonments, 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 features of the data structures that I have used to store and track the state of devcycle.

The application consists of 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.
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 enum of startegies 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.
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 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.

The entire reference of all features/variables/variations is available on both webapp and dashboard.
The website also 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.

The dashboard has a simulation panel too which is a 1-minute game with charts simulation that I will add soon.

Local

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

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

Demo

https://devcycle-commerce.vercel.app

My Code

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

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.

The motivation was the amazing simulation game which is still not finalized in terms of control-flow but I will add very soon as components were already developed for that.

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 simulate 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 while storing the variation_id intact.

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.

Images