Transform any YouTube video into clear, actionable insights in seconds.
ClipMind is a modern web application that leverages AI to generate concise, human-readable summaries from YouTube videos. Simply paste a URL and get instant, intelligent summaries that save you time and help you extract key insights.
- Instant Summarization: AI-powered summaries generated in seconds
- YouTube Integration: Support for any public YouTube video
- Smart Insights: Extract key points, main topics, and actionable takeaways
- Clean Interface: Intuitive, user-friendly design
- Personal Library: Save and organize all your video summaries
- Advanced Search: Find summaries by title, content, or tags
- Filtering Options: Sort by date, title, or relevance
- Tag System: Categorize summaries for easy organization
- Shareable Links: Share summaries via unique URLs (
/summary/[id]) - Export Options: Download summaries in multiple formats
- Social Sharing: Native sharing with Web Share API
- Bookmark System: Save favorite summaries for quick access
- Privacy First: No data stored without user consent
- Secure Authentication: User accounts for personalized experience
- Data Control: Full control over your summary library
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Runtime: React 19
- Backend/API: Next.js API routes
- AI Model: OpenAI via ai-sdk or direct API
- Transcript Fetching: youtube-transcript or YouTube API
- Authentication: Clerk for user management
- Deployment: Vercel for seamless hosting
- Node.js 18+ installed on your machine
- npm, yarn, pnpm, or bun package manager
-
Clone the repository
git clone https://github.com/yourusername/clipmind.git cd clipmind -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
npm run dev- Start development server with Turbopacknpm run build- Build the application for productionnpm run start- Start the production servernpm run lint- Run ESLint for code quality
clipmind/
├── app/
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Homepage with input and features
│ ├── library/
│ │ └── page.tsx # Library page with search & filtering
│ └── summary/
│ └── [summaryId]/
│ └── page.tsx # Individual summary pages
├── public/
│ └── images/
│ └── logo.png # ClipMind logo
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies
- Hero section with value proposition
- YouTube URL input with AI summarization
- Feature showcase (AI-Powered, Save History, Instant Results)
- Privacy notice and user authentication
- Grid view of all saved summaries
- Real-time search functionality
- Sort and filter options
- Quick actions (view, share, delete)
- Full AI-generated summary with formatting
- Video metadata and preview
- Key points extraction
- Transcript toggle
- Share and export options
Create a .env.local file in the root directory:
# Add your environment variables here
NEXT_PUBLIC_APP_URL=http://localhost:3000
# Add AI API keys, database URLs, etc.We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Maintain component reusability
- Write descriptive commit messages
- Test your changes locally
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help:
- 📧 Email: sultanabaniks@gmail.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Made with ❤️ by Sultan