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:
- 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.
- 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
Code Block |
---|
{ "workshopName": {String}, "question": {String}, "entries": {Number}, "entryMaxLength": {Number}, "createdTimestamp": {Timestamp}, "lastModifiedTimestamp": {Timestamp} } |
The format of a wordle answers file
Code Block |
---|
{ "{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:
...