
Showcases an ai powered short video generator saas that starts users with five credits, generates scripts, audio, captions, and ai images from prompts, and builds videos in a feature-rich dashboard.
Initialize your project with sets, install a button component, and apply tailwind utilities to center and style the UI using shadcn/ui.
Import Audio Wide from Google Fonts via Next Font and apply it in the css font-family to match the AI powered video generator theme.
Learn how to implement a logo in a NextJs TypeScript dashboard using a placeholder or icon from Logo ipsum or Flat Icon, place logo.png in public.
Create a video context to manage script, images, audio, and captions as a global state, enabling client components to access and update AI-generated video assets via a useVideo hook.
Define story options and image styles on the create video page using constants. Support preset and custom prompts, and organize data in a constants file for Next.js TypeScript.
Learn to design a responsive style selector for an AI short video generator, displaying image thumbnails in a grid with hover effects and a selected style border.
Build a video submission workflow in a Next.js TypeScript app: generate a 32-second script with Gemini, create images with replicate ai, and generate captions with assemblyai.
Build a loading modal component in a Next.js TypeScript app, showing a loading GIF and a dynamic message controlled by context during video creation.
Generate five ai-powered images per video with Replicate AI and upload them to Cloudinary for permanent ownership. Use text to speech to turn the content into video-ready narration.
Explore text to speech workflows in a Next.js TypeScript SaaS, generating audio files from video scripts by mapping scene content, joining text, and returning audio URLs.
Refine an mp3 audio generation workflow by generating a video script, producing an audio file, and handling server responses to deliver a usable audio url.
Integrate assembly ai to generate captions from audio for videos, using google text to speech and cloudinary, and manage api keys via env for testing.
Set up Remotion from scratch by creating a Remotion folder with Remotion-video.ts and root.ts, configuring a Remotion video route and a Remotion player to render a 1280x720 composition at 30 fps.
Switch away from mock functions to enable the video pipeline: generate script, images, and audio, then save captions and the video to the database with error handling and loading states.
Create a video model with mongoose in a models folder, including user email, username, video script (scenes and image prompts), images, audio, and captions, with timestamps, and export the model.
Save generated videos to MongoDB via a server action that retrieves the current user and stores script, captions, audio, URL, images, plus the user email and username.
Implement a dashboard video player by reusing a remotion-like component, pass video data via props and context, and render images, audio, and captions in a responsive grid.
Add a clickable create card on the dashboard that links to the create video page, using a responsive grid with 1 column, 2 on small, and 3 on medium.
Implement a credits page with PayPal buttons and three purchase options (10 for $5, 20 for $10, 50 for $20), including loading states, toasts, and error handling, plus card checkout.
Unlock the power of AI to generate short videos that captivate audiences on platforms like TikTok and YouTube Shorts! In this comprehensive course, "AI Short Video Generator with NextJs & TypeScript," you'll learn to build a feature-rich app from scratch using cutting-edge tools and AI services. Guided by Ryan Dhungel, this course takes you through every detail, from setup to deployment, with practical examples and reusable code.
What You'll Learn in This Course
Build a Full-Stack AI Video Generator App
Set up a responsive and user-friendly app using NextJs, TypeScript, and ShadcnUI.
Use Google Generative AI to create scripts and generate engaging story ideas.
Integrate AI image generation and upload features using server actions.
Add realistic text-to-speech (TTS) functionality and generate accurate captions.
Seamlessly combine AI-generated images, audio, and captions into polished short videos using RemotionJs.
Monetize Your App with Credits System
Implement a credits system for generating videos.
Set up PayPal integration to buy credits securely.
Track user credits and spending with server actions and database management.
Create a Stunning User Experience
Design an elegant landing page with animated titles, parallax images, and pricing cards.
Add a dashboard to display user-generated videos and manage accounts.
Include sections like FAQs, reviews, and a call-to-action for maximum engagement.
Enhance Video Quality with Special Effects
Add smooth transitions, zoom-in effects, and moving effects to videos.
Ensure captions are perfectly synchronized and centered.
Optimize for high performance and minimal latency.
Why Choose This Course?
Step-by-Step Guidance: Follow detailed video lectures accompanied by PDF booklets for easy reference.
Practical Curriculum: Learn by building a fully functional AI video generator app.
Cutting-Edge Tools: Master NextJs, TypeScript, RemotionJs, and multiple AI services.
Monetization Focus: Implement a real-world credits system for SaaS profitability.
Reusable Codebase: Gain access to code that you can adapt for your own projects.
Who Is This Course For?
Developers interested in AI-powered video applications.
Entrepreneurs building SaaS products for social media or video marketing.
Anyone looking to monetize apps with subscription or credit-based systems.
Web developers seeking hands-on experience with NextJs and TypeScript.
Course Highlights
1: Setting Up Your App
Learn to use ShadcnUI for modern design.
Implement dark mode and responsive navigation.
Set up Google Fonts for branding consistency.
2: AI Integration
Use Google Generative AI for script generation.
Build user-friendly options for story styles and themes.
Integrate AI image generation and automate uploads.
3: Creating Videos with RemotionJs
Organize AI-generated assets into videos.
Add audio tracks and captions with precise timing.
Apply professional effects like zoom-ins and smooth transitions.
4: Monetization and User Management
Build a credits-based payment system with PayPal.
Automatically assign credits on user signup.
Track credit usage and update user balances in real time.
5: Launch and Optimize
Create a visually stunning landing page with pricing, FAQs, and reviews.
Deploy the app with a robust backend powered by NextJs server actions.
Extra Features
Includes downloadable PDF booklets for every video lecture.
Learn database management for storing videos, user data, and credit balances.
Build scalable apps ready for deployment to platforms like Vercel or DigitalOcean.
Why AI Short Video Generator Apps Matter
With the rise of short video platforms like TikTok, YouTube Shorts, and Instagram Reels, video content has become an essential marketing tool. This course equips you to create apps that help businesses and influencers generate engaging short videos effortlessly using AI.
Enroll Today!
Take your skills to the next level by mastering AI-powered video generation. By the end of this course, you’ll have a production-ready app and the confidence to build your own SaaS solutions.
Start learning now and turn your ideas into reality!