AgentTube is a cutting-edge platform designed to empower YouTube content creators with AI-driven insights and tools. This repository contains the landing page for AgentTube, built with modern web technologies to provide an engaging and responsive user experience.
Live Demo: https://agent-tube-swart.vercel.app/
- Hero Section: A visually appealing introduction to AgentTube with a call-to-action form for analyzing YouTube videos.
- Feature Highlights: Showcases the platform's key features, such as AI analysis, transcription, thumbnail generation, and more.
- How It Works: A step-by-step guide to using AgentTube, making it easy for users to get started.
- Responsive Design: Optimized for all devices, ensuring a seamless experience on desktops, tablets, and mobile devices.
- Authentication: Secure user authentication powered by Clerk.
- Interactive UI: Dynamic components like the
AgentPulseanimation andYoutubeVideoFormfor user interaction.
- Next.js – React-based framework for server-side rendering and static site generation.
- React – Library for building user interfaces.
- Clerk – Authentication and user management.
- Lucide Icons – Icon library for modern UI.
- Tailwind CSS – Utility-first CSS framework for rapid UI development.
- Tailwind CSS Animate – Animation utilities for Tailwind.
- Custom CSS – Fine-tuned design elements.
- Class Variance Authority (CVA) – Manage class names with variants.
- clsx – Conditionally join class names.
- tailwind-merge – Merge Tailwind CSS classes.
- ESLint – Maintain code quality with linting.
- PostCSS – CSS transformation and optimization.
- Turbopack – Next.js fast bundler for development.
ai-agent-challenge/
├── app/ # App directory for Next.js pages and layouts
│ ├── layout.jsx # Root layout for the application
│ ├── page.jsx # Landing page implementation
│ └── globals.css # Global styles for the application
├── components/ # Reusable React components
│ ├── AgentPulse.jsx # Animated pulse component
│ ├── AnalyzeButton.jsx # Button for triggering video analysis
│ ├── ClientWrapper.jsx # Wrapper for Clerk and Schematic providers
│ ├── Header.jsx # Header component with navigation
│ ├── YoutubeVideoForm.jsx # Form for submitting YouTube video URLs
│ └── ui/ # UI components (e.g., buttons)
├── lib/ # Utility functions
│ └── utils.js # Helper functions for class merging
├── public/ # Static assets (e.g., images, fonts)
├── styles/ # CSS styles
│ └── globals.css # Global CSS styles
├── actions/ # Server actions
│ └── analyseYoutubeVideo.js # Server action for analyzing YouTube videos
├── middleware.js # Middleware for route protection
├── next.config.js # Next.js configuration
├── package.json # Project dependencies and scripts
└── README.md # Project documentation
-
Clone the repository
git clone <repository-url>
-
Navigate to the project directory
cd ai-agent-challenge -
Install the dependencies
npm install
To start the development server, run:
npm run devVisit http://localhost:3000 to view the landing page.
To build the application for production, run:
npm run buildStart the production server:
npm startCreate a .env.local file in the root directory and add the following variables:
NEXT_PUBLIC_SCHEMATIC_PUBLISHABLE_KEY=your_publishable_key
AI_SERVICE_URL=https://your-ai-service-url.comContributions are welcome! To contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature-name). - Commit your changes.
- Push to your branch (
git push origin feature-name). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for more details.