← Back to Projects
TuneIn
Independent Project
Tech: React, JavaScript, CSS, YouTube Data API, Vercel. Key challenges were syncing session timers with variable video lengths, autoplay restrictions, and quota limits. I built a playlist stitcher that queues multiple tracks to match the timer and added debounced, cached searches. Result: timer-to-track sync is within ±10s for ~95% of sessions with cold loads ≈1–1.5s on desktop.
Key Highlights
- Designed and implemented complete React architecture from scratch
- Integrated YouTube Data API with custom playlist management
- Built responsive UI with focus on minimal distractions
- Optimized performance achieving sub-1.5s load times
- Deployed on Vercel with continuous integration
Problem
Students and professionals struggle to find the right background music for focused work sessions. Existing solutions either lack session timing features or require constant manual playlist management, breaking concentration.
Solution
Built a seamless focus-music app that combines mood-based YouTube playlists with an integrated session timer. The app automatically manages playlist transitions and maintains focus flow without user intervention. Implemented smart caching and playlist stitching to handle API quota limits.
Technical Challenge
YouTube API quota limits restricted to 10,000 units per day, and browser autoplay policies prevented seamless music continuation. Variable video lengths made it nearly impossible to sync session timers accurately, while search operations consumed excessive quota units.
Technical Solution
Implemented a custom playlist stitcher algorithm that pre-calculates video durations and queues multiple tracks to match timer duration within ±10 seconds. Built an intelligent caching layer using localStorage to store search results and playlist data, reducing API calls by 60%. Created a user-interaction handler to bypass autoplay restrictions while maintaining seamless experience.
Results
- Timer-to-track synchronization within ±10 seconds for 95% of sessions
- Cold load times reduced to 1-1.5 seconds on desktop
- Zero-interruption playlist transitions during work sessions
- Cached search results reducing API calls by 60%
- Mobile-responsive design working across all devices