Study Focus Lock

• 

  Study Focus Lock

Inspiration

I built FocusLock because, as a student, I found it really hard to stay focused while studying on my computer. I also heard from classmates who faced the same problem — distractions from apps and websites made it tough to concentrate. I wanted to create a tool that gives students control over their study time and helps reduce procrastination without forcing rigid methods.

What it does

FocusLock is a desktop app that lets students set custom focus sessions and blocks distracting apps and websites during that time. It provides a clean, simple interface that helps users stay on track with their study goals.

How we built it

FocusLock is a desktop app built using Electron, which allows creating cross-platform apps with web technologies like HTML, CSS, and JavaScript. The app runs in fullscreen and removes native window controls to minimize distractions. It uses a built-in browser view to display study links and lets users set custom timers for focus sessions. The app communicates between its main and renderer processes to handle tasks like closing the app when the timer ends. This setup makes FocusLock lightweight, easy to use, and effective for students wanting a distraction-free study environment.

Challenges we ran into

Initially, I used the tag to embed study links within the app, but it caused issues because many websites block iframes for security reasons like Content Security Policy (CSP). This made some links fail to load properly. To fix this, I switched to using Electron’s <webview> tag instead. The <webview> is designed for desktop apps and allows loading external websites more reliably and securely, improving the user experience.</p> <h2 id="accomplishments-that-were-proud-of">Accomplishments that we&#39;re proud of</h2> <p>I’m proud to have built a fully functional desktop app solo in a short hackathon timeframe. The app is user-friendly, flexible, and addresses a real problem many students face.</p> <h2 id="what-we-learned">What we learned</h2> <p>I learned a lot about desktop app development, user interface design, and handling background processes for blocking distractions. I also realized how important flexibility is when designing productivity tools — not everyone benefits from strict timing methods.</p> <h2 id="whats-next-for-study-focus-lock">What&#39;s next for Study Focus Lock</h2> <p>I plan to improve the app by adding features like detailed usage statistics, customizable break reminders, and syncing across devices. I also want to conduct user testing to gather feedback and make the app even more effective.</p>

Built With

• css3
• electron
• html5
• ipc
• javascript
• node.js