Inspiration
Many students study with their phone next to them, and one notification can break their focus. A TV is the biggest screen at home, and it is usually used only for entertainment. We wanted to turn it into a calm study space that the whole family can use with just a remote.
What it does
StudyTV is a focus timer and daily task list made for the TV screen.
- A big Pomodoro timer with Focus (25 min), Short break (5 min) and Long break (15 min) modes
- A long break is suggested after every 4 focus sessions
- Add, tick and remove daily tasks
- Daily counters for finished focus sessions and completed tasks
- A new motivational line every day and a sound alert when the timer ends
- Fully controlled with remote-style keys: arrow keys to move, Select to press, Play/Pause to start or pause the timer, Back to return to the Start button
How we built it
StudyTV is a single-page web app built with HTML, CSS and JavaScript, with no external libraries. The interface uses a large "10-foot" layout with big text and clear focus highlights so it is readable from a sofa. A custom spatial navigation system moves focus in the direction of the arrow keys, which works like a TV remote D-pad. Tasks and daily stats are saved with localStorage. The timer uses real clock time, so it stays accurate even if the page is busy.
Challenges we ran into
Designing for a TV is different from a website: there is no mouse, so every button must be reachable by arrow keys and the focus must always be visible. Building the navigation logic and keeping the layout readable from far away took the most effort. We also had to build the whole project in a very short time as first-year students.
Accomplishments that we're proud of
A complete, working app that can be used entirely without a mouse, with a clean design made for the big screen.
What we learned
We learned about TV-style user interfaces, keyboard and remote navigation, accessibility through visible focus states, and how to ship a project under a tight deadline.
What's next for StudyTV
- Package the app for Fire TV and test it on a real device
- Alexa voice commands such as "Alexa, start a focus session"
- Weekly study history and streaks
- Custom timer lengths and calming background sounds
Built With
- css3
- html5
- javascript
- web-audio-api
Log in or sign up for Devpost to join the conversation.