Before You Code

Checklist before starting to code.

Decide what interaction you want to build

Brainstorm and draw some sketches.

Define which elements can be parameterized

Consider that you WebApp will receive inputs from the outside: a poll moment, for example, might receive the topic text and the poll options; a merchandise moment might receive the product picture, price and a link to the store.

let "customVars" = {
  "timeLimit":(3600*0.9),
  "emoji":"💪",//"©",   
  "title":"Power up!",
  "team1Name":"Team Red",
  "team2Name":"Team Blue"
}

To be sellable, your Moment must be configurable; and, to make your life easier, you should think beforehand what element will accept configurations and what element will not.

Choosing the configuration for you Moment is always a tradeoff between flexibility and ease of use. The more configurations, the more flexible your app will be and likely to be employed in many different use cases. However, too much configuration makes the Moment difficult to understand and set.

When the configurations become too many, you might consider splitting them into many different Moment types (ideally one per use case). Following this principle, a simple generic Poll moment that needs custom UI/UX and interaction for sport events and concerts, could become a "Vote for the match MVP" Moment and a "Upvote the best song" Moment.

Define the Moment input types

Once you have decided what elements will be configured, you must then define how they will be configured. For example a header element could accept only non-null string with a maximum of 100 characters.

{
    "key": "headline",
    "type": "input",
    "defaultValue": "You Really Need To Read This!",
    "templateOptions": {
      "required": true,
      "maxLength": 50,
      "type": "text",
      "label": "Headline",
      "placeholder": "Type in the article headline..."
    }
  }

We have defined a framework for the variable definitions that will help you. It is based on Ngx Formly (https://formly.dev/guide/getting-started).