Inspiration

In today’s hyper-connected world, distractions are everywhere — social media, entertainment, endless scrolling. We realized that blocking distractions isn’t enough; we needed a way to turn every temptation into an opportunity to learn.

That’s how FocusGate was born — an AI-powered website locker that challenges users with quick, subject-related questions before allowing access to distracting websites. In short, it transforms moments of distraction into micro-learning sessions — helping users stay sharp, focused, and productive.

How we built it

FocusGate is built on the MERN Stack (MongoDB, Express.js, React, Node.js) with seamless integration of Google’s built-in AI models for real-time question generation.

Frontend (React + Chrome Extension)

A clean, minimal Chrome extension UI captures user activity and overlays AI-generated questions whenever a blocked site is accessed.

Backend (Node.js + Express + MongoDB)

Securely stores user preferences, site lists, and question metadata.

Uses a structured Mongoose schema to track exam, topic, difficulty, and frequency per user.

Handles authentication and API communication between frontend and AI models.

AI Integration

We leveraged Google’s Gemini Nano (built-in Chrome AI) for generating contextually relevant questions. Each question is customized to the user’s learning preferences — making FocusGate both educational and adaptive.

Authentication

User authentication uses JWT tokens for security and supports Google OAuth for easy sign-in.

Challenges we ran into

One of the biggest challenges was setting up Gemini Nano, since it wasn’t straightforward to install. We had to dive deep into Chrome’s developer tools, read scattered documentation, and trigger the AI model download manually through the console.

Debugging the built-in AI environment required countless logs, tests, and iterations before we could finally achieve stable local AI question generation.

Accomplishments that we're proud of

We’re proud that we’ve built something that addresses a universal problem, digital distraction, in a smart, user-friendly way.

FocusGate doesn’t just block websites; it encourages learning and discipline. It turns mindless moments into meaningful ones. And that, we believe, is a small but powerful step toward helping people, especially students, reclaim their focus.

What we learned

This project taught us how to:

Integrate and utilize Google’s built-in AI models (Gemini Nano & Translator APIs).

Build and debug Chrome extensions that interact with background scripts, content overlays, and external APIs.

Combine AI, behavior design, and education to create something that’s both useful and delightful.

What's next for FocusGate AI

Next, we aim to evolve FocusGate AI into a fully adaptive productivity companion powered by Chrome’s built-in AI APIs. The upcoming version will introduce personalized question generation that adapts to user performance and browsing context, making learning more dynamic and relevant. We plan to integrate gamified streaks, cross-device session syncing through Google accounts, and AI-driven difficulty adjustments to maintain engagement. In the long run, FocusGate will expand into an open SDK, enabling other developers to embed its “AI question lock” system into their own productivity tools, transforming digital distractions into continuous learning opportunities.

Built With

  • 2.0
  • ai
  • api
  • apis:
  • built-in
  • chrome
  • chrome-extension-apis-backend:-node.js
  • code
  • css3-frameworks-&-libraries:-frontend:-react.js
  • database:
  • developer
  • express.js
  • gemini
  • git
  • html5
  • jwt
  • language
  • languages:-javascript-(es6+)
  • model
  • mongodb
  • mongoose
  • nano)
  • oauth
  • odm)
  • postman
  • studio
  • swagger
  • tools
  • translation
  • translator
  • ui
  • via
  • visual
Share this project:

Updates