AI-Powered TikTok Slideshow Generator
Create scroll-stopping, viral TikTok content with proven formats and AI-generated hooks that drive engagement.
- 🤖 AI Content Generation: Powered by Deepseek AI to create compelling slideshow content
- 📊 Multiple Viral Formats: Top 5 Tips, Common Errors, Recommendations, Before/After, and more
- 🌍 Multi-Language Support: Generate content in English and Spanish
- 📈 Simple Content Tracking: Manually track your TikTok videos' performance metrics
- 🎨 Custom Formats: Create your own unique viral content formats
- 💡 Smart Optimization: Get suggestions for visual content and engagement strategies
- 📱 Responsive Design: Beautiful, modern UI that works on all devices
- Frontend: React 18 + TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Routing: React Router DOM
- Forms: React Hook Form + Zod validation
- AI Integration: Deepseek API
- State Management: React hooks + localStorage
- Node.js 18+ and npm
- Deepseek API key (get one at platform.deepseek.com)
-
Clone the repository
git clone <your-repo-url> cd viralslide
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:8080
- Go to Settings in the app
- Enter your Deepseek API key
- Add your business information for personalized content
- Start generating viral content!
- Choose a Format: Select from proven viral formats like "Top 5 Tips" or "Common Errors"
- Enter Your Topic: Describe what you want to create content about
- Select Language: Choose English or Spanish
- Generate: Let AI create your viral slideshow content
- Copy & Use: Copy the generated content for your TikTok videos
- Add TikTok URLs: Paste your TikTok video links in the Content Tracker
- Manual Input: Easily update metrics by clicking the edit button on any content
- Track Progress: Monitor views, likes, comments, and shares over time
- Analyze Performance: See which content formats perform best with engagement calculations
- Top 5 Tips: Share your best advice in your niche
- Common Errors: Highlight mistakes people make
- Recommendations: Suggest tools, products, or strategies
- Before vs After: Show transformations or improvements
- Myths vs Facts: Debunk common misconceptions
- Beginner's Guide: Essential steps for newcomers
- Custom Format: Create your own unique viral format
viralslide/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # shadcn/ui components
│ │ └── ContentResult.tsx
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── pages/ # Route components
│ │ ├── Index.tsx # Landing page
│ │ ├── Generate.tsx # Content generation
│ │ ├── Dashboard.tsx # Content tracking
│ │ └── Settings.tsx # Configuration
│ ├── App.tsx # Main app component
│ └── main.tsx # App entry point
├── public/ # Static assets
└── package.json # Dependencies and scripts
npm run dev- Start development servernpm run build- Build for productionnpm run build:dev- Build in development modenpm run lint- Run ESLintnpm run preview- Preview production build
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help:
- Open an issue on GitHub
- Check the documentation
- Review the code examples in the project
- Built with shadcn/ui for beautiful components
- Powered by Deepseek AI for content generation
- Styled with Tailwind CSS for modern design
Made with ❤️ for content creators who want to go viral on TikTok