Create WOC Form
New Session Form 1
New Session Form 2
Multiple Choice Option
Bar Graph
Pie Chart
Questionnaire Builder
Final Report

Wisdom Of Crowd

A real time team voting app.
View the demo »

About the Project
- Inspiration
- Built With
Getting Started
- Prerequisites
- Installation
Abpout the Block
- About the block
Airtable Functions Used
Airtable Hooks Used
Components and block walkthrough
- Step 1
- Step 2
- Step 3
- Question Types
- Step 4
- Session Types
- Step 5
- Question and Answer Round
- Step 6
How I built it
Contact

About The Project

A realtime team voting app to make better decisions. Be it work or a school activity, wisdom of crowd helps you to take better decisons about your idea, along with team's opinion.

This block makes use of airtable's base to store the session data and display results with help of charts and graphs.This allows data to be efficiently stored on the table, and to be updated and reused whenever needed.This helps the creator to analyse the worth of his/her idea and proceed accordingly.

Inspiration

The inspiration of this came to us while pitching an idea to a group of friends, who all had their opinion regarding it, so we decided to create something which enables us to easily take a note of each person's opinion and analyse it efficiently to move forward with the idea/project and proceed in a certain direction.

What seperates us from the other similar chat platforms?

The first distinct quality that seperates us from other similar platforms was the customizability/flexibility that we offer. The exhaustive coverage of the various forms of discussion encompassed in a single group chat platform, to ensure a comprehensive exchange of ideas and conveying of ideas is something that this idea has brought forward.

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

The following includes the things you will need to use the software and how to install them. Make sure you have git installed on your system.

For a general everview of Airtable setup, you can check out their official website for further instructions how to setup your Airtable Block, as we will follow similar steps.

Installation

Clone the airtable_wisdom_of_crowd repo:

git clone https://github.com/sarthakarora1208/airtable_wisdom_of_crowd.git

Install blocks-cli using npm:

npm install -g @airtable/blocks-cli

Install requirements using npm:

npm install

Run the dashboard

To run the block you will need to navigate to that folder and execute the following block command:

block run

About the block and components

About the block

This lockdown has been long for all of us, all of us have yearned to go back to our work and share and express our ideas and get valuable feedback from others. Wisdom of crowd is a team voting web-app/block you can use to generate a wide range of questions, answer questions about each other ideas and get data statistics for each question. So when you reach the base or run the block, the following happens:

Airtable Functions Used

This block uses a variety of airtable functions to maintain its flow-

Base.getTableIfExists - gets the table matching the given ID or name provied as arguments. Returns null if no matching table exists within this base.
Base.unstable_createTableAsync - creates a new table with the name and fields provided to it as arguments.
Base.unstable_createTableAsync - creates a new table with the name and fields provided to it as arguments.
Table.createRecordAsync - Creates a new record with the specified cell values provided to it as arguments in form of fields object.
Table.updateRecordAsync - Updates cell values for a record, based on record provided along with updated field values as an object as arguments.
Table.deleteRecordAsync - Deletes the given record, based on record argument.
Record.getCellValue - Gets the cell value of the given field for this record based on the fieldId or name provied as argument.
Record.getCellValueAsString - Gets the cell value of the given field for this record based on the fieldId or name provied as argument as string.
cursor.setActiveTable - Sets the specified table to active in the Airtable UI based on table Id or name provied as arguments. If the blocks pane is fullscreen, the table will still be set as active, but the blocks pane will continue to be displayed fullscreen.
cursor.activeTableId - returns The currently active table ID. Can be null when the active table has changed and is not yet loaded, and can also refer to a table that is not yet loaded
base.activeCollaborators - returns The users who have access to this base, in form of collaborator data.
base.getCollaboratorIfExists - return the user matching the given ID, name, or email address provided as argumemt and null if that user does not exist or does not have access to this base.
expandRecord - expands cell values for a record, based on record provided as argument from it's table.

Airtable Hooks Used

Various hooks used by the block are-

useBase - A hook for connecting a React component to your base's schema. This returns a Base instance and will re-render your component whenever the base's schema changes.
useWatchable - A React hook for watching data in Airtable models like Table and Record. Each model has several watchable keys that can be used with this hook to have your component automatically re-render when data in the models changes.You can also provide an optional callback if you need to do anything other than re-render when the data changes.

Step 1

component -> Home

You are welcomed with the home page of the Block, which has a create new table button, which upon clicking generates a new My Sessions table if the table previously does not exist, and redirects to the create wisdom of crowd session page, to create a new session with all the session details.

Step 2

component -> CreateWocSession

table -> My Sessions

On create woc session page a form is shown to fill out the session details, in order to store the data in the database as well as on airtable's My Sessions table, which if needed to be edited or deleted, can be done from the table itself. The form has various fields to know about the session like:

Session Name
Session Description
Number Of Questions
Team Members (who first needs to be invited to base, to send them request to be apart of the game)
Scheduled Time

On submitting the form the data is added in the My Sessions table as well as database and a new table Session Name- Questions is created, and the session creator is now redirected to the Questionnaire Builder page, to add questions for that particular session.

Step 3

component -> Questionnaire Builder

table -> Session Name - Questions

On Questionnaire Builder, the user is shown with an add questions button to add the question for that particular session they created. On clicking the button a modal pops up, which consits of a form to add the question's details like:

Question Number
Question
Question Type

With an additional Options field to set the options for a particular question type.

Question Types

Various question types are -

Wisdom Of Crowd - this type of question allows the team member to freely express their opinion or feedback on the particular question asked.
Yes Or No - this type of question allows the team member to choose whether they would say yes or no as an answer to the particular question asked.
Rating - this type of question allows the team member to give a rating as an answer to the particular question asked.
Multiple Choice - this type of question allows the team member to choose any one answer from the options provided for the particular question asked.
Dropdown - this type of question allows the team member to choose any one answer from the options provided in the form of dropdown for the particular question asked.
Checkboxes - this type of question allows the team member to choose multiple answers from the options provided for the particular question asked.
Ranking - this type of question allows the team member to drag and arrange the options in a particular ranking of their prefrence as an answer for the particular question asked.

Upon clicking the submit question button, the question is added in the Questions table as well as in the Questionnaire Builder. The question can be editted or deleted from both the Questionnaire Builder and the Questions table.

In a similar manner the session creator adds all the questions, along with the question type and options that he or she needs to ask their fellow team mates. On clicking the done button all questions are saved in the database and the session creator is directed to Session Dashboard page, to view all the sessions.

Step 4

component -> SessionDashboard

table -> My Sessions

On Session dashboard, the user has all the details of their sessions.

Session Types

It consists of three types of sessions:

Pending Sessions - this includes the sessions which have been created by the, but have not yet been started by the user.It consists of various buttons-
- Sending Invites - Pending Sessions table includes asend invitation button to send the email invitation to the team members with the help of node mailer and calendar api, after the session has been created. Once the invitation has been sent, this button is replaced by the start button.
- Start Session - this button is shown only after the creator has send invites to all team members.But initially this button is diabled and is activated only five minutes before the scheduled time of that particular session and when clicked two things happen:
  1. An email is sent to all the attendees with the game code for that session
  2. And the creator is directed to start game page, where the question and answer round begins.
- Delete Session- this button is used to delete a particular session.
Invited Sessions - this includes the sessions to which user has been invited by a team member.It consists of various buttons-
- Join Session - this on being clicked opens up a model, which asks for the game code for that particular session, so that the user can enter the correct game code which was emailed to them and become part of the question and answer round to express his opinion regard the session idea.
- Delete Session- this button is used to delete a particular session.
Completed Sessions - this includes the sessions which have been completed.It includes both the session of which the user has been part of or he/she has created.It consists of a single on click action-
- Generate PDF - the particular session on being clicked in this table genrates the PDF for that session, which includes all the session details as well as question details of each question that was asked and also the statistics of that particular question, all in the PDF.

Step 5

component -> Game/StartGame/StartSession

table -> My Sessions

Question and Answer Round

So the session begins when session creators(let him be called Sandy) clicks on start session and waits for team members to join, Eurus joins, Harry joins, Rohan joins, the session length of questions is decided based on number of quetsions creator has entered for that session.

Once everyone has joined Sandy starts the game.

All the user's are shown the question, "If as a company we decide to go fully remote, what are the challenges we may face? (WISDOM OF CROWD)"

As it is a wisdom of crowd question everybody writes theoir own answer

Sandy answers "Communication between teams", and waits for Eurus, Harry, and Rohan
Eurus Answers "Employee productivity may come down", and waits for Rohan and Harry
Rohan Answers "Internet issues in video calls", and waits for Harry
Harry Answers "Managing working hours"

The game collects all answers and every one is show all the answers except their own answer, (you can't choose the answer you wrote)

Rohan is shown all the answers in a jumbled order

Employee productivity may come down
Managing working hours
Communication between teams

Rohan chooses the third answer, "Communication between teams" and waits for others to answer

Harry also chooses, "Communication between teams",waits

Eurus chooses "Internet issues in video calls", waits

Sandy chooses "Managing working hours"

In this Round Eurus chose Rohan's answer and her answer "Employee productivity may come down" was not chosen by anybody.

The game collects all the chosen answers and displays the statistics in form of pie chart and bar chart, thus depicting a clear analysis of each question, and how much each member thinks your opinion is worth and whether they find relevant or not, along with how many votes each option got:

Communication between teams	2
Internet issues in video calls	1
Managing working hours	1
Employee productivity may come down	0

All the team members click on ready and wait for everyone to be ready.

After all of the team members are ready the game shows the next question

In a similar manner based on question type they either write their own answer or select from options provided like as below:

All the user's are shown the next question, " What is your preferred medium of communication(MULTIPLE CHOICE)"

As it is a multiple choice question everybody is provided with options to chosse from as asnwer

Options

Slack

Video Call

Text

Sandy chooses "Email", and waits for Eurus, Harry, and Rohan
Eurus chooses "Video Call", and waits for Rohan and Harry
Rohan chooses "Video Call", and waits for Harry
Harry chooses "Text"

Like as previous question the game collects all the chosen answers and displays the statistics in form of pie chart and bar chart, thus depicting a clear analysis of each question, and how much each member thinks your opinion is worth and whether they find relevant or not, along with how many votes each option got as legend in form of:

Video Call	2
Email	1
Text	1
Slack	0

The rest of the rounds are played in a similar manner with different question types and after all the questions are answered the game is over and all the team members are redirected to final report page, to get the details of all questions asked.

Step 6

component -> Game/FinishGame/FinishGame

table -> Session Name - Final Report

After the Game is finished, ever team member is redirected to final report page and is presented with the detailed view of every question aksed for that particular session as well as a PDF is automatically downloaded with the all details of that session including votes and statistics.

The table has the following fields:

Question Number(self explanatory)
Question - the content of each question asked.
Question Type - the type of each question asked.
Options - stores the options.
- On clicking this field, a modal pops up showing how many votes each option has got.
Display Statistics - on clicking this field, a modal pops up showing a barchart and piechart.
More Details - a detailed view of the record is shown.

If you would like to see the above steps process, checkout the Block in action, found in the frontend folder.

How I built it

This game was built using Airtable Blocks SDK and Airtable, MongoDB, React, Redux, Express, Node and Redis Streams and Data Structures.

Airtable Blocks SDK: This is used to design the ui components in React to make the Block more attractive and visually impressive.

Airtable: This is used to store the session data and question data along with the images of statistics.

MongoDB: This is used to store user info, and questions in the game, addtionally it stores data about the previous games

Node: NodeJS works as backend of the application the players communicate to the Redis streams by the means of POST Requests.

While setting up Airtable Block and using its blocks ui components, Then there was the challenge of creation, updation, deletion of record with all changes made in the table.

Distributed under a MIT License. See LICENSE for more information.

While making the frontend like setting up theming and components using Airtable UI, then there was the challenge of updation state upon each event in the redux store