This application offers advanced AI-driven tools for transforming images, making it easy to restore, recolor, adjust backgrounds, remove objects, and perform a variety of other edits. Crafted for both creative professionals and hobbyists, it ensures a smooth and interactive experience with cutting-edge features. The platform also prioritizes secure transactions and provides highly efficient search capabilities for a comprehensive, user-friendly environment.
- 🚀 Introduction
- ⚙️ Tech Stack
- 🎨 Features
- 🖥️ Quick Start
- Next.js: Scalable React framework for server-side rendering and static web apps.
- TypeScript: Type-safe and robust JavaScript alternative.
- MongoDB: NoSQL database for flexible data storage.
- Clerk: Comprehensive authentication and user management.
- Cloudinary: Image and video optimization with cloud-based processing.
- Stripe: Secure payment gateway for credit transactions.
- Shadcn: Component framework for fast UI development.
- TailwindCSS: Utility-first CSS for custom and responsive designs.
⚓ User Authentication & Authorization: Safeguard access with multi-factor authentication, role-based permissions, and secure routing.
⚓ Community Image Gallery: Browse user-created transformations with an easy-to-navigate paginated display.
⚓ Smart Image Search: Leverage AI-powered semantic search to find images based on content or specific objects.
⚓ Image Restoration: Advanced tools to repair and restore aged or damaged images.
⚓ Color Adjustment: Effortlessly modify or replace colors of objects with high accuracy.
⚓ AI-Driven Fill: Automatically fill missing or incomplete areas of images using advanced generative techniques.
⚓ Object & Background Removal: User-friendly tools to easily erase unwanted elements from images.
⚓ Download Transformed Images: Simple and quick options to save or share edited images.
⚓ Transformation History & Insights: Access detailed records and metadata of every transformation performed.
⚓ Manage Transformations: Easily update or delete any image transformations as needed.
⚓ Credit System: Earn or purchase credits to use for various transformation features.
⚓ Profile Dashboard: A centralized interface to manage credits, images, and account preferences.
⚓ Secure Payment Processing: Transactions powered by Stripe for secure, compliant payment handling.
⚓ Mobile-Friendly Design: Optimized for smooth, consistent performance on all devices.
Ensure the following are installed on your system:
Install project dependencies:
npm installCreate a .env.local file in the root directory and configure it as follows:
# NEXT.js Configuration
NEXT_PUBLIC_SERVER_URL=
# MongoDB Configuration
MONGODB_URL=
# Clerk Configuration
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
WEBHOOK_SECRET=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
# Cloudinary Configuration
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
# Stripe Configuration
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=Replace placeholders with your actual credentials from Clerk, MongoDB, Cloudinary, and Stripe.
Start the development server:
npm run dev