Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peter-hank/d0991bb7b4f738d71594bd78857665d0 to your computer and use it in GitHub Desktop.
Save peter-hank/d0991bb7b4f738d71594bd78857665d0 to your computer and use it in GitHub Desktop.
GSOC19-QuestionTool

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 an 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.

berkman

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 were highly supportive and the journey has been great so far. From understanding the codebase to solve architecture level problem every time they were available to help me out and Thankfully I am able to complete this journey. I am blessed by getting such an amazing and helpful mentors at Berkman Klein Center.

Please click the image below to see the demo for the Question Tool app. IMAGE ALT TEXT HERE

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

Project Description

Question Tool is a discussion tool where users are able to make posts and give their comments and answers also that can be voted and shared with other people also with the ability to post the answers anonymously also.

Features Added During the Phase of GSoC

  • 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 one by one

Instance Editing Feature

The instance that is created in the Question Tool has many properties which the admin of the instance can edit after it has been created. Some of these properties and features were already present and some were required to be implemented.

The allow anonymous reply functionality for a corresponding instance was added to the edit instance feature. Users 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 the moderator list also had a limit of maximum 4. The limit of the mods has now been removed. Now one can add any number of moderators for an instance either during the creation or update process.

Demo

image

To implement this feature server-side logic was implemented and the db schema was 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 a successful password reset the user is automatically logged in. Invalid emails or nonmatching passwords give proper error messages.

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

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

Demo

img

img

img

QR Code Functionaity

The QR code functionality have been implemented for easy access to Question Tool instances from any device.

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

A button is 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 a very new feature for me to implement because I never implemented this kind of feature in any meteor project. It was supposed to be implemented so that overall efficiency should be maintained. The admin was supposed to be able to highlight the corresponding questions of an instance in real-time without any refresh of the web page occurring. To implement the real time remote control of the instance Web Sockets are used.

Implementation of Remote control of a projected instance from another device has been implemented using the package named yuukan:streamy 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 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 session. Using this we emitted the emphasize or de-emphasize events which were then caught using the 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 corresponding CSS of the question targetted by the admin.

UI/UX Improvements

Improvement on the UI/UX of the instance creation process has been done to better express the constraints on an instance and what settings are best for different types of instances. The UI/UX has been revamped and improved.

UX of the app was changed, along with the design of the application and also it was made sure that the mobile responsiveness of the application is maintained. Elements like PopUp Notifications were be implemented wherever necessary along with 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 allowed. A regular expression was updated to update the table name in the db schema.

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 the 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 and easy way to understand how to close the card. After the addition of button on the upper right of the card to close 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. Users can anytime change the allow anonymous reply option by going 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. 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 prompted 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 the backend was also updated. When the user used the edit moderator button and then click the “+” icon, a “-” icon has been 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 emailed to the admin of the instance was 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 some Future Perspective

  • Include Markdown support for addition of instances and questions for better features.

  • Include omniauth based logins to the project.

  • To engage more people in the world of open source and maybe try to encourage them to start contributing to the Question Tool as now I know the codebase well I can help other people too.

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

Project Repository Link

Merged Pull Requests:

Link To the commits done on the Question Tool project

My proposal link for the Question Tool project

Link to my LinkedIn profile

Link to my Github profile

Link to my Hackerrank profile

Link to my Codechef profile

In the end

It was great to work under the guidance of the mentors of the Berkman Klein Center. Thanks to my mentors, Peter and Ellen, Berkman Klein Center, Harvard University and Google Summer of Code 2019 for the amount of learning and experience as this un-matchable and it was one of the best times of my programming and student career. I will definitely give my 100% so that I can continue to contribute on open-source projects and especially to Berkman Klein Center's projects.

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