Reel Rewards

Inspiration

We've always been distracted by reels. So we wanted to make something that could help us stop being so distracted while doing our work.

What it does

Reel Rewards is a study accountability platform that blocks distracting websites during focus sessions while tracking progress and rewarding consistency.

Key Features:

Pomodoro Timer: Enforces focused 25-minute study sessions with scheduled breaks
Distraction Blocking: Blocks Instagram, YouTube, Reddit, and other configured sites during sessions
Streak System: Visual 7-day streak tracker that shows study consistency with book emojis
Progress Analytics: Interactive charts showing study time by subject with daily/weekly views
Social Leaderboards: Compete with friends on total study hours
Statistics Dashboard: Track total minutes, average session length, and productivity patterns

The core innovation combines distraction prevention with positive reinforcement—you're not just avoiding bad habits, you're building good ones and getting rewarded.

How we built it

Tech Stack:

Next.js 14 with React for the frontend
Tailwind CSS for styling
MongoDB with Mongoose for data storage
Recharts for data visualization
Custom authentication with SHA-256 hashing

Challenges we ran into

Timer Drift: Initial setInterval implementation caused time lag. Fixed by using Date.now() calculations instead of incremental updates.

Infinite Recursion Bug: Accidentally created const Timer = () => <Timer /> inside a component, causing browser crashes. Solved by proper component imports.

Timezone Issues: Dates were interpreted as UTC, breaking streak calculations. Normalized all dates using timezone offset adjustments.

State Management: Learning when to use useState vs useRef for timer values to avoid unnecessary re-renders.

Accomplishments that we're proud of

Clean, intuitive dashboard that makes complex data approachable
Smooth SVG circular timer with real-time progress animations
Scalable MongoDB schema handling unlimited sessions per user
Complete authentication system built from scratch
Fully responsive design across all devices
Landing page that effectively communicates the product vision

What we learned

Technical:

Timestamp-based calculations for time-sensitive features
Next.js App Router and Server vs Client Components
MongoDB aggregation and data modeling
SVG animations and CSS transforms

Product:

Gamification works when it taps into real psychological motivators
Visual feedback is crucial—every action needs immediate response
User flow matters more than individual features
Building for ourselves first creates authentic solutions

What's next for Reel Rewards

Browser Extension: Chrome/Firefox extension that actively blocks distracting sites during study sessions, showing motivational messages like "You're on a 5-day streak! ⏰ 12:34 remaining"

AI Study Insights: Machine learning to analyze patterns and provide recommendations: "You study best 2-4 PM—consider rescheduling your 10 AM session"

Social Features: Virtual study rooms with synchronized Pomodoro sessions, QR code friend adding, weekly challenges with group progress

Mobile Apps: Native iOS/Android apps with push notifications, widgets, and deep OS-level distraction blocking

Educational Integration: Partner with universities for campus-wide deployment, LMS integration, and class-wide analytics dashboards

Vision: Make Reel Rewards the default productivity platform for students worldwide—helping millions reclaim thousands of hours from the attention economy and redirect that energy toward education and growth.