Generate professional content instantly with Google's Gemini 2.5 Pro AI
- π€ Advanced AI Generation: Harnesses Google's Gemini 2.5 Pro for high-quality content creation
- π Multiple Content Templates: Blog posts, article outlines, SEO content, social media posts, and more
- οΏ½ Rich Text Editor: Professional editor for viewing and refining AI-generated content
- οΏ½π° Razorpay Integration: Seamless subscription payments with India's leading payment gateway
- π³ Subscription Tiers: Free tier and Pro tier with flexible payment options
- π Usage Tracking: Word count tracking and usage limitations based on subscription tier
- π User Authentication: Secure authentication with Clerk
- πΎ Content History: Save and access all previously generated content
- π¨ Modern & Responsive UI: Beautiful interface built with TailwindCSS and custom components
- π± Mobile-Friendly: Fully responsive design for all devices
- π Optimized Performance: Fast loading times with Next.js optimizations
-
Frontend:
- Next.js 14 - React framework with server and client components
- TypeScript - Type-safe JavaScript
- TailwindCSS - Utility-first CSS framework
- Radix UI - Accessible component primitives
- Lucide Icons - Beautiful icon set
- Rich Text Editor - Professional content editing capabilities
-
Backend:
- Next.js API Routes - Serverless functions
- Google Gemini 2.5 Pro - Advanced AI model for content generation
- Drizzle ORM - Type-safe database toolkit
- PostgreSQL (Neon) - Serverless Postgres database
- Clerk - Authentication and user management
-
Payments:
- Razorpay - India's leading payment gateway for subscription processing
- Secure checkout experience
- Automatic subscription management
-
Deployment:
- Vercel - Platform for frontend and serverless functions
- Node.js 18.x or later
- npm or yarn
- Clerk account for authentication
- Google Gemini API key
- Razorpay account for payments
- Neon PostgreSQL database
-
Clone the repository
git clone https://github.com/CoderYashVij/ContentCraft-AI.git cd ContentCraft-AI -
Install dependencies
npm install --force # or yarn install -
Set up environment variables Create a
.env.localfile with the following variables:# Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key # Database DATABASE_URL=your_neon_postgres_connection_string # Google Gemini AI NEXT_PUBLIC_GOOGLE_GEMINI_API_KEY=your_gemini_api_key # Razorpay RAZORPAY_KEY_ID=your_razorpay_key_id RAZORPAY_SECRET_KEY=your_razorpay_secret_key SUBSCRIPTION_PLAN_ID=your_subscription_plan_id -
Initialize database schema
npm run db:push # or yarn db:push -
Run development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000
- Schema Management:
src/utils/schema.ts - View Database:
npm run db:studiooryarn db:studio - Update Schema: Make changes to schema.ts and run
npm run db:push
npm run dev- Run development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run db:push- Push schema changes to databasenpm run db:studio- Open Drizzle Studio for database management
-
Content Generation:
- Multiple AI templates for different content types
- Form-based input for guiding AI generation
- Real-time content preview and editing
-
Rich Text Editor:
- Professional formatting tools for content refinement
- Export options for generated content
- Seamless editing experience with Markdown support
- Clean, distraction-free interface for content focus
-
User Dashboard:
- Content history tracking
- Usage statistics
- Subscription management
- Word count visualization
-
Subscription System:
- Free tier with limited usage (40,000 words)
- Pro tier with unlimited content generation
- Seamless Razorpay payment gateway integration
- Secure transaction processing
- Automatic subscription renewal management
- Yash Vij - GitHub