Leverage cutting-edge AI technology to create engaging, optimized video titles that capture attention and drive engagement.
✨ Features • 🚀 Quick Start • 💡 Usage • 🛠 Tech Stack • 🎨 Screenshots • 🤝 Contributing
Live Demo🚀 Preview
|
AI-powered analysis ensures your titles hit the mark every time |
Generate optimized titles in seconds, not hours |
Increase engagement with data-driven title suggestions |
| Feature | Description |
|---|---|
| 🤖 AI-Powered Enhancement | Leverage advanced AI algorithms to optimize video titles for maximum engagement |
| 🎨 Modern UI/UX | Beautiful, responsive design with dark mode support and smooth animations |
| ⚡ Real-time Processing | Instant title suggestions and analysis with zero lag |
| 🔐 Secure Authentication | Token-based API authentication for enterprise-grade security |
| 📊 Analytics Ready | Integrated with Vercel Analytics for performance monitoring |
| 🎯 Customizable | Tailored suggestions based on your unique content style |
| 📱 Fully Responsive | Seamless experience across all devices - mobile, tablet, and desktop |
| 🌙 Dark Mode | Eye-friendly dark theme for comfortable viewing |
| 🚀 Lightning Fast | Optimized performance with Next.js 16 and React 19 |
Beautiful, intuitive interface designed for productivity
Fully responsive design that works flawlessly on any device
Eye-friendly dark theme for comfortable extended use
Before you begin, ensure you have the following installed:
- Node.js
18.0or higher - npm, yarn, or pnpm package manager
# 1️⃣ Clone the repository
git clone https://github.com/surajit20107/ReTitle-AI
cd ReTitle-AI
# 2️⃣ Install dependencies
npm install
# or
pnpm install
# or
yarn install
# 3️⃣ Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API keys
# 4️⃣ Run the development server
npm run dev
# or
pnpm dev
# or
yarn dev
# 5️⃣ Open your browser
# Navigate to http://localhost:3000🎉 That's it! Your Title Enhancer is now running locally.
- 📝 Enter your video title in the input field
- ✨ Click "Enhance Title" to generate AI-powered suggestions
- 🎯 Select your favorite enhanced title from the results
- 📊 Track performance with built-in analytics
- 📦 Batch Processing - Process multiple titles simultaneously
- 🎨 Custom Styles - Choose from different enhancement styles
- 📈 Analytics Dashboard - Track which titles perform best
- 🔄 History - Review and reuse previous enhancements
- 💾 Export - Save your enhanced titles for later use
📚 Full Technology Stack
- Next.js 16 - React framework for production
- React 19 - UI library with concurrent features
- TypeScript - Type-safe JavaScript
- Tailwind CSS 4 - Utility-first CSS framework
- Radix UI - Unstyled, accessible components
- shadcn/ui - Re-usable component library
- Lucide React - Beautiful, consistent icons
- next-themes - Theme management
- PostCSS - CSS transformations
- ESLint - Code quality & consistency
- Vercel Analytics - Performance insights
title-enhancer/
├── 📂 app/ # Next.js app directory (App Router)
│ ├── 🎨 globals.css # Global styles & theme variables
│ ├── 📄 layout.tsx # Root layout component
│ └── 🏠 page.tsx # Home page
├── 📂 components/ # React components
│ ├── 📂 ui/ # shadcn/ui components
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ └── label.tsx
│ ├── 🎬 title-enhancer.tsx # Main feature component
│ ├── 🎥 video-card.tsx # Video display component
│ └── 🌙 theme-provider.tsx # Dark mode management
├── 📂 lib/ # Utility functions
│ └── ⚙️ utils.ts # Helper utilities
├── 📂 public/ # Static assets
│ └── 🖼️ images & icons
└── 📄 Configuration files
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── next.config.mjs
The app includes a sophisticated theming system with full dark mode support.
Customize colors in app/globals.css:
:root {
--background: oklch(0.13 0.01 250);
--foreground: oklch(0.98 0 0);
--primary: oklch(0.65 0.25 25);
/* Add your custom colors */
}All components use Tailwind CSS utilities and can be easily customized:
// Example: Custom button variant
<Button className="bg-gradient-to-r from-purple-500 to-pink-500">
Custom Styled Button
</Button>We love contributions! Here's how you can help make Title Enhancer even better:
| Type | Description |
|---|---|
| 🐛 Bug Reports | Found a bug? Open an issue with details |
| ✨ Feature Requests | Have an idea? We'd love to hear it |
| 📝 Documentation | Improve our docs and help others |
| 💻 Code | Submit PRs to fix bugs or add features |
# 1. Fork the repository on GitHub
# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/title-enhancer.git
# 3. Create a feature branch
git checkout -b feature/AmazingFeature
# 4. Make your changes and commit
git commit -m '✨ Add some AmazingFeature'
# 5. Push to your branch
git push origin feature/AmazingFeature
# 6. Open a Pull Request- ✅ Follow the existing code style
- ✅ Write meaningful commit messages
- ✅ Add tests for new features
- ✅ Update documentation as needed
- ✅ Ensure all tests pass before submitting
This project is licensed under the MIT License - see the LICENSE file for details.
Permission is hereby granted, free of charge, to use, copy, modify,
merge, publish, distribute, sublicense, and/or sell copies of the Software.
Special thanks to these amazing projects and communities:
| Project | Description |
|---|---|
| shadcn/ui | Beautiful, accessible component library |
| Radix UI | Unstyled, accessible primitives |
| Lucide | Gorgeous icon set |
| Tailwind CSS | Utility-first CSS framework |
| Vercel | Deployment & analytics platform |
| Replit | Development & hosting environment |
Built with cutting-edge technologies and a passion for great UX
© 2024 Title Enhancer. All rights reserved.