Hey devs! 👋
Ever watched a long tutorial on YouTube and thought "I wish I could extract notes, get summaries, or even quiz myself on this!"?
Well, I built something to fix that.
Introducing TubeTutor – a React web app that transforms any YouTube video into an interactive learning experience.
🧠 What's TubeTutor?
TubeTutor is a tool for students, self-learners, and curious minds that uses YouTube as its knowledge source and wraps AI magic around it. 🪄
Give it a YouTube URL, and it’ll:
🎙️ Transcribe the entire video
✍️ Summarize the key points
📌 Generate bullet-point notes
❓ Create quizzes based on the content
💬 Provide chat-based Q&A from the video
Yup, all in one place. 😎
⚙️ How It Works (a peek under the hood)
Here’s the secret sauce:
🔗 YouTube Video Input
Paste a YouTube video link
App extracts video ID and fetches captions (via YouTube API or custom backend magic)
🧠 AI-Powered Summarization
Transcriptions are sent to a backend using OpenAI (GPT) APIs
Output: neat summaries, structured notes, even multiple-choice questions!
💬 Chat with the Video
A built-in chat interface lets you ask questions about the video
Think of it as a personal tutor trained only on that content
🎨 Built with React
Frontend: React + Tailwind for clean, fast UI
Backend: Node.js + Express + OpenAI
Extras: Firebase for Auth, and maybe MongoDB for saving sessions
🎯 Use Cases
🧑🎓 Students: Convert 1-hour lectures into bite-sized notes & quizzes
🧠 Self-Learners: Use chat to clarify concepts from any tutorial
🧑🏫 Teachers: Generate study material from YouTube videos automatically
📚 Exam Prep: Use MCQs and notes for quick revision
😄 Why I Built It
I was binge-watching AI tutorials and thought:
“Why can't YouTube videos be as interactive as real classes?”
So, I hacked together a solution.
It started as a weekend project, and now it's a full-fledged tool I (and many others) use daily.
📸 Sneak Peek
Here’s what it looks like:
(Insert screenshots/gif of the interface with the video + notes + chat + quizzes)
🛠️ Tech Stack
Frontend: React, TailwindCSS
Backend: Node.js, Express
APIs: OpenAI (for NLP), YouTube Data API
Database: Firebase/MongoDB
Hosting: Vercel
🌐 Try it Out
Live at: https://tubetutor.vercel.app
Source Code: https://github.com/ayaanoski/tubetutor
💡 Future Ideas
🌎 Multilingual transcript support
📥 Export notes to PDF/Notion
🧠 Personalized learning paths
🎯 Quiz scoring & progress tracker
❤️ Shoutout
Big shoutout to:
OpenAI for their API
React community for being awesome
YouTube devs for making video data accessible
👋 Final Thoughts
TubeTutor is more than just a video summarizer.
It’s a study companion that helps you watch smarter, not harder.
Let me know what you think, or if you’d like to collaborate on taking this to the next level! 🚀
Top comments (0)