Arya Pratap Singh

Posted on Dec 12

Comprehensive Guide: Creating and Running the "Sample Video Generator" with Daytona

#daytona #nextjs #javascript #postgres

Transform text into engaging videos with cutting-edge AI technology ✨

In this blog post, we will explore the Sample Video Generation AI Website project and provide a detailed walkthrough of integrating and running it using the Daytona development environment. This guide will focus on utilizing Daytona's features to streamline the setup and deployment process while diving into the core technologies powering the application. Whether you're a beginner or an experienced developer, Daytona simplifies your workflow and helps you focus on what matters—building amazing projects.

Recommended: Demo with Daytona Video 5 mins

Other Visuals: Demo Videos Generated | Demo Run Website

Project Overview

The Sample Video Generation AI Website is a Next.js SaaS platform that allows users to generate engaging videos from text queries. Designed for marketers, educators, and social media creators, this app leverages cutting-edge technologies to offer a seamless and powerful video creation experience.

Key Features

🎥 AI Video Generation: Transform plain text into dynamic videos.
🔒 Secure Authentication: Powered by Clerk for user login and sign-up.
🗣️ Text-to-Speech: High-quality voice synthesis using ElevenLabs.
🎬 Captioning: Automatically generate captions with AssemblyAI.
💻 Modern UI: Beautiful design using Shadcn/UI, Framer Motion, and Tailwind CSS.
📂 Database Management: Manage user and video data with Drizzle ORM and Neon Database.
🤖 AI Integrations: Utilize OpenAI, Hugging Face, and more for creative outputs.

Technologies Used

Frontend

Next.js: A React framework for building high-performance applications.
Tailwind CSS: Utility-first CSS for styling.
Shadcn/UI + Sonner: Enhances UI components and toast notifications.
Spline: 3D model integration for interactive visuals.

Backend

Drizzle ORM: Database abstraction for Neon Database.
Neon Database: Cloud-based database for user and file management.

APIs and Libraries

Remotion Video: Generate dynamic videos from React components.
OpenAI API: Natural language understanding and text-based content creation.
ElevenLabs: High-quality text-to-speech.
AssemblyAI: Automated audio intelligence for captioning.
Hugging Face: Access to pre-trained AI models for video enhancements.

Why Use Daytona for Development?

Daytona simplifies development and deployment workflows by providing an efficient environment for creating, managing, and deploying projects. It supports features like:

Automated containerized environments.
Workspace management for remote collaboration.
Pre-configured setups for rapid project bootstrapping.

Daytona revolutionizes the way developers create and deploy applications by offering:

✅ Pre-configured, containerized environments: Eliminate setup headaches.
✅ Integrated workspace management: Perfect for remote collaboration.
✅ Streamlined development: Focus on building while Daytona handles the rest.

Getting Started with Daytona

Here’s a step-by-step guide to integrating and running the Sample Video Generator using Daytona.

Step 1: Install Daytona

First, install the Daytona CLI by following the official Daytona installation guide. Ensure you have Docker installed and running on your system.

Linux/macOS

Run the following commands in your terminal:

curl -sfL https://download.daytona.io/daytona/install.sh | sudo bash && daytona server -y && daytona

Windows

Use PowerShell to install Daytona:
This command downloads and installs Daytona and runs the Daytona Server:

$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" }
md -Force "$Env:APPDATA\bin\daytona"; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]'Tls,Tls11,Tls12';
Invoke-WebRequest -URI "https://download.daytona.io/daytona/latest/daytona-windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe";
$env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path, [System.EnvironmentVariableTarget]::User);
daytona serve;

Verify the installation:

daytona --version

Step 2: Create a Daytona Workspace

Use Daytona to clone and set up the project in a containerized environment.

Run the following command:

daytona create https://github.com/daytonaio/sample-video-generator.git

Daytona will automatically set up a workspace with the provided repository. It will:

Clone the project into a new Daytona workspace.
Automatically configure the workspace with the .devcontainer file.

Step 3: Configure Environment Variables

Environment variables are crucial for connecting APIs, databases, and authentication services. Navigate to the root directory of your Daytona workspace and create a .env.local file.

Add the following variables:

NEXT_PUBLIC_DRIZZLE_DATABASE_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_ELEVEN_LABS_API_KEY=
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_CAPTION_API=
NEXT_PUBLIC_OPENAI_API_KEY=

Replace the placeholders with your API keys and database URLs.

Step 4: Build and Start the Project

Daytona includes a pre-configured .devcontainer/devcontainer.json file to streamline the setup. This file specifies settings for the development environment.

Open the workspace using Daytona:

daytona code

Install dependencies:

npm --legacy-peer-deps i

Start the development server:

npm run dev

The app will now be running on localhost:3000 in your Daytona environment.

Step 5: Features to Explore

Once the application is running, explore its core features:

Authentication: Sign up or log in using Clerk.
AI Video Generation: Input a query to generate a video using Remotion and AI APIs.
Text-to-Speech: Generate high-quality voiceovers using ElevenLabs.
Captions: Add accurate captions with AssemblyAI.

Playing around with Daytona

Customizing the Dev Environment

Daytona’s .devcontainer/devcontainer.json file specifies the development container. You can customize it for specific needs like adding new extensions, port mappings, or post-create commands.

Example snippet from devcontainer.json:

{
  "name": "Next.js Video Generation Project",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-20",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "settings": {
        "javascript.validate.enable": false,
        "editor.formatOnSave": true
      },
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "softwaredotcom.dracula-theme"
      ]
    }
  },
  "postCreateCommand": "npm --legacy-peer-deps i"
}

Try to:

Add more VSCode extensions for specific needs.
Modify forwarded ports for additional services.
Customize the postCreateCommand to install additional dependencies.

Deploying with Daytona

Daytona simplifies deploying your application to cloud environments. Once you’re ready to deploy, follow these steps:

Push your project to a Git repository.
Use Daytona’s deployment tools to containerize and deploy your app.

For detailed deployment steps, refer to the Daytona Docs

Optional: Accessing the Workspace

Daytona allows you to share your workspace for remote collaboration. Use the workspace ID to provide access to team members.

For this project:

Workspace ID: aryprogrammer-sample-vid-nmuit3803l

Conclusion

By leveraging Daytona, you can set up, develop, and run the Sample Video Generator project with minimal friction. Daytona's containerized environment and pre-configured settings make it a perfect choice for projects that require seamless development workflows.

The Sample Video Generation AI Website project demonstrates how modern tools like Next.js, Remotion, and Daytona can simplify the development and deployment of AI-powered applications. With Daytona, setting up and managing complex projects becomes a breeze, allowing you to focus on building innovative solutions.

Start your journey today and let Daytona bring your ideas to life!

DEV Community