Inspiration
Staying focused while studying is harder than ever. Modern apps are designed to capture attention, making it extremely easy to fall into distraction loops like “just one YouTube video” or a quick social media check. We wanted to build a tool that doesn’t just block distractions, but **confronts the user with their own behavior in real time. Instead of silently blocking websites, we created a system that makes distraction visible and memorable. This led to the idea of Caught In 4K a focus app that literally catches you when you try to procrastinate.
What it does
Caught In 4K is a desktop productivity application designed to help students stay focused. When a user starts a focus session:
- A study timer begins.
- The webcam activates locally.
- The system monitors for distraction attempts.
If the user tries to open a distraction (simulated in the demo by apps like YouTube or Instagram):
- The screen instantly switches to a full punishment overlay
- A collage of webcam snapshots of the user appears
- A message like “Focus Breach Detected” is displayed
The idea is to create a moment of self-awareness that pushes the user back into focus. The app also tracks:
- focus sessions
- distractions
- productivity scores
How we built it
The application is built with a modern full-stack architecture.
*Frontend
- React
- TypeScript
- HTML/CSS
- TailwindCSS
The frontend handles:
- the user interface
- focus timer
- webcam capture
- distraction detection
- punishment overlay UI
*Backend
- Python
- FastAPI
- SQLite database
The backend stores:
- session data
- distraction events
- focus scores
- session statistics Desktop Application
- Electron
Electron wraps the React frontend into a native desktop application window, allowing the app to run like a normal program.
Communication between frontend and backend happens through a local REST API.
Accomplishments that we're proud of
We’re proud that we were able to build a fully functioning desktop application within the time constraints of the hackathon.
Key achievements include:
- A complete focus session system
- Real-time webcam accountability feature
- A polished punishment overlay UI
- A working full-stack architecture
- Packaging the project as a desktop application
Most importantly, we created a project that is both functional and memorable.
What we learned
Through this project we learned:
- How to integrate webcam APIs into a modern web application
- How to connect a React frontend with a Python FastAPI backend
- How to package a web application as a desktop application using Electron
- The importance of building a clear and simple demo experience for hackathons
We also learned that sometimes the most effective productivity tools are the ones that make users reflect on their own habits.
What's next for Caught In 4K
Future improvements could include:
- Real detection of distracting applications and websites
- AI-based distraction prediction
- integration with study tools and calendars
- improved analytics and productivity tracking
- optional multiplayer accountability features with friends
Ultimately, we believe Caught In 4K could evolve into a powerful tool that helps students and professionals build better focus habits in a distraction-heavy digital world.
