Please Help Me Study!

Website home page
UI for the extension
Question displayed when the website the user is on is flagged as 'unproductive'
Feedback given to the user after they submit their solution to the question

Inspiration

Both of us have terrible study habits and are also too lazy to use traditional website blockers to blacklist distracting sites, so we decided to make a website blocker of our own, with an added twist - instead of completely leaving the choice to block up to the user, the blocker itself can also decide to block certain sites based on their content.

What it does

Our application is a Chrome extension which analyzes websites the user visits using AI. If the AI deems a website to be too distracting, the extension blocks the site and forces the user to instead solve a challenging question based on a topic of their choice. A whitelist and a blacklist is also available to the user if they want to ignore/block certain sites.

How we built it

We used ReactJS for the frontend and express.js for the backend. We also used Vertex AI with Gemini Pro for the AI and a Google cloud compute engine VM to host our website. The website is hosted as docker images, and reverse proxying to our domain was done through Caddy.

Challenges we ran into

We ran into challenges with trying to make a Chrome extension for the first time, as none of us really knew what to do and it took us quite some time in the beginning to find our footing. We also had trouble with being dumb and getting confused over the Google storage API. Setting up the communication between the website and the extension was also unintuitive, and required a lot of testing to get working. Setting up the server further proved to be challenging, requiring the Google Cloud CLI to be installed and authenticated to use Vertex AI services. This turned out to be a massive pain, and took a very long time to figure out.