AI Short Video Generator SaaS with NextJs TypeScript

Set up a brand new Next.js project with TypeScript, ESLint, app router, and turbo pack, then run npm run dev to view the app locally.

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.

Configure navigation for the ai short video generator app by installing a menu bar, building a top nav tsx, and integrating it into the shared layout to power dropdowns.

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.

Enable dark mode for this ai short video generator saas by installing the next themes grid provider and wrapping your layout, with a simple toggle to switch themes.

Implement Clerk authentication in a Next.js app by configuring keys in env files, wrapping with the Clerk provider, protecting dashboard routes with middleware, and surfacing sign-in and sign-out controls.

Learn to build and wire navigation links for a protected dashboard in a Next.js app, routing to dashboard and create video pages, with base routing and simple styling.

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.

Generate a video script using Google's Gemini API in Google AI Studio, set up API keys, and build a node.js prompt workflow that outputs JSON with image prompts and text.

Explore building a Next.js TypeScript AI short video generator by implementing a create video page with a Gen AI call, scene prompts, and clean JSON responses.

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.

Set up a global context and initial state to manage video creation options, including selected story, style, and custom prompts, with handlers to update state and submit data.

Implement story options on the video create page with custom prompt support, style options, and storage handling. Show a live preview in a responsive two-column grid for generated videos.

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.

Select style images to power ai-driven video creation in a Next.js TypeScript SaaS. Create prompts, generate scripts, images, captions, and a live preview, then save videos to the database.

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.

Hardcode a fixed json response to simulate repeated api calls during development, then return this static response for testing before implementing image, text-to-speech, and captions.

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.

set up cloudinary and replicate integration to generate videos and save them to cloudinary, using server-side access to env vars and a dedicated replicate.ts for configuration.

Implement a server action that uses Replicate to generate an image, streams the data, uploads the buffer to Cloudinary, and returns the Cloudinary URL after saving to the database.

Generate images for each video scene from per-scene prompts using a generate image function, then leverage Promise.all to handle results and upload the images to Cloudinary.

Organize a video generation workflow by modularizing tasks into separate functions for script generation, image creation, and text-to-speech, using mock data for development.

Set up Google text-to-speech in a Next.js TypeScript project by enabling the API, configuring billing, and adding your API key to the env file.

Learn to generate speech from text with Google text-to-speech, add a short pause via SSML, encode as mp3, and upload the audio to Cloudinary for a secure URL.

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.

Generate captions from audio using Assembly AI by wiring an API key, transcribing the audio URL, and returning timed caption words for video generation.

Learn to build a split video page for an ai video generator in a nextjs typescript app, using images, audio, and captions with Remotion, and create a responsive two-column layout.

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.

Pass images and captions into a remotion-based video builder, compute total duration from caption timings, then render image sequences with synchronized audio for a Next.js TypeScript SaaS.

Learn how to integrate audio in a NextJs TypeScript ai short video generator using Remotion's audio component, with context-sourced audio and mock functions.

Explore building a caption display for a Remotion video, calculating current time from frame and frame rate to render the active caption text between start and end times.

Enhance image sequencing with a fade transition by calculating start and end frames, using interpolate to drive opacity, and applying a smooth fade-in and fade-out between images.

The lecture demonstrates adding a zoom-in image transition by interpolating a scale from 1 to 1.8 and back, applied to the image transform to create motion.

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.

Connect to mongodb using mongoose by signing up at atlas for connection string, store it in an env file, and create a db.ts utility that ensures database connection before actions.

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.

Learn to save videos to the database, fetch the current user's videos from MongoDB, and display them in a dashboard grid with a dedicated video player.

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 credit-based system for the ai short video generator saas, giving new users five starter credits and deducting per-video credits with PayPal or Stripe purchase options.

Set up PayPal to enable the credit system by creating a sandbox app, obtaining the client ID, and wiring it to an env file to enable the PayPal provider.

Create a reusable loader component to display a spinning icon while the buy credit (PayPal) flow renders, using a React icon library, centered layout, and shadows for the PayPal integration.

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.

Implement a PayPal payment flow for the AI short video generator, offering credit options, creating aud purchase units, and saving paid amount and credits to the database.