A modern, full-stack AI image editing platform built with Next.js, featuring real-time canvas editing, AI-powered transformations, and professional-grade image processing tools.
🖥️ View Application Screenshots
Project management and organization
Professional editing interface with AI tools
Creating new projects and managing folders
- AI Enhance: Neural-powered image enhancement for quality improvement
- AI Generate: Create stunning images from text prompts
- Magic Erase: Intelligent object removal with context-aware filling
- Super Scale: AI upscaling while preserving details
- Background Removal: Precise background extraction
- Advanced Adjustments: Exposure, brightness, contrast, saturation, vibrance, hue rotation
- Color Grading: Temperature control, sepia, grayscale effects
- Detail Enhancement: Sharpen, blur, noise, gamma correction
- Canvas Tools: Crop, resize, rotate, layers management
- Text Tools: Typography with custom fonts and styling
- Smart Folders: Create custom folders to organize your projects
- Folder Navigation: Intuitive sidebar navigation with breadcrumb trails
- Project Assignment: Assign projects to folders during creation or move them later
- Folder Management: Create, rename, and delete folders with automatic project handling
- Visual Organization: Clean dashboard view showing projects by folder or all projects
- Project Organization: Folder-based project management with drag-and-drop organization
- Real-time Collaboration: Live canvas updates
- Cloud Storage: Secure project saving with Convex database
- Image Pipeline: ImageKit integration for optimized processing
- Authentication: Clerk-powered user management
- Subscription Plans: Free and Pro tiers with usage tracking
- Responsive Design: Works seamlessly on desktop and mobile
- Frontend: Next.js 14, React 18, Tailwind CSS
- Canvas Engine: Fabric.js for advanced image manipulation
- UI Components: Shadcn/ui with Radix primitives
- Backend: Convex (real-time database and functions)
- Authentication: Clerk (user management + billing)
- Image Processing: ImageKit (CDN + transformations)
- Styling: Tailwind CSS with custom design system
- Icons: Lucide React
- Node.js 18+
- npm or yarn
- Git
-
Clone the repository
git clone https://github.com/yourusername/ai-image-editor.git cd ai-image-editor -
Install dependencies
npm install
-
Set up environment variables Copy the example environment file and fill in your values:
cp .env.example .env.local
Then edit
.env.localwith your actual API keys:# Convex Database CONVEX_DEPLOYMENT=your-deployment-name NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud # Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... CLERK_SECRET_KEY=sk_test_... NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up CLERK_JWT_ISSUER_DOMAIN=your-domain.clerk.accounts.dev # ImageKit CDN NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY=public_... NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your-id/ IMAGEKIT_PRIVATE_KEY=private_... # Unsplash (Optional) NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=your-access-key
📝 Note: See
.env.examplefor detailed setup instructions and all available configuration options. -
Set up Convex
npx convex dev
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
ai-image/
├── app/ # Next.js app directory
│ ├── (auth)/ # Authentication pages
│ │ ├── sign-in/
│ │ └── sign-up/
│ ├── (main)/ # Main application
│ │ ├── dashboard/ # User dashboard
│ │ │ └── _components/ # Dashboard components
│ │ │ ├── folder-sidebar.jsx # Folder navigation
│ │ │ ├── new-project-modal.jsx # Project creation with folder support
│ │ │ ├── project-grid.jsx # Project display grid
│ │ │ └── project-card.jsx # Individual project cards
│ │ └── editor/[projectId]/ # Image editor
│ ├── api/ # API routes
│ └── globals.css # Global styles
├── components/ # Reusable components
│ ├── ui/ # Base UI components
│ ├── features.jsx # Landing page features
│ ├── pricing.jsx # Pricing section
│ └── ...
├── convex/ # Backend functions & schema
│ ├── projects.js # Project CRUD & folder operations
│ ├── users.js # User management & plan handling
│ └── schema.js # Database schema (users, projects, folders)
├── context/ # React contexts
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── public/ # Static assets
- Folder Sidebar: Hierarchical project organization with folder management
- Project Grid: Visual project browser with folder filtering
- Breadcrumb Navigation: Clear navigation path showing current folder location
- Project Assignment: Seamless project-to-folder assignment during creation
- Fabric.js Integration: Advanced canvas manipulation
- Real-time Updates: Live collaboration features
- Layer Management: Object hierarchy and organization
- Tool System: Modular editing tools architecture
- Pluggable Architecture: Easy to add new AI features
- Processing Queue: Background job management
- Progress Tracking: Real-time operation status
- Error Handling: Robust error recovery
- Upload Processing: Multi-format support
- Transformation Chain: Non-destructive editing
- Optimization: Automatic quality and size optimization
- CDN Integration: Global image delivery
The application uses Convex with the following main tables:
users: User profiles and subscription dataprojects: Image editing projects and canvas statefolders: Project organization and folder management
- Free Plan: 3 projects, 20 exports/month, basic tools
- Pro Plan: Unlimited projects/exports, all AI features
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on every push
npm run build
npm start- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and commit:
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.
- Fabric.js for the powerful canvas library
- ImageKit for image processing and CDN
- Convex for the real-time backend
- Clerk for authentication and billing
- Shadcn/ui for beautiful UI components
- 📧 Email: support@pixora.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Made with ❤️ by the Pixora Team