← Back to Projects
TuneIn
Independent Project
Focus-music web app with mood-based YouTube playlists and a session timer for distraction-free study/work, built with React and deployed on Vercel.
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%