Skip to content

Instantly share code, notes, and snippets.

@singhsanket143
Created August 23, 2019 13:06
Show Gist options
  • Save singhsanket143/d239accf9442a0b156b776e2df236b5a to your computer and use it in GitHub Desktop.
Save singhsanket143/d239accf9442a0b156b776e2df236b5a to your computer and use it in GitHub Desktop.
GSOC19-QuestionTool
<title>GSOC19-QuestionTool</title>

Google Summer Of Code 2019 With Berkman Klein Center For Internet and Society at Harvard University

Introduction

I am currently a Computer Science Undergrad at Guru Gobind Singh Indraprastha University, New Delhi. I have previously worked as Angular 5 Frontend Engineering Intern at FableHQ. Also, I have been appointed as a Full stack Ruby On Rails and NodeJS developer at Kakcho. I have additionally worked as a freelance problem setter at Talview. Most recently I have worked as an Intern at Coding Blocks where my project was in software development and furthermore Mentored 6000+ students (Online+Offline) in the domain of Data structures and algorithms in C++. Also I got an opportunity to work as an intern at ISRO.

It’s been more than two and a half months since the GSoC journey has started. My mentors Ellen and Peter made this journey the most memorable one. The amount of learning I got under their guidance is uncomparable. They are highly supportive and the journey has been great so far. From understanding the codebase to solve architecture level problem everytime they were available to help me out and Thankfully I am able to complete this journey. I am blessed by getting such amazing and helpful mentors at Berkman Klein Center.

Let us discuss about all the features and fixes I implemented during GSoC 2019

Project Description

Question Tool is a discussion tool for groups including classrooms and organizations holding meetings rooted in the Socratic method. Users are able to make posts that can be voted on or discussed by participants either with attribution or anonymously.

Features Added

  • Instance Editing Feature

  • Reset Password

  • QR Code Feature

  • Real Time Remote Control Feature

  • UI/UX Improvements

  • Archive PDF Feature

  • Omniauth

Let us discuss all of these on by one

Instance Editing Feature

Many properties of instance was required to get edit functionality by the owner after the creation process. Some of these features were already implemented and some of them were required to be updated.

The allow anonymous reply functionality for a corresponding instance was added to the edit instance feature. User can now anytime change the allow anonymous reply option by navigating to the edit advanced features section of an instance.

Demo

img

Earlier, the application could only allow one admin or owner of an instance and limit mods with a max of 4. The limit of the mods has now been removed. Now one can add any number of moderators for an instance either during creation or update process.

Demo

image

Most of the time in this feature server side logic was supposed to be implemented and some db schema was supposed to be updated.

Reset Password Feature

The forgot password functionality has been added for already registered users with proper error message displays and email for reset password link. After successful password reset the user is automatically logged in. Invalid emails or nonmatching passwords gives proper error notice.

To Implement password reset functionality to the users with role of moderator or admin we will keep a button along the login form that will get a confirmation popup to send the reset instructions to the registered email.

When a user enters his/her valid email id the Accounts.forgotPassword is called which triggers a call to Accounts.sendResetPasswordEmail on the server. When the user visits the link in this email, the callback registered with Accounts.onResetPasswordLink will be called. Then Accounts.resetPassword is called with the corresponding unique token to reset password and a new password.

Demo

img

img

img

QR Code Functionaity

Implementation of QR codes for easy access to Question Tool instances URLs from a mobile device was to be done in this feature.

The Meteor-QrCode was used to generate the QR codes.

A button is now embedded in the Nav bar which is shown only to admin. When the admin clicks the button a new popup appears on the screen in order to display the QR Code.

Demo

img

Real Time Remote Control

This was again one of the most interesting and challenging part of my project. This was one part of the summer which took quite a lot of time which I didn’t think that it would take. It was not very straightforward, given the constraints that overall efficiency should be maintained. In this feature a Remote Control of a projected instance from another device was required to be built. The admin was supposed to be able to highlight the corresponsing questions of an instance in real-time without any refresh of the web page occuring. To implement the real time remote control of the instance Web Sockets were taken into use.

Implementation of Remote control of a projected instance from another device has been implemented. The package named yuukan:streamy has been used to establish real-time communication between different devices. It uses meteor’s underlying sockets for realtime communications. Whenever the admin checks the highlight instance checkbox all the other devices will show the effect of emphasizing and de-emphasizing on them.

Demo

img

This feature heavily depends on event driven programming nature of JavaScript. The Streamy.broadcast event was used to do broadcasting i.e. Send a message to every connected sessions. Using this we emitted the emphasize or de-emphasize events which were then caught using Streamy.on event which registers a callback for a specific event either emphasize or de-emphasize. The callback will be called when a message of this type has been received. In the callback we updated the corresponsing CSS of the question targetted by the admin.

UI/UX Improvements

Another major goal of my proposal was to do improvement on the UI/UX of the instance creation process was required to better articulate the constraints on an instance and what settings are best for different types of conversations. There was a high need to revamp and improve the design and UX of the application. The looks of any application should be appealing and engaging.

UX of the app was changed, along with the design of the application and also it was made sure that mobile responsiveness of the application is maintained to its fullest. Elements like PopUp Notifications were be implemented wherever necessary along other updates.

Firstly a feature was implemented so that the instance name can be made by using space between words or digits but no other special character is allowed. The corresponding regular expression was updated to update the table name accepting regular expression.

Demo

image

After this a feature was implemented such that during the instance creation, there is an option added in the advanced options to enable or disable social sharing of an instance.

Demo

image

After this I implemented some more features i.e:

When the Admin Interface card is displayed there is a close button implemented in the top right corner of the card to give the user a more intuitive way to understand on how to close the card. After the addition of button on the upper right of the card to close it is more intuitive and existing functionality with the Admin Button acting as a toggle for the card is staying.

Apart from this the allow anonymous functionality was added to the edit instance feature. User can anytime change the allow anonymous reply option by navigating to the edit advanced features section of an instance.

Also earlier, what used to happen was that Admin of an instance can be added as a moderator too which was erroneous. Now, this issue was resolved and now one cannot add admin of an instance as a moderator.

Demo

  1. Close button to admin interface

img

  1. Allow anonymous dropdown

image

  1. Admin addition

image

Earlier when a user was registering he/she was bound to have a username of length greater than 3. This limit has been updated to greater than 1 instead of 3.

After the above features, I started a new feature. Earlier when adding moderators while making the instance, only the first moderator email field was getting verified and prompts error when the invalid email is entered in it. All the other moderator email fields (if the admin adds more than 1) prompts the error but it only showed the error box and no message.

But then changes were made to the logic and after that:

  1. All the emails entered as the moderator are getting verified.

  2. When the input field for moderator email changes then also the error message is displayed along when clicking the create instance button.

Demo

image

image

A small implementation of edit logic for backend was also updated. When user used the edit moderator button and then click the “+” icon, there was no “-” icon added that immediately comes up for deleting that row. This was added as a small UI fix as well some backend logic associated with it.

Demo

img

Archive PDF Feature

Implementation of an archive functionality that can summarize the whole instance and can be downloaded by the admin of the instance was supposed to be implemented. The Meteor-PDFkit was used to implement the PDF feature on the server side and then this archive pdf was mailed to the admin of the instance.

Demo

  1. A download archive button was added to NavBar.

img

  1. This is the format of the archive pdf sent

image


Timeline followed

img

Things Left To DO and Future Perspective

  • Include Markdown support for addition of instancesand questions for a better features.

  • Include omniauth based logins to the project.

  • To engage more people in the world of open source and may be try to encourage them to start contributing to Question tool as now I know the codebase well.

  • Maintain a much stronger bond with the mentors and other origanization members of Berkman Klein Center.

Project Repository Link

Merged Pull Requests:

Link To the commits done on Question tool project

My proposal link for Question tool project

In the end

It was really fun working this summer on such an interesting and thrilling project. Thanks to my mentors, Peter and Ellen, Berkman Klein Center, Harvard University and Google Summer of Code 2019 for giving me the opportunity to participate this summer and spend my summer doing some meaningful work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment