YouTube Video Transcript

Hello everyone. Today we're going to build this YouTube transcription app. We'll be using Superbase for authentication and back-end services. The app has two plans, free and pro. The user simply enters a YouTube URL and the app instantly transcribes the video. You can download the transcript in the format you prefer. We've also added rate limiting, so once the free credits are used, the app asks the user to upgrade to the pro plan. And with Stripe, we've implemented subscription payments. This is the platform we're going to use to build our app hosting horizons. With this, you can create fully functional websites and web apps just by chatting with AI and deploy them with a single click. You can simply type your prompt and hit the start free button and Horizons will generate everything for you. There are also free pre-made templates you can pick and start editing. It's basically an all-in-one platform handling code, design to content, SEO tags, Stripe and Superbase integrations, fast deployment, domain management, email, everything in one place. Once you create your Hostinger account, just navigate to hostinger.com/horizons. Here you can upload an image or use the mic to speak. Use whichever option you prefer, but I'll type my prompt directly. First, I paste my initial prompt, build a YouTube transcription app. The user pastes a YouTube link. The app converts the video to a transcript and lets the user download it as a TXT orJSON file. For transcription, we need an API. I'm using Rapid API, an API hub with over 80,000 APIs across many categories. I'm searching for YouTube transcription APIs. There are many options, but I'm choosing this one. It has a 9.9 rating and solid free limits. Here you can also switch the programming language and fetch libraries. Click the test subscribe button. Here you can see the 0 plan. No cost and no card required. You only pay if you exceed the limit. Now the API is subscribed. Now we are able to test the API. As you can see, we're getting a 200 status and the transcription is returned. Now we can copy the code snippet. Then we tell Horizons to use Rapid API and paste the code we copied. Next, we copy the sample response. You can use the example response shown here or the actual response we received from the API test. I'll copy the response we got and provide that as well. This helps Horizons understand the exact data structure coming from the API. so it can generate better code and handle the response correctly. So I'm going to submit this whole prompt now before starting here are my credits. I have 398 now. I'm going to build the full app and it will use just three credits. I've already used one. So after this request completes it will drop by one which means it will become 397. Then I'll use two more credits for the superbase and stripe steps. Free credits are also available, so you can try everything first. Once it feels suitable for you, you can move to a pricing plan. There are four different plans, and each one already includes a discount. If you use my coupon code, cap 10, you'll get an extra 10% off. You can choose any plan you prefer, but I recommend the starter plan, which gives you 70 credits per month. Horizons is working on creating the front end. So at the same time, I'll show the integration options. We have Superbase, which we'll use for authentication, data storage, and back-end features. Next is the online store option. This one is impressive. It can create a full e-commerce admin panel in one click with no prompting. It sets up everything for managing products, orders, payments, and more. Next is analytics. Once you deploy the website, you can track website views and related metrics. And the final one is Stripe integration for payment subscriptions. For this app, we'll be using both Superbase and Stripe. And we also have an AI chat option where you can ask about the services or any other concerns. You can see the AI has finished the work. It created all the React components. It also mentions one step we need to do before checking the app. We have to provide the API key inside this component file. We already pasted the key earlier, but for security reasons, Horizon skipped it. So, I added it again. But this is not secure because this is a front-end app and your API key will be exposed. That's exactly why we're going to integrate Superbase backend services. For now, we'll leave it here. We also have a mobile preview option where you can check the response. And there's a live edit content option where you can pick any content and modify it. And this does not use any credits. In the code preview, you can see all the code and you can also download it locally. This front end is built using ReactJS and Tailwind CSS. Now, let's go and check the app. I'm going to take one of my YouTube video URLs, paste it here, and click the fetch transcript button. You can see we got the transcript which means rapid API is working and our front-end app is working as well. And here for this Google code wiki video the transcript is coming correctly. It's not static data. Nice. Finally, we also have the download options both JSON format and text format. Awesome. Next, we'll integrate Superbase into this app. I'm going to create a new project. Now, choose your organization. Create the project and set your database password. Once the project is created, go back to Horizon's and reopen the Superbase integration option. Now you'll see the new project listed. Just click the connect button and Horizons will automatically connect Superbase to our app. Just like before, connecting it won't reduce any credits. Now I'm going to paste this prompt. move the rapid API transcript call into a superbase edge function and connect email authentication as well. I'll submit this prompt and this will use our second credit. In less than a minute, it completed both tasks. It also shows what was changed and created. First, the Rapid API key is now securely stored in the Superbase environment, so it's no longer exposed in the front-end code. Awesome. Second, new edge functions were created for transcription, so the fetching now happens on the server side. Third, users must log in before accessing the transcription tool. Awesome. And finally, it created the sign-in and signup UI pages. See how clearly it explains everything. Same as before, to check the app, we need to do one more step. We have to go to the superbase edge function and add the rapid API key in the environment variables. Here you can see the edge function that Horizon's created for us and you can view all the code for this function. It's pulling the API key from the Superbase environment. So I'm going to the secrets tab. I noticed Horizon's has already added the API key. Sometimes it adds it automatically. So just verify it once. One more thing, before signing up in your app, go and disable the confirm email option because the verification email will try to send to localhost. Once you move your app to production, you can enable this option again. I'm going to create an account using my email. And nice, we're logged in. To verify it, go to the Superbase users tab and refresh the table. You'll see the user we just created. Awesome. Authentication is working. Next, I want to show how the transcription API call is running. I'm going to transcribe the video again. Here you can see the API request. Just open it. You can see the endpoint calling the Superbase function along with the user token. Awesome. That means our app is fully secure. Here you can see I have 396 credits. We've used two credits so far. Next, we'll integrate Stripe for payment subscriptions. Now, open the Stripe guide. It's very useful. We'll start from this step. First, you need to create an account. And I've already created mine. Next, we need to set up the subscription flow. Open the product catalog page and add your plan name like Pro Plan. I'm following the same process. I'll create a new plan with the amount and set it to renew monthly. Once you create it, you need to copy the price ID. You can find it in the log section. This is our price ID, so just copy it. Now, I'm going back to Horizons, and I'm going to type the prompt to set up Stripe subscriptions for both the free and pro plans. The free plan will have three credits for transcription, and the pro plan will have 50 credits per month. Next, I'll paste the price ID I copied earlier. After that, we need the public key and secret key. You'll find both on the Stripe developers page. So, I'll just copy and paste them into Horizons. Then, I'll mention that we also need to set up the edge function for Stripe. So, all Stripe related API calls run on the backend side. Horizons will follow these steps and create a secure payment setup. The AI has completed the work and it's showing what's ready now. Next, we need to verify whether the Stripe keys were added in Superbase. For me, the keys were already added. Now, we need to set up one more key, the Stripe web hook secret. The web hook listens to all Stripe events like payment success, failure, and other updates. The create checkout session edge function is used to initialize the checkout page. And we also have the Stripe web hook edge function. This gets called after the payment succeeds or fails. This is where we update the user's account to pro. So first we need to copy this function URL. Next we create a new web hook event. For now, select all the events and just continue through the steps. In the endpoint URL field, paste the function URL. I added the URL twice. Then click add destination. Now copy the first signing secret key because this is the one that listens to all events. Now go to the Superbase web hook environment key and paste this signing secret key. That's it. In the Stripe events tab, you can see all the events happening afterward. One more thing in Superbase. It created a new profiles table for tracking the user's payment status and credits. Right now it's empty. So we need to create a new user. I'm going to create a new user for our app. You can see this user has three credits because we're on the free plan. So, I'll quickly use my three credits by hitting the submit button three times. At the same time, you can see the credits reducing. Now, we've used all the credits. And if I submit again, it asks for payment. The insufficient credits error also shows up. Awesome. The rate limit system is working perfectly. So, I'm going to subscribe to the pro plan. Now, the Stripe checkout page is loading fine, and I'm entering the test card number, expiry date, and test CVC code along with the card holder name. Once everything is entered, click subscribe. The payment is processing. Boom. Payment completed. And now you can see we're on the pro plan showing 50 credits. And everything is working fine as well. Here you can see my credits. We started with 398 and now we have 395. That means everything front end, backend, off and payments was built with just three credits. And if you want, you can use a few more credits to add extra features like storing transcription history or even creating an admin dashboard for management. And if you want to publish the app, just click the publish button. It only takes a few seconds and boom, the app is deployed. You can share the link with others right away. One click and it's live. Awesome. And if you want a custom domain, you can get it directly from Hostinger as well. So basically everything is in one platform. Building, deploying, and monitoring your app. So, in the end, we created a secure full stack app with transcription, login, credit limits, Stripe subscriptions, and live deployment all inside Horizons. You get building, deployment, monitoring, and domains in one place. Go and try it out and see how much you can build. And don't forget, use my coupon code cap 10. Thanks for watching.