This repository contains the code of a powerful AI SaaS platform, image manipulation tool that leverages cutting-edge AI techniques effortlessly. It excels in image processing capabilities, integrates a secure payment infrastructure, offers advanced image search functionalities, and supports multiple AI features, including image restoration, recoloring, object removal, generative filling, and background removal.
👉 Authentication and Authorization: Secure user access with registration, login, and route protection.
👉 Community Image Showcase & Advanced Search: Explore user transformations with pagination and quickly find images using advanced content-based or object-based search.
👉 AI-Powered Image Editing: Transform images with features like restoration, recoloring, generative fill, object removal, and background extraction.
👉 Image Management & Downloads: Save, share, view details, and manage (delete/update) your transformed images effortlessly.
👉 Credits System & Purchase: Earn, purchase, and track credits for image transformations securely through Stripe.
👉 Profile Page: Access personal transformed images, view credit info, and manage account details.
👉 Responsive Design: Enjoy a seamless experience across devices with an intuitive and user-friendly interface.
- Next.js - React.js Framework
- TypeScript - Programming Language
- Tailwind CSS - CSS Framework
- Shadcn - Open Source UI library
- MongoDB Atlas - Cloud Database
- Stripe - Payment Processing Platform
- Clerk - Authentication & User management platform
- Cloudinary - Cloud-based Image & Video management service
- Prettier - Code Formatter
To get started with this project, follow these steps:
- Clone the repository:
git clone https://github.com/Mubassim-Khan/Imaginify-AI.git-
Open the project in your preferred code editor.
-
Install the project dependencies using npm:
npm install- Set Up Environment Variables by creating a new file named
.env.localin the root of your project and add the following variables:
#NEXT
NEXT_PUBLIC_SERVER_URL=
#MONGODB
MONGODB_URL=
#CLERK
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
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
#STRIPE
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=Replace the placeholder values with your actual respective account credentials. You can obtain these credentials by signing up on the Clerk, MongoDB, Cloudinary and Stripe
- Run the project
npm run dev-
Open http://localhost:3000 to view it in your browser.
-
To view webhooks, refer to Stripe & Clerk documentation for Webhooks. Stripe Documentation Clerk Documentation
This project is licensed under the MIT License.
Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
- Copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
If you have any questions, suggestions, or feedback, you can reach out to the project maintainer:
- LinkedIn : Mubassim Ahmed Khan
- Email: mubassimkhan@gmail.com