Candor project by Anik Ghosh and Kumar Atul

AttainU
AttainU

Candor

We have built this application to provide the users with a platform allowing them to
exchange and manage information regarding the URL in use and its contents. Candor can
be accessed by installing the chrome extension. Our main objective is to serve the relevant
and unbiased data based on the inputs from the users. These users can discuss and
comment based on their experience of that specific website and these additional
information will serve as a useful supplement to other similar users.

Why? The other side of every web page that provides honest and unprejudiced information and

reviews.
Currently, the websites users are ushered by the information that is monitored by the
admins/owners of these sites which lack actual facts and end user experiences. Our main
aim is to bridge this gap to provide the users with data that is actually true and is being
validated by other visitors of the site. The users on their discretion can choose on what
webpage, what data they want to provide that might help other visitors by giving a clear
overview of the webpage and its contents. They can also review and provide feedback on
any of the available websites using this single platform, following the same steps. Our
extension will be helpful for the admins too to get these valuable feedback from the users
based on which they can take appropriate actions. Together with this, candor could be
used in multiple other useful ways, and the possibilities are endless. Like users can use
this extension to know related pages which are similar to the current page they are visiting,
they can also get a prospective of the webpage according to the trending tags, etc.

How? Store relevant info, targeting a webpage url.

When the user is clicking our extension, it grabs the url of the current active tab and
fetches the number of posts in each category on the context of that url to display on the
UI.The user then can select the category, whose information they want to view or respond
to. Clicking on any of the categories then opens up a new webpage with all the information
that was previously posted by other users. The user can like, comment, sort pots by likes
or time, search posts by any other user as per their wish. A single page loads upto three
posts with all the comments in them, if any, the user can see the older posts by clicking on
the older button or the newer posts by clicking on the newer button. There is a profile
section to show the user’s profile image and other details like username, phone number,
email, etc. There’s also a trending tags section in which all the popular tags together with
their individual counts are shown for that particular webpage, the tags are automatically
extracted from the posts and comments. The profile and contents info are also shown on
the extension after the user logs in.

Challenges 1. Once we finalised the idea of our project, the first challenge that we faced was to
coming up with the code for chrome extension that has many requirements and restrictions

of its own, it would serve as our main Ui for our users. For this, we started by creating the
basic structure which had all the components, next was to add functionalities to those
components and to write the required scripts.
2. The next big challenge we faced was that the json web token that was saved in the
cookie which we were using for user validations. Since it couldn’t be accessed on the client
side to extract the user information we had to find an alternative way to do that. To
overcome this, we made our extension target the successful ‘login’ & ‘logout’ page of our
app and extract the information from there.
3.Other challenge was to design the schema for our database, for this we decided to go
ahead with two models, one to store the user’s info with username as the unique key and
the other for the webpage’s data with the url as the main key. The webpage’s document
has sub-documents embedded in it for all the posts from different users with the id as the
key and each post had in turn sub documents embedded in it for the comments from users
again with id as the unique key. This made our database structure & queries a little
complex but faster.
4. One more challenge was to set up the links between urls, posts, comments, and
users, in order to achieve this we used some hidden fields which would provide us the
necessary data according to the action that was triggered, like in case an user trying to
comment on a post on an url so we had to provide the post id, url, username & category.
5. We thought of implementing frontend validation for the post and comment sections,
so that if the input field is empty, the submit buttons for both would be disabled. But the
challenge was to target the specific buttons for the comments, as it was being generated
dynamically by hbs using loops, so in order to overcome this we provided dynamic ids
using indices of the elements and adding an event listener onkeyup that would trigger a
function in which this indices were passed as arguments to provide the validations.
6. There were many other challenges that needed populating the page on go, where we
used xhr requests to fetch the data from the DB.
7. Our extension had three main parts main_popup, content script and background
script, the main_popup is the main UI of the extension which does all the necessary
actions and shows all relevant data to the user, the content script is injected after the user
opens any webpage and the background script is the heart of our extension which
performs all the necessary functionalities of our extension and is always live in the
background as it’s name suggests. In oder to interlink these three and the others we made
use of runtime messages and local storage.

8. We wanted the users to provide correct email ids so, in order to verify them we
generated OTPs and send them to the users with a validation period of 30 mins. To
achieve this we set the timer to destroy OTP every 30 mins. OTP and email were stored as
key value pair. Since the newer OTPs replaced older ones, older OTPs timer also expires
newer newer OTPs. To overcome this, we also stored the timers with OTPs and destroyed
the previous OTPs timers, whenever newer OTP came.

9. One challenge we faced was while showing the trending tags of a particular
webpage, we had to extract the tags from all the posts as well as the comments, so to
achieve this we made use of separate queries to get the tags separately, made a
combined dict out of it, sorted it and took the top ten out to send them through an xhr
response.

References The main resources we referred to in order to build our application are

1. Satckoverflow
2. Geekforgeeks
3. Udemy
4. Youtube
5. Chrome developer docs
6. MDN developer docs
7. W3 schools
8. NPM docs
9. Github
10. Heroku developer docs

Google Extension The purpose is to improve the experience of the website users by providing the relevant
and unbiased data based on other user inputs. Users can discuss and comment based on
their experience of the specific websites and this additional information will serve as a
useful supplement to other similar users.
After logging in the extension, a user can get to know about other user's perspectives on
any web-page by first visiting that page and then clicking on our extension. Our extension
provides a common place for any web-page user-base, to discuss all the aspects related to
that page, content and the products offered.
**There are four sections- “Questions”, ”Admin”, “Related” and “Others” for every website
from which the user can select. Users can post/comment in any of these relevant
categories together with the context URL.
**Users can share an URL along with a customized message to any other user by clicking
on the share icon. The receiver will get a notification regarding it and the message will also
be saved in the inbox.
**The author of any post will receive a notification whenever any user chooses to comment
on their post
**There are also discussion forums associated with every web-page, where users can
have live interaction with other users of the same web-page.
**Users can add web-pages to their favorites by clicking on the star icon, so as to receive
notifications whenever any user posts on that web-page. A message will also be saved in
their inbox, regarding the same. Users can also access the list of their favourite web-pages
by clicking on the list icon.

DEMO :