DEV Community

Cover image for Build a wingman UI for your product

Posted on

Build a wingman UI for your product

Imagine you are a startup trying to pitch your idea with the prototype to potential customers, then there will be several instances where you need to generate data, content, user login sessions etc. With all this simulated data properly sitting in the UI, you can plan and pitch your demo better. In order to do this consistently and repeatedly, a separate monolith UI+scripts totally other than your product interface just to simulate actual use cases would help you to deliver your pitch better and might even save time.

I have been working as full-stack developer with infrastructure based startups for the past several years. The product that gets built in these startups involves state, data, sessions, health checks, multiple user logins from several actual services, infrastructure and cloud resources. In all these products, we built and separate monolith demo UI to bring up and tear-down resources and services on-demand. These services would then push the actual data into the portal’s database and eventually into product portal’s UI. This method has helped us better rather than triggering the simulation using scripts.

For example, lets say you are building a highly scalable and performant video conference app and you would like to demonstrate the scalability of the product by really starting, not just emulating, 100’s of conferences with 10’s of users in each conference. This can be built using a script. Instead built a Demo UI and trigger this script from a UI button. This way you can clearly showcase what you are trying simulate.

Advantages of building a demo portal


  1. Flexibility to pass dynamic inputs
  2. Better clarity on what the simulation script does
  3. Your CEO doesn’t have to SSH into a machine and trigger the scripts
  4. Extend and scale the portal to show more info like dev metrics, logs, etc
  5. Can be easily containerized and used by many

Demo portal can be really lean

  1. Just one user login with a strong password
  2. UI need not be aesthetically pleasing a decent one would do
  3. Monolith app. API, microservices based development is not mandatory
  4. If code is containerized, hosting in public cloud’s managed container service would help
  5. Must have features in Demo UI

In all the demo UI built for infrastructure products there are these common functionalities

  1. Tear-down all the resources
  2. Reset Configuration
  3. As the demo clicks are launching resources , its very important to tear them down and save cloud cost. As you are playing around changing configurations of the services and resources, we will screw up several things in the process and these configurations needs to be reset to some defaults.

Technologies I prefer building this portal - nodejs, docker, bootstrap, jquery, keeping it simple.

Top comments (0)