<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: IbnH</title>
    <description>The latest articles on DEV Community by IbnH (@ibnh).</description>
    <link>https://dev.to/ibnh</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3085488%2F45f8bb59-cf1c-4282-adef-898f484a50a6.jpg</url>
      <title>DEV Community: IbnH</title>
      <link>https://dev.to/ibnh</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ibnh"/>
    <language>en</language>
    <item>
      <title>I Built a Tool That Turns YouTube Videos Into Notion Pages — Here’s How</title>
      <dc:creator>IbnH</dc:creator>
      <pubDate>Mon, 22 Jun 2026 14:49:32 +0000</pubDate>
      <link>https://dev.to/ibnh/i-built-a-tool-that-turns-youtube-videos-into-notion-pages-heres-how-42ag</link>
      <guid>https://dev.to/ibnh/i-built-a-tool-that-turns-youtube-videos-into-notion-pages-heres-how-42ag</guid>
      <description>&lt;p&gt;I often finish a YouTube video and realize I've already forgotten the key points. My usual fix: grab the transcript (either through a transcript service or directly from YouTube on my laptop), paste it into AI for a structured summary, then copy everything into my Notion knowledge base so I can revisit it later.&lt;/p&gt;

&lt;p&gt;After doing this about 50 times, I asked myself a simple question: &lt;em&gt;wouldn't it be great if an app just did all of this for me?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;That's how Y2Notion was born: a SaaS tool that turns any YouTube video into a structured Markdown summary, with one click to save it straight to Notion.&lt;/p&gt;

&lt;h2&gt;
  
  
  My approach to building
&lt;/h2&gt;

&lt;p&gt;I started by planning out the project. I created a Notion page describing the tool, listing its core features, and laying out a step-by-step implementation plan. I identified two core features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A YouTube-to-Markdown converter&lt;/li&gt;
&lt;li&gt;The ability to save the summary as a Notion page&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Next, I thought about the tech stack. I went with Next.js simply because it's the framework I'm most familiar with. For fetching YouTube transcripts, I asked Claude for a recommendation, and it pointed me to a package called &lt;code&gt;youtube-transcript-plus&lt;/code&gt;. For the AI summarizer, I picked Groq mainly because it's free. Those were the only decisions I made upfront — for a full list of the libraries I used, check the "Resources" section.&lt;/p&gt;

&lt;p&gt;While building the core features, I kept a &lt;code&gt;TODO.md&lt;/code&gt; file open on the right side of VS Code to track progress. It's a simple system, but it makes a real difference — both for staying organized and for avoiding distractions like refactoring code that doesn't need it. The file has four sections, and I drag tasks between them as they move forward:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Not Started&lt;/li&gt;
&lt;li&gt;In Progress&lt;/li&gt;
&lt;li&gt;Bugs&lt;/li&gt;
&lt;li&gt;Done&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Whenever something comes to mind, it goes into "Not Started." Once I'm ready to work on it, I move it to "In Progress." I try to keep no more than three tasks in progress at a time. Here's what the &lt;code&gt;TODO.md&lt;/code&gt; file looks like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# TODO&lt;/span&gt;

&lt;span class="gu"&gt;## Not Started&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; Save Notion pages to the location of the user's choice.
&lt;span class="p"&gt;-&lt;/span&gt; Add Cloudflare Turnstile to verify API usage.

&lt;span class="gu"&gt;## In Progress&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; [ ] Let the user choose where the Notion page summary should be saved before creating it.
&lt;span class="p"&gt;-&lt;/span&gt; [ ] Add an authentication system.

&lt;span class="gu"&gt;## Bugs&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; Markdown previewer becomes too large on smaller screens.

&lt;span class="gu"&gt;## Done&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; [x] Create YouTube-to-Markdown route
&lt;span class="p"&gt;-&lt;/span&gt; [x] Create transcript function
&lt;span class="p"&gt;-&lt;/span&gt; [x] Create Groq summarizer function
&lt;span class="p"&gt;-&lt;/span&gt; [x] Show summary in frontend
&lt;span class="p"&gt;-&lt;/span&gt; [x] Add functionality to save summary to Notion
&lt;span class="p"&gt;-&lt;/span&gt; [x] Redirect user to authorization page to grant page-creation permission
&lt;span class="p"&gt;-&lt;/span&gt; [x] Create page in user's Notion workspace
&lt;span class="p"&gt;-&lt;/span&gt; [x] Create a design system with a defined color scheme and typography
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What is next, and three things I learned
&lt;/h2&gt;

&lt;p&gt;I've finished the MVP, the summary feature, and the Save to Notion button. Now I'm focused on making the application actually feel like a SaaS product. That means adding an authentication system so users can save their summaries and eventually introducing a premium tier with a higher monthly request limit. I'm also tightening up security by implementing Cloudflare Turnstile, which should make the API far less vulnerable to spam and bots.&lt;/p&gt;

&lt;p&gt;Along the way, I've picked up three lessons worth sharing.&lt;br&gt;
First, the perfect plan doesn't exist. Sometimes it's better to just start and figure things out as you go; over-planning often just wastes time.&lt;/p&gt;

&lt;p&gt;Second, avoid refactoring code while working on a different task. It pulls you into multitasking, which usually slows you down more than it helps.&lt;br&gt;
Third, AI is genuinely useful for generating a design system. It frees you up to focus on the features that actually matter.&lt;/p&gt;

&lt;p&gt;Those are the three lessons so far, and I expect there will be more before this project is done.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/package/sonner" rel="noopener noreferrer"&gt;sonner&lt;/a&gt; for showing toast messages.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/package/@egoist/youtube-transcript-plus" rel="noopener noreferrer"&gt;youtube-transcript-plus&lt;/a&gt; for getting YouTube transcripts.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/package/react-markdown" rel="noopener noreferrer"&gt;react-markdown&lt;/a&gt; for displaying markdown and &lt;a href="https://www.npmjs.com/package/@tailwindcss/typography" rel="noopener noreferrer"&gt;@tailwindcss/typography&lt;/a&gt; for improving the spacing &amp;amp; typography.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>nextjs</category>
      <category>saas</category>
      <category>buildinpublic</category>
    </item>
  </channel>
</rss>
