We are building HocusFocus, a flow State Guardian app. The problem we're addressing is the constant struggle with digital distractions—like social media, notifications, and wandering attention—which makes it hard for people to maintain deep focus and productivity. Many existing tools block websites but don’t help users understand or improve their focus. Our goal is to create a system that monitors attention and provides real-time feedback and actionable insights to help users achieve and sustain a flow state.
We aim to expand Hocus-Focus with the following features:
- Real-time eye-tracking to monitor user focus and attention.
- Browser extension for distraction detection and focus score.
- An analytics dashboard visualizes focus sessions and distraction patterns.
- Clean, accessible UI for easy session management and progress tracking.
- Personalized focus recommendations based on user behavior.
- webgazer.js
Follow these steps to set up the project locally:
-
Fork the Repository and go to your fork
-
Clone the Repository
change you-repo with your github username
git clone https://github.com/your-repo/Hocus-Focus.git
cd Hocus-Focus
- Install Dependencies
cd frontend
npm install
cd ..
cd backend
npm install
-
Open your browser and navigate to
http://localhost:3000. -
Set Up Firebase
- Create a Firebase project.
- Enable Authentication (Email/Password).
- Add your Firebase config in
src/services/firebase.js.
- Start the Development Server
cd frontend
npm run dev
- Build the extension
npm run build
- Now go to your browser, turn on developer mode and load the extension folder from the project.
Feel free to contribute or report issues via GitHub! Together, we can make disaster response smarter and faster.