Devcycle Commerce – Live Sale

This is submitted to DevCycle Feature Tagging Challenge: Featured Logo Amusement Park

what i built

I’m eager to build an application with real feature flag use cases, rather than replacing the backend. The application is a theoretical amalgamation of various services.

The first person perspective is that of a CEO/Sales Administrator of a mid-sized fashion start-up who is organizing a promotional event for a day, such as New Year’s Eve. The company is already present in around 6-7 countries and plans to launch sales in each country on specified dates.

The application consists of a website (the company’s e-commerce website) and a dashboard application that acts as a control panel for various actions performed by the administrator.

Build a schedule on the dashboard based on each country’s time zone and only launch the sales variable when the eve reaches its time zone.

For countries with active sales now, various actions can be performed from the dashboard based on insights and metrics.

I’ll be deploying the site to use different combinations of variations in different countries, and I’ll be able to find out which feature variants are being used in the selected country in the site’s Status button.

For example, suppose a company receives a complaint that an experimental chatbot uses rude language. Administrators can then switch chatbot The variable is closed.

Or the products recommended on the recommendation page are not added to the shopping cart, or even give up midway. recommend-page Variables can be turned off.

Suppose, after reaching the cart (any layout – sheet or page), the cart abandonment rate is high due to high total cost, then the admin can increase shipping-waiver The tier that will be used on the front-end (to display the exemption promotion banner) and on the back-end (to calculate shipping discounts).

Depending on the historical indicators and one of the characteristics of the data structure I use to store and track the status of the development cycle, it is possible that different countries will have different changes.

The application contains a total of 5 features and 7 variables

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

1. sale-status (frontend, backend) Indicates whether sales are active in the current user area.
2. sort-strategy The (backend) variables contain strategies for sorting the order of categories on the homepage and the order of products within it. For ex. The “Profit” strategy first displays the categories and products that bring the greatest profits to the company.
3. recommend-strategy The (backend) variable also has the same startsegies enumeration, but is used when recommending products to users on the recommendations page. For ex. “Inventory” means encouraging users to purchase items that are overstocked.
4. chatbot (Front-end) Experimental AI chatbot on a variable switching website, developed for sales.
5. cart-page (Frontend) Variable toggles a new experimental cart layout involving a dedicated cart page instead of the currently used side page.
6. recommend-page (Frontend) Variable toggles the experimental recommendations page before the cart page. Only if the cart-page variable is true So is part of the same functionality on devcycle.
7. shipping-waiver (frontend, backend) variables specify the extent to which shipping charges are waived. Products on the website are available with free shipping, in-house shipping and third-party shipping.

A complete reference of all functions/variables/variants is available in the web application and dashboard.
The website also provides current changes and variable values ​​used in the region.
Since the dashboard is for administrators, it shows the current status of all countries in one place.

The dashboard also has a simulation panel, which is a 1 minute game with a chart simulation that I will add soon.

local

The site is deployed using my account credentials and has different changes for each country.

Both the website and the dashboard can be set up locally, and the information is on the readme page of the repository.

demonstration

https://devcycle-commerce.vercel.app

my code

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

My development cycle experience

I first heard about feature flags through the hackathon itself, and after learning about them I realized how this kind of dynamic configuration was needed in many places on my past projects.

This app was inspired by sale Just the logo, it can be scheduled in different time zones, which is something I think the backend would have a hard time doing since it also involves showing a different UI.

The motivation is an amazing simulation game which is not yet finalized in terms of control flow but I will add it soon as components are already developed for it.

One thing I like about the devcycle dashboard is the powerful API and ready-made hooks that make integration very seamless.

I also realized that I needed to conditionally mark my recommedn-strategy Variables are only relevant if recommend-page It’s true. I will submit this feature request once I finish the app.

challenge

I had the pleasure of exploring the various APIs and building methods to simulate dashboards while keeping up with the complex data structures used to set and update the various time zone feature flags. The biggest challenge is updating the target while fully storing the variation_id.

The biggest time drain was the self-development of both apps from scratch because I wanted the apps to behave in a specific way.

analog panel

The Dashboard Project involves a 1-minute live sales simulation where the player assumes the role of a sales manager for the website and makes feature flag changes based on live insights from different sales teams and metrics.
I’ll finish the panel as soon as possible, even if it’s not evaluated, since I’ve already made the components and need to piece together the gameplay flow.

picture