Distraction Detector

• 

  Shows the student distraction here

Inspiration

Inspiration High school students today face constant distractions while studying—social media, multitasking, and mental fatigue can derail even the most motivated learners. We wanted to build a tool that doesn't just block distractions but gently guides students back to focus, while also supporting their mental wellness. The idea was to create something supportive, not strict—a friendly companion during study sessions.

What it does

Distraction Detector helps students stay focused by monitoring their attention through webcam and keyboard activity. When signs of distraction are detected—like looking away, leaving the seat, or inactivity—it sends gentle reminders to bring them back on track. It also includes a Pomodoro timer to encourage focused study sessions, along with motivational quotes and wellness tips to support mental well-being during break s.

How We Built It

Our project combines multiple technologies and tools to work seamlessly together:

Face Detection: We used MediaPipe to detect whether the user is looking at the screen. If the user moves away for more than a few seconds, a distraction alert is triggered.

Typing & Inactivity Tracking: With basic JavaScript event listeners, we monitored user activity like typing and mouse movement. After a few minutes of inactivity, the system assumes loss of focus.

Pomodoro Timer: A customizable timer helps students work in short bursts, with scheduled breaks and built-in wellness reminders.

Motivational System: We included a collection of motivational quotes and mental wellness tips shown at key moments—during breaks or when distraction is detected.

Tech Stack: React.js, Firebase, JavaScript, HTML/CSS, MediaPipe, TensorFlow.js

Challenges we ran into

Webcam Access & Privacy: Ensuring the app is secure and doesn’t store or transmit video data was crucial. We kept everything on the client side to respect user privacy.

False Positives in Detection: It was tricky to fine-tune the detection so that casual movement didn’t count as distraction. We had to test with different lighting conditions and use delay thresholds.

User Experience: Balancing the frequency of nudges and notifications without becoming annoying was a real design challenge.

Time Management: With limited time during the hackathon, we had to prioritize features and simplify our UI to focus on core functionality.

Accomplishments that we're proud of

Built a Functional Prototype in Limited Time

We successfully created a working web-based tool with real-time face detection, activity tracking, a Pomodoro timer, and wellness features—all within the hackathon timeframe.

Integrated Real-Time Face Detection

Implementing MediaPipe for facial presence detection in the browser was a technical challenge, and we’re proud that it works smoothly without requiring heavy computation or server-side processing.

Prioritized Privacy

We ensured all webcam processing is done locally, with no video data stored or sent to a server—addressing a major concern around student privacy.

Designed for Empathy, Not Guilt

Our nudges and motivational messages are crafted to encourage rather than shame. We’re proud of building a tool that supports mental health while boosting productivity.

Balanced Functionality and Simplicity

From Pomodoro timing to activity tracking, we kept the interface clean and user-friendly—making it easy for students to start using it without any setup hassle.

Collaborated Effectively

Our team worked seamlessly across different areas—design, development, and testing—despite tight deadlines and varied skills

What we learned

How to integrate real-time face detection using MediaPipe and webcam APIs.

Designing for user empathy—nudging without shaming.

The power of combining productivity tools with wellness techniques.

Managing browser permissions and privacy when using camera-based features.

What's next for Distraction Detector

Smarter Distraction Detection

• Use more advanced machine learning models to better distinguish between short breaks, fidgeting, and real distractions.
• Integrate sentiment analysis to detect stress or frustration via facial expressions (with user consent).

Focus Analytics Dashboard

• Add a visual dashboard showing focus time, distraction trends, and Pomodoro streaks over days/weeks.
• Let students track their own progress and celebrate consistency.

Gamified Motivation

• Introduce a rewards system: unlock badges, earn "focus coins", or level up based on consistent usage.
• Add leaderboard or social sharing (optional) for peer motivation.

Mobile + Browser Extension Versions

• Build a mobile app version using Flutter or React Native.
• Create a lightweight browser extension to monitor focus across websites.

More Personalized Wellness Support

• Let users select their preferred motivational tone (gentle, energetic, humorous, etc.).
• Suggest break-time exercises, mindfulness practices, or stretch routines.

Privacy Enhancements

• Allow local data export/import for full user control.
• Add detailed settings for adjusting webcam permissions and detection sensitivity.

Built With

• apifirebase
• codewebcam
• css-**frontend-framework:**-react.js-**machine-learning-&-computer-vision:**-mediapipe
• css3
• firestore)-**browser-apis:**-webcam-api
• html
• html5
• javascript
• javascript-event-listeners-for-activity-tracking-**development-tools:**-git
• tensorflow.js
• tensorflow.js-**cloud-services-&-database:**-firebase-(authentication
• vs