Sometimes Envato’s live preview system temporarily breaks links. Please use the direct demo link with credentials mentioned below :

LIVE DEMO – Try Before You Buy!

Live Application: CreatePost

User Demo Credentials:

• Email: [email protected]
• Password:WebBuddy@123

How to Install Video Documentation:

• Link: https://envato.webbuddy.agency/docs

Overview

CreatePostAi is a complete, production-ready web application that enables users to create professional carousels for LinkedIn and social media platforms using AI-powered content generation. Built with Next.js 14 and TypeScript, this application provides a comprehensive carousel creation system with customizable themes, AI-powered content generation, and professional export options. The platform features a modern, responsive design and includes everything needed to run a carousel generation service, from user authentication to payment processing and AI-powered content creation.

⚠️ Important: External API Costs Disclaimer

Please note that this application requires external API services to function, and you will incur costs based on your usage of these services.

This application integrates with several third-party services that charge fees based on usage:

• OpenAI – Charges per AI request for carousel generation. Costs vary based on the AI model selected (GPT-4o-mini is used by default) and the complexity of the request. Each carousel generation uses 2 credits from the user’s account. You pay directly to OpenAI for each AI feature used.
• Stripe – Charges a transaction fee of 2.9% plus $0.30 per successful payment transaction when users purchase Pro subscription plans.
• MongoDB Atlas – Free tier available for development, but production use requires a paid plan based on storage and usage.
• JWT Authentication – Custom JWT-based authentication with no direct costs, but requires hosting infrastructure.

You are responsible for all costs associated with these external services. The purchase price of this application includes only the source code and does not include any API credits, service subscriptions, or usage fees. Before deploying this application, please review the pricing pages of all required services to understand the costs you will incur based on your expected usage volume.

While many services offer free tiers suitable for development and testing, production use will require paid plans. Ensure you have budgeted for ongoing API costs based on your expected user base and usage patterns.

Key Features

AI-Powered Carousel Generation

Generate professional carousels from text prompts using OpenAI’s GPT-4o-mini model. Simply input a topic or idea, and the AI creates engaging, well-structured carousel content with 8-15 slides including intro, content, and outro slides. The system automatically generates titles, subtitles, descriptions, and adds relevant emojis to enhance engagement. Each slide contains 2-3 elements (Title, Subtitle, or Description) that work together to convey the message effectively.

Slide Management

Comprehensive slide management system that allows users to:

• Create multiple slide types (Intro, Content, Outro)
• Add, remove, clone, and reorder slides with ease
• Edit slide content directly on the canvas
• Manage up to 6 slides on Free plan, 10 slides on Pro plan
• Add multiple elements per slide (Title, Subtitle, Description, Content Image)

Theme Customization

Complete design customization system with the following capabilities:

• Pre-designed color palettes for quick styling
• Custom color selection (Pro feature) for primary, secondary, and background colors
• Custom font selection from available font families
• Custom font pairs (Pro feature)
• Brand customization (name, handle, avatar)
• Page number display toggle

Image Support

Advanced image integration features:

• Upload images from device
• Add images via URL
• Background images with customizable opacity
• Content images embedded in slides
• Image proxy for external images (security feature)

Text Elements

Rich text editing capabilities:

• Title elements (large, bold headings)
• Subtitle elements (medium-sized headings)
• Description elements (body text)
• Click-to-edit functionality
• Automatic text balancing (prevents orphan words)
• Emoji support throughout content

Export and Import

Complete export and import system:

• Export carousel settings as JSON (theme, colors, fonts, brand)
• Export carousel content as JSON (slides, text, images)
• Import previously saved settings and content
• Export carousel as PDF (high-quality, optimized for LinkedIn)
• Auto-save functionality with browser local storage

Subscription-Based System

Flexible subscription-based pricing model with two tiers:

• Free Plan – 10 free credits (2 credits per generation = 5 generations), carousels with up to 6 slides, unlimited downloads, standard themes and fonts
• Pro Plan – $9/month: Unlimited credits (2 credits per generation), carousels with up to 10 slides, remove watermark, custom fonts, custom colors, priority support

All subscription plans are fully customizable, allowing you to adjust limits, pricing, and features to match your business model.

Payment Processing

Integrated Stripe payment system for secure subscription purchases. The application handles checkout sessions, webhook processing, and automatic subscription activation upon successful payment. Supports recurring monthly billing with automatic renewals.

User Authentication

Secure authentication system powered by JWT (JSON Web Tokens) with the following features:

• Email and password authentication
• JWT token-based session management
• Password reset functionality with email verification
• Protected routes and API endpoints
• Bcrypt password hashing for security

Credit System

Intelligent credit-based usage tracking:

• Free users receive 10 credits (5 AI generations)
• Pro users have unlimited credits (fair use policy)
• Each AI generation uses 2 credits
• Real-time credit tracking and display
• Automatic credit deduction on generation

Technical Specifications

Technology Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• UI Library: Tailwind CSS and Shadcn UI components
• Database: MongoDB with Mongoose ODM
• Authentication: JWT (JSON Web Tokens) with bcrypt password hashing
• Payments: Stripe with webhook support
• AI Integration: OpenAI API (GPT-4o-mini via LangChain)
• Form Handling: React Hook Form with Zod validation
• Email: Nodemailer for transactional emails
• PDF Export: jsPDF and html-to-image
• Image Processing: html-to-image, browser-image-compression

System Requirements

• Node.js 18 or higher
• npm or pnpm package manager
• MongoDB database (MongoDB Atlas recommended or local MongoDB)
• API keys for required services (OpenAI, Stripe)
• SMTP server for email functionality (password reset)

Deployment Options

The application can be deployed on:

• Vercel (recommended for Next.js applications)
• AWS EC2 (for more control and custom configurations)
• Any Node.js hosting platform

API and Service Requirements

To run this application, you will need to create accounts and obtain API keys from the following services. Some services offer free tiers suitable for development and small-scale production use.

Required Services

OpenAI

OpenAI provides the AI models for carousel generation. You will need to create an account and obtain an API key. Pricing is based on API usage, and you pay per request. The application uses GPT-4o-mini (recommended for cost-effectiveness and quality). Each carousel generation uses 2 credits from the user’s account. Check OpenAI pricing page for current rates.

Stripe

Stripe processes credit card payments for Pro subscription plans. Stripe charges a transaction fee of 2.9% plus $0.30 per successful transaction. There are no monthly fees for standard accounts. Visit Stripe pricing page for complete fee structure.

MongoDB Atlas

MongoDB Atlas provides the database for storing user data, carousels, subscriptions, and transaction records. The free tier (M0 Sandbox) includes 512MB storage, which is sufficient for development and small applications. Paid plans are required for production use with larger datasets. Check MongoDB Atlas pricing for details.

JWT Authentication

Custom JWT-based authentication system with no direct costs. It requires hosting infrastructure but no subscription fees. JWT tokens are generated and verified server-side using jsonwebtoken library.

Optional Services

SMTP Email Service

For password reset emails and notifications, you can use any SMTP service such as SendGrid, Mailgun, AWS SES, or Gmail SMTP. Many services offer free tiers for development and low-volume production use.

Vercel KV (Optional)

For rate limiting functionality, you can optionally use Vercel KV (Redis). This is not required for basic functionality but enhances security and prevents abuse.

Installation and Setup

The application includes comprehensive documentation covering:

• Environment variable configuration
• MongoDB database setup (local and Atlas)
• JWT authentication setup
• OpenAI API configuration
• Stripe payment setup and webhook configuration
• Deployment guides for Vercel and AWS EC2
• Frontend customization guide
• Pricing and subscription plan configuration
• User guide and feature documentation

All setup instructions are provided in HTML documentation files included with the purchase. The documentation includes step-by-step guides with screenshots and code examples.

What’s Included

• Complete Next.js 14 application source code
• TypeScript source files with strict type checking
• All UI components and styling (Tailwind CSS + Shadcn UI)
• Server actions for carousel generation and AI features
• API routes for authentication, carousels, credits, subscriptions, and Stripe webhooks
• Mongoose database models (User, Carousel)
• Authentication integration (JWT with bcrypt)
• Payment processing integration (Stripe checkout and webhooks)
• AI integration (OpenAI via LangChain for carousel generation)
• Comprehensive HTML documentation
• Environment variable templates
• PDF export functionality
• Image processing and proxy utilities

Customization

The application is fully customizable:

• Modify subscription plan pricing, limits, and features
• Customize AI prompts and model selection
• Adjust credit costs per generation
• Change color schemes, themes, and branding
• Modify UI components and layouts
• Add custom features and functionality
• Configure email templates
• Customize validation rules and business logic
• Adjust slide limits for each plan
• Modify Pro plan features (watermark removal, custom fonts, custom colors)

Support and Updates

This is a complete, production-ready application. The code follows Node.js best practices and Envato submission requirements. All code is well-structured, documented, and ready for deployment. The application includes comprehensive error handling, input validation, and security best practices.