Skip to content

supersver/Deep-Focus

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎯 Deep Work Focus Timer

A powerful, self-contained web application that helps you maintain focus during deep work sessions by automatically blocking distracting websites and tracking your productivity.

Version License No Dependencies

✨ Features

🕐 Smart Session Management

  • Scheduled Sessions - Set up recurring deep work blocks with custom times and days
  • Manual Sessions - Start instant 25-minute Pomodoro sessions
  • Auto-Start - Sessions begin automatically when scheduled
  • Pause/Resume - Full control over your focus time
  • Progress Tracking - Visual countdown and progress bar

🛡️ Website Blocking

  • Customizable Block List - Add any distracting websites
  • Active During Sessions - Blocks only activate when you're in focus mode
  • Override Option - Emergency access with warning
  • Browser Extension - Optional real blocking via Chrome/Edge extension

📊 Productivity Analytics

  • Daily Focus Time - Track minutes focused each day
  • Weekly Statistics - See your week at a glance
  • Session Counter - Total completed focus sessions
  • Streak Tracking - Maintain your daily focus streak

📅 Calendar Integration

  • ICS Export - Download sessions as calendar file
  • Import Anywhere - Works with Google Calendar, Outlook, Apple Calendar
  • Recurring Events - Automatically creates repeating calendar entries

💾 Data Management

  • Auto-Save - All data persists in browser localStorage
  • Export/Import - Backup and restore your data as JSON
  • Cross-Browser - Use the same setup across devices

🔔 Notifications

  • Session Alerts - Browser notifications for start/end
  • In-App Messages - Visual feedback for all actions
  • Test Feature - Verify notifications are working

First Use

  1. Add Your First Session

    • Click "+ Add" under Scheduled Sessions
    • Enter title: "Morning Deep Work"
    • Set times: 9:00 AM - 11:00 AM
    • Select days: Mon, Wed, Fri
    • Click "Save Session"
  2. Configure Blocked Sites

    • Type "twitter.com" and click "+ Add"
    • Add more sites: facebook.com, reddit.com, etc.
  3. Start Focusing

    • Click "▶️ Start Manual Session" for immediate focus
    • Or wait for scheduled sessions to auto-start

📖 Detailed Usage

Creating Scheduled Sessions

1. Click "+ Add" button
2. Fill in details:
   - Title: Descriptive name for the session
   - Start Time: When session begins (24-hour format)
   - End Time: When session ends
   - Days: Select one or more days
3. Click "Save Session"

Example Sessions:

  • Morning Deep Work: 9:00 - 11:00 (Mon, Wed, Fri)
  • Afternoon Focus: 14:00 - 16:00 (Tue, Thu)
  • Evening Study: 19:00 - 21:00 (Daily)

Managing Blocked Websites

Add Sites:

  • Enter domain without protocol: twitter.com
  • Not: https://www.twitter.com

Common Sites to Block:

  • Social Media: twitter.com, facebook.com, instagram.com
  • Entertainment: youtube.com, netflix.com, tiktok.com
  • News: reddit.com, news.ycombinator.com
  • Shopping: amazon.com, ebay.com

During Focus Sessions

Active Session Controls:

  • ⏸️ Pause - Temporarily stop the timer
  • ▶️ Resume - Continue from where you paused
  • ⏹️ Stop - End session early (still counts partial time)

What Happens:

  • Timer counts down in real-time
  • Progress bar shows completion percentage
  • Blocked sites counter displays active blocks
  • Status indicator shows session state

Exporting to Calendar

  1. Click "📥 Download .ICS File"
  2. Open the downloaded file
  3. Your calendar app will import all sessions
  4. Recurring events are automatically created

Compatible With:

  • Google Calendar
  • Microsoft Outlook
  • Apple Calendar
  • Any app supporting .ICS format

Statistics Explained

  • Minutes Today - Resets daily at midnight
  • Minutes This Week - Resets Monday at midnight
  • Total Sessions - Lifetime completed sessions
  • Day Streak - Consecutive days with at least one session

🔧 Browser Extension (Optional)

For real website blocking, install the optional browser extension:

Chrome/Edge Extension Setup

Step 1: Open Extension Repository

Open extention repository from in my github.

Step 2: Install in Browser

  1. Open Chrome/Edge
  2. Navigate to:
    • Chrome: chrome://extensions/
    • Edge: edge://extensions/
  3. Enable Developer Mode (toggle in top-right)
  4. Click Load unpacked
  5. Select your focus-timer-extension folder
  6. Extension installed! ✅

Step 3: Verify

  • Extension icon appears in toolbar
  • Open focus timer app
  • Start a session
  • Try visiting a blocked site - should be blocked!

💡 Best Practices

Session Scheduling

  • Start Small - Begin with 1-2 sessions per day
  • Consistent Times - Same time daily builds habits
  • Buffer Time - Leave 5-10 minutes between sessions
  • Realistic Duration - 90 minutes max for deep focus

Website Blocking

  • Be Specific - Block only truly distracting sites
  • Not Everything - Keep work-related sites accessible
  • Review Regularly - Update list as habits change
  • Emergency Access - Override available if needed

Building Habits

  • Track Streaks - Aim for consecutive days
  • Review Stats - Check progress weekly
  • Export Calendar - Visualize commitment
  • Celebrate Wins - Acknowledge milestones

🔒 Privacy & Security

Data Storage

  • 100% Local - All data stored in browser localStorage
  • No Cloud - Nothing sent to external servers
  • No Tracking - Zero analytics or telemetry
  • Private - Your data stays on your device

Permissions

The browser extension requires:

  • storage - Save blocked sites and active sessions
  • tabs - Detect which sites you're visiting
  • declarativeNetRequest - Block websites during sessions

We NEVER:

  • Track your browsing history
  • Send data to external servers
  • Access sensitive information
  • Store data outside your browser

🛠️ Technical Details

Requirements

  • Modern Browser - Chrome 88+, Edge 88+, Firefox 85+, Safari 14+
  • JavaScript Enabled - Required for functionality
  • localStorage Available - For data persistence

Browser Compatibility

Feature Chrome Edge Firefox Safari
Core Timer
localStorage
Notifications
Extension 🔧*

*Firefox requires manifest v2 adaptation

Technologies Used

  • Pure React/JavaScript/tailwind - No frameworks or dependencies
  • localStorage API - Client-side data persistence
  • Notification API - Browser notifications
  • Web Extensions API - Optional website blocking
  • ICS Format - Calendar export standard

File Size

  • Main App: ~30KB (uncompressed)
  • Extension: ~5KB total
  • No external dependencies - Works offline after initial load

ICS Calendar Format

Standard RFC 5545 format with:

  • VEVENT entries for each session
  • RRULE for recurring events
  • Compatible with all major calendar apps

🐛 Troubleshooting

Timer Not Auto-Starting

Problem: Scheduled session didn't start automatically
Solutions:

  • Keep browser tab open
  • Check session time matches current time
  • Verify correct day is selected
  • Refresh page and wait for next check (30 seconds)

Data Lost After Closing

Problem: Settings/stats disappeared
Solutions:

  • Don't use Incognito/Private mode
  • Check browser isn't clearing data on exit
  • Export data regularly as backup
  • Use same browser consistently

Notifications Not Working

Problem: No browser notifications appearing
Solutions:

  • Click "Test Notification" to trigger permission prompt
  • Check browser notification settings
  • Ensure notifications not blocked for the site
  • Try different browser if issue persists

Extension Not Blocking

Problem: Websites not being blocked
Solutions:

  • Verify extension is installed and enabled
  • Check Developer Mode is ON
  • Start a focus session first
  • Refresh blocked site pages
  • Check browser console for errors

Stats Not Updating

Problem: Minutes/streak not increasing
Solutions:

  • Complete full sessions (don't stop early)
  • Check daily reset happened at midnight
  • Verify localStorage isn't full
  • Try export/import to reset stats

Ideas for Enhancement

  • Multiple timer modes (Pomodoro variations)
  • Sound effects and audio alerts
  • Dark mode toggle
  • Weekly reports and charts
  • Goals and milestones
  • Team/shared sessions
  • Mobile app version
  • Safari extension support

📄 License

MIT License - Feel free to use, modify, and distribute!

🙏 Credits

Created for focused professionals, students, and anyone seeking to maximize their productivity through deep work principles.

Inspired by:

  • Cal Newport's "Deep Work"
  • Pomodoro Technique
  • Freedom and Cold Turkey apps

📞 Support

Common Questions

Q: Does this work offline?
A: Yes! After first load, works completely offline.

Q: Can I use on multiple computers?
A: Yes, but data doesn't sync. Use Export/Import to transfer.

Q: Is my browsing history tracked?
A: No! Extension only checks current URL during sessions.

Q: Can others see my blocked sites?
A: No, everything stored locally on your device only.

Q: What if I need to access a blocked site urgently?
A: Click "Override (Break Focus)" - but it ends your session.


🌟 Star This Project

If you find this tool helpful, please share it with others who might benefit from improved focus and productivity!

Version: 1.0.0
Last Updated: 2025
Status: Active Development


Made with ❤️ for deep work enthusiasts everywhere

About

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors