Case Scenario

Jutta sometimes creates a slide with an interactive word cloud question using www.menti.com or www.ahaslides.com. When she presents an online workshop, she asks the audience to answer this question by giving an URL such as https://www.menti.com/4yho9tkqux. When audience answer this question, the slide will dynamically updates by highlighting majority answers. The Wordle Word Cloud tool we create should perform the same workflow but generating inverted Wordles Word Clouds that highlight the minority answers. Jutta’s requirements include:

1. The audience doesn’t need to pay for it or go through a lengthy sign up process. I want to give them a link directly to the page where they enter their words.
2. The results don’t need to be embeddable as long as I can share the results when I’m presenting on a Website.

Architectural Diagram

Data Structure

The wordle word cloud questions and answers are saved as .json files in the "src/_data/" directory in the GitHub repository:

• Every wordle word cloud question is saved as an individual .json file in the file name: {uuid}-question.json
• Answers to a wordle word cloud question is saved as an individual .json file in the file name: {uuid}-answers.json

The format of a wordle question file

{
    "workshopName": {String},
    "question": {String},
    "entries": {Number},
    "entryMaxLength": {Number},
    "createdTimestamp": {Timestamp},
    "lastModifiedTimestamp": {Timestamp}
}

The format of a wordle answers file

{
    "{uuid}": {
        "answers": {String[]},
        "createdTimestamp": {Timestamp}
    }
    ....
}

Why Using Github Branches as Data Source

Another alternative that was considered was to save questions and answers into a third party database such as Fauna. Netlify functions will interact with it through Fauna API.

The final decision goes with Github branches is because this work will also benefit the implementation of the pluralistic data infrastructure that was planned to use Github branches and pull requests for collecting community-based user submitted data.

Lessons Learnt during Development

Ned's comments below describe the original implementation plan. The diagram above shows technologies used in the final product. There are 2 parts are changed during the development and here is why:

...