Inspiration
I often found myself pausing videos to write notes, losing the flow. I wanted a seamless way to capture insights without breaking concentration.
What it does
StudySync is an AI-powered study companion designed to help you learn from YouTube videos more efficiently.
How we built it
I built StudySync using vanilla HTML, CSS, and JavaScript. I integrated the YouTube IFrame API for playback and LocalStorage to save progress. For the AI feature, I connected the YouTube Transcript API to fetch text and Google’s Gemini API to summarize it.
Challenges we ran into
The biggest hurdle was synchronizing timestamps accurately. I also struggled with API rate limits and CORS issues when fetching transcripts. Most importantly, I learned the hard way about security—hardcoding API keys in client-side code is a major risk.
Accomplishments that we're proud of
Seamless API Integration: Successfully connected the YouTube IFrame API and Google Gemini API to enable real-time video playback and AI summarization within a single interface. Timestamp Synchronization: Built a custom system where notes are locked to specific video times, allowing users to instantly jump back to key moments by clicking a note. Zero-Backend Persistence: Implemented LocalStorage to save sessions, notes, and progress without requiring a server or database, ensuring a lightweight and fast experience. Intuitive UI: Designed a distraction-free, dark-mode interface that mimics professional code editors, prioritizing focus and ease of use for deep study sessions.
What we learned
This project taught me how to manage asynchronous API calls and the importance of securing credentials. It showed me how AI can augment traditional study tools.
Log in or sign up for Devpost to join the conversation.