Keep and Eye

Inspiration

The internet is an amazing place. Lots of possibilities, things to learn, people to meet and stuff to try out. It represents free will, literally anyone can become a creator, and influencer and can even set up their own business with no physical office space. But with all this freedom and anonymity, comes a lot of explicit and sometimes inflammatory content.

It's not possible to keep a track of what every person is writing on the internet, as that would infringe free speech, but we can't deny the fact that underage kids who are exposed to sensitive, hateful and explicit content online might suffer serious mental problems. To deal with this issue, we came up with the idea of Keep and Eye, so that parents can know when their kids (under 13 years of age) are exposed to such content online, without having to have the kids avoid the wonders of the internet...

What it does

Keep an Eye is a Google Chrome browser extension, which parents have to set up on their child's browser. They have to complete the following steps:

Add the browser extension to their child's chrome profile
Add their phone number along with their country code
Verify their phone number via OTP authentication
Keep an eye out for any messages they receive on their registered mobile number regarding their child's browsing history. Something like : Your kid might be looking at something fishy. The URL which generated this warning is: "www.example.com"

How we built it

In order to make a Chrome web extension, we took help from chrome API and chrome extensions API. We set up the UI for the extension using HTML and CSS, and integrated the chrome API facilities using JavaScript.

We needed to have a back end service too for profanity check. Our algorithm is:

As soon as the content on a chrome tab is loaded, we invoke a tree parser
The parser gets all the
tags in the page and filters out those which have "text" as their content-type
The text from each tag is than sent to the API that we built which returns a boolean value telling whether or not this text contains something sensitive/vulgar/explicit
If any triggering content is found, a notification is sent to the registered mobile number about it.

The API was built in python using FastAPI, and is deployed on a Linode Linux instance. We are saving the user's phone numbers in a CockroachDB database, which is integrated to the back-end server using SQLAlchemy.

For sending verification OTPs and notifying parents whenever the API is triggered, we've set up a Twilio service (free account).

Challenges we ran into

For starters, none of us are big fans of JavaScript and have mostly used python in our projects before. In order to create a web extension, JavaScript was a must. So, we struggled with that. Two of our teammates are in USA and one is in India. So, a huge time difference. In order to collaborate with back-end and front-end, deploying the back-end somewhere was a mus too, and none of us were familiar with Dev-ops either!! So, we took help from Linode documentation and deployed our API.

To top that off, it was Meryl's first hackathon!!