- Overview
- Features
- Tech Stack
- Getting Started
- Environment Variables
- Project Structure
- Key Features in Detail
ContentForge AI is a powerful AI Content Generation SaaS platform that leverages cutting-edge AI technology to help you create high-quality content effortlessly. Whether you need blog posts, social media content, product descriptions, or creative writing, our platform has you covered.
- ⚡ Lightning Fast - Generate content in seconds, not hours
- 🎨 Beautiful UI - Modern, responsive design with full dark mode support
- 🔒 Secure - Enterprise-grade authentication with Clerk
- 💳 Flexible Billing - Pay-as-you-go with Razorpay integration
- 📊 Smart Analytics - Track your usage and history with advanced filters
- 🎯 Multiple Templates - 10+ pre-built templates for various content types
- 10+ AI Templates including:
- Blog Title Generator
- Blog Content Writer
- Instagram Post Generator
- YouTube Description Creator
- Code Generator
- And more!
- Real-time Preview with rich text editor
- Copy to Clipboard with formatting preservation
- Word Count Tracking
- 🌓 Dark Mode - Full theme support across all pages
- 📱 Responsive Design - Works seamlessly on all devices
- ⚡ Collapsible Sidebar - Maximize your workspace
- 🔍 Advanced Search & Filters - Find content instantly
- 📄 Pagination - Browse history efficiently
- Credit System - 10,000 free credits to start
- Monthly Plan - ₹700/month ($9.99/month)
- Yearly Plan - ₹7,000/year ($99/year) - Save 17%!
- Razorpay Integration - Secure payment processing
- Auto-renewal - Hassle-free subscription management
- Content History - Track all generated content
- Template Filter - Filter by content type
- Date Sorting - Newest or oldest first
- Search - Full-text search across all content
- Export - Copy any previous generation
- Clerk Authentication - Secure user management
- Protected Routes - API route protection
- Server-side Validation - Enhanced security
- Environment Variables - Sensitive data protection
- Next.js 15.3.3 - React framework with App Router
- React 18 - UI library
- TypeScript - Type safety
- Tailwind CSS v4 - Utility-first CSS
- Shadcn/ui - Beautiful UI components
- Lucide Icons - Modern icon library
- Toast UI Editor - Rich text editor
- next-themes - Theme management
- Drizzle ORM - TypeScript ORM
- PostgreSQL - Relational database (via Neon)
- Clerk - Authentication & user management
- Groq API - AI content generation
- Razorpay - Payment processing
- Node.js 18+ installed
- PostgreSQL database (we recommend Neon)
- Clerk account for authentication
- Razorpay account for payments
- Groq API key
-
Clone the repository
git clone https://github.com/yourusername/contentforge-ai.git cd contentforge-ai -
Install dependencies
npm install
-
Set up environment variables
Create a
.env.localfile in the root directory:cp .env.example .env.local
Fill in your credentials (see Environment Variables)
-
Set up the database
npm run db:push
-
Run the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3000
🎉 You're all set! Start generating amazing content.
Create a .env.local file with the following variables:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
# Database (Neon PostgreSQL)
NEXT_PUBLIC_DRIZZLE_DB_URL=your_postgres_connection_string
DRIZZLE_DB_URL=your_postgres_connection_string
# Groq API
GROQ_API_KEY=your_groq_api_key
# Razorpay Payment Gateway
NEXT_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_SECRET_KEY=your_razorpay_secret_key
# Razorpay Plan IDs
NEXT_PUBLIC_MONTHLY_PLAN_ID=your_monthly_plan_id
NEXT_PUBLIC_YEARLY_PLAN_ID=your_yearly_plan_id| Service | URL | Purpose |
|---|---|---|
| Clerk | clerk.com | User authentication & management |
| Neon | neon.tech | PostgreSQL database hosting |
| Groq | groq.com | AI content generation API |
| Razorpay | razorpay.com | Payment processing |
contentforge-ai/
├── app/
│ ├── (auth)/ # Authentication pages
│ │ ├── sign-in/
│ │ └── sign-up/
│ ├── (context)/ # React contexts
│ │ ├── TotalUsageContext.tsx
│ │ ├── UpdateCreditUsageContext.tsx
│ │ └── UserSubscriptionContext.tsx
│ ├── (data)/ # Static data
│ │ └── Templates.tsx
│ ├── api/ # API routes
│ │ ├── check-subscription/
│ │ ├── create-subscription/
│ │ ├── get-history/
│ │ ├── get-total-usage/
│ │ ├── get-user-subscription/
│ │ └── save-subscription/
│ ├── dashboard/ # Main app pages
│ │ ├── _components/ # Dashboard components
│ │ │ ├── Header.tsx
│ │ │ ├── SideNav.tsx
│ │ │ ├── SearchSection.tsx
│ │ │ ├── TemplateCard.tsx
│ │ │ ├── TemplateListSection.tsx
│ │ │ └── UsageTrack.tsx
│ │ ├── billing/ # Subscription management
│ │ ├── content/ # Content generation
│ │ │ └── [template-slug]/
│ │ ├── history/ # Generation history
│ │ ├── setting/ # User settings
│ │ └── layout.tsx
│ ├── actions.ts # Server actions
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # Shadcn UI components
│ └── ModeToggle.tsx # Theme toggle
├── utils/
│ ├── db.tsx # Database connection
│ └── schema.tsx # Database schemas
├── public/ # Static assets
├── drizzle.config.js # Drizzle ORM config
├── next.config.ts # Next.js config
├── tailwind.config.ts # Tailwind config
└── package.json
- Smooth 300ms animations
- Persisted state
- Dynamic content layout adjustment
- Tooltips when collapsed
- System preference detection
- Manual toggle
- Comprehensive theme support across all components
- Optimized color palette for readability
- Search: Full-text search across templates and content
- Filter: Filter by template type
- Sort: Newest first or oldest first
- Pagination: Adjustable rows per page (5, 10, 20, 50)
- Smart pagination: Shows relevant page numbers with ellipsis
Arnav Tiwari
- GitHub: @Arnav10090
- LinkedIn: Connect with me
Made with ❤️ by Arnav Tiwari