Inspiration
University can be a stressful time endless assignments, group projects, and late-night study sessions. Our group realized we study best when we’re surrounded by others doing the same thing. Just seeing someone focused makes it easier to stay on track. But with everyone spread out across campus, libraries, and dorms, that sense of shared motivation was hard to recreate. So we built HopperFocus: a fun, community-driven productivity app that helps friends stay accountable and motivated together.
What it does
HopperFocus turns productivity into a friendly competition.
- Leaderboard: Tracks screen time and ranks users less screen time means a higher score. Staying off distractions becomes a fun challenge.
- To-Do List: Lets users organize tasks into categories like Work, School, and Personal.
- Calendar Integration: Syncs with Google Calendar to show events and deadlines right in the app.
The goal is to help people focus on what really matters studying, completing goals, and taking breaks intentionally, not doom-scrolling TikTok.
How we built it
We designed HopperFocus using HTML, CSS, and JavaScript for a clean and responsive frontend. The leaderboard logic calculates rankings based on user screen time, with color indicators (green for least time, red for most). We implemented modals for a full leaderboard view and dynamic blur effects to emphasize the active panel. The task and event systems are structured to easily connect with the Google Calendar API, allowing users to input and sync their schedules seamlessly.
Challenges we ran into
Getting the leaderboard to update dynamically without breaking the layout. Properly styling modals so that the borders and rounded corners stayed visible on all screen sizes.
Accomplishments that we're proud of
- Built a fully functional and visually appealing leaderboard that motivates positive screen habits.
- Designed a calming, rabbit-themed interface that makes productivity feel playful instead of stressful.
- Integrated a responsive to-do list and event tracker that ties everything together.
- Created something our team actually uses to stay accountable for studying!
What we learned
- How important good UI/UX design is for motivation, visuals matter when you’re building focus tools.
- The value of working collaboratively under pressure, we combined creativity, technical skills, and humor to stay motivated.
- That making productivity social can turn a stressful task into something fun and rewarding.
What's next for HopperFocus
- Implement data visualization to show focus trends over time.
- Introduce custom themes (study bunny, night owl, minimalist mode).
- Expand the accountability system with small rewards, streaks, or friend challenges.
Our vision is to make HopperFocus the go-to app for students who want to stay focused, together.
Log in or sign up for Devpost to join the conversation.