A full-stack modern image editor built using Next.js App Router, with powerful features like cropping, filters, overlays, AI enhancements, and user authentication — all wrapped in a clean UI.
🚀 Built during holidays as a personal project to upskill in real-world frontend/backend integration.
🖥️ File Structure Overview
.
├── app/
│ ├── page.jsx # Main Editor Page
├── components/
│ ├── EditorCanvas.jsx # Fabric.js Canvas setup
│ ├── Sidebar.jsx # Tools: Upload, Add Image, Filters
│ ├── AdjustControls.jsx # Filter/Slider Controls
├── context/
│ └── context.jsx # Global canvas context
├── convex/ # Convex DB functions
├── utils/ # Helper functions
- ✂️ Crop, resize, rotate & move images
- 🎨 Apply filters: brightness, contrast, blur, etc.
- 🖼️ Add overlays/images/stickers
- 🪄 AI image enhancements (integrated via ImageKit)
- 🧑💻 Auth & user sessions with Clerk
- ☁️ Upload & store images in real-time using Convex
- 📦 Clean and modular code structure with context API
- Frontend: Next.js 14 (App Router), Tailwind CSS
- Canvas Engine: Fabric.js
- Authentication: Clerk
- Database/Storage: Convex
- Image Hosting: ImageKit.io
- Image Source: Unsplash API
Clone the repo and install dependencies:
git clone https://github.com/your-username/ai-image-editor
cd ai-image-editor
npm install
npm run dev
# or
yarn dev
📚 Learn More Next.js Documentation
Fabric.js Documentation
Clerk Docs
Convex Docs
ImageKit Docs
🚀 Deployment You can deploy this project directly using Vercel:
For production, make sure to set all required environment variables:
CLERK_PUBLISHABLE_KEY
CONVEX_DEPLOYMENT
NEXT_PUBLIC_IMAGEKIT_URL
Others as needed by your services
🙌 Credits This project uses:
✅ Convex
✅ Clerk
✅ ImageKit.io
✅ Unsplash
✅ React Colorful
✅ Fabric.js
📬 Feedback & Contributions Have suggestions or found a bug? Feel free to open an issue or connect with me on LinkedIn!