🚀 CodeTube: Transform YouTube Tutorials into Interactive Learning Courses

🌟 Inspiration

We realized that many students watch hours of coding tutorials on YouTube but rarely turn that time into practical learning. Jumping back and forth between timestamps, copying code manually, or taking scattered notes makes the process tiring and unproductive. We wanted to change that — to help students learn actively, not just passively watch. That’s how CodeTube was born.

💡 What It Does

CodeTube transforms any YouTube coding tutorial into an interactive course. Users can:

Import any YouTube video link.
Automatically extract timestamps and chapters from the video description.
Generate AI-powered summaries and code explanations.
Save and organize code snippets with notes.
Export the complete course as Markdown files to a new GitHub repository — ready for portfolios or sharing.

We also used Reimagine Web.dev to enhance our landing page visually and analytically — improving SEO, GEO optimization, and overall UI interactivity with animations and smart design suggestions.

🏗️ How We Built It

We built CodeTube on a modern, serverless architecture for scalability and speed.

Frontend: Next.js (App Router) + React + TypeScript
UI/Styling: Tailwind CSS + ShadCN UI + Lucide React Icons
AI Integration: Google Gemini models via Genkit for summaries and code understanding
Database & Auth: Firebase Firestore + Firebase Authentication
API Integration: GitHub API via Octokit for auto repository creation and commits
Hosting: Firebase App Hosting
Optimization: Reimagine Web.dev for visual and SEO enhancements

🧩 Challenges We Ran Into

Parsing YouTube timestamps accurately across various description formats.
Managing API rate limits when integrating with GitHub for repository automation.
Structuring AI-generated content consistently for Markdown export.
Designing a dynamic UI that feels modern but still performs well on slower networks.

🏆 Accomplishments We’re Proud Of

Successfully integrated YouTube parsing, AI summarization, and GitHub automation in one seamless flow.
Redesigned the entire landing page using Reimagine Web.dev, adding animations, structured data, and interactive elements.
Created a tool that helps students learn by doing — converting long tutorials into structured, hands-on coding experiences.

📚 What We Learned

How to integrate Generative AI (Gemini) effectively in an educational tool.
The importance of UX and visual feedback in improving learning engagement.
How GEO (Generative Engine Optimization) can enhance content visibility in AI-driven platforms.
Best practices for automating GitHub workflows with Octokit.