ImageMagic is a Next.js-based web application for AI-powered image transformations with integrated payments.

Built with modern web technologies:

• Next.js 14 with App Router
• React 18 and TypeScript
• Clerk Authentication
• MongoDB Database
• Cloudinary Image Processing
• Stripe Payments
• Tailwind CSS & shadcn/ui
• Framer Motion animations

1. Clone the repository:

git clone https://github.com/SwarnenduG07/ImageMagic.git
cd imagemagic

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

pen http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

This project uses shadcn for UI's.

1st Clone the Repo

git clone https://github.com/SwarnenduG07/ImageMagic.git
cd imagemagic

Go to the project directory and do

npm install

Go to [.env.example] Replace your won API keys with existing one's

CLERK_PUBLISHABLE_KEY & CLERK_SECRET_KEY & webhook secret

Go to Clerk

Cloudinary_API_TOKEN

Go toCloudinary Then Copy

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET

Then go to setting/upload and enable unsigned URL then create app and then give a folder name. then go to adOns and turn on google auto tagging.

go to MongoDb Altas

STRIP API TOKEN & STRIPE_WEBHOOK_SECRET

Go to Strip

In WINDOWS we will use Scoop to install it so

Open PowerShell and pest this command to install scoop

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

Now we will install Strip-cli To install this pest this 👇 command

scoop bucket add stripe https://github.com/stripe/scoop-stripe-cli.git
scoop install stripe

This will install Strip-cli

Visit this Strip-cli and install this

Then Create an account and get a API key and replace this with STRIPE_API_KEY then go to webhook and download the strip-cli and run it

stripe login

In your terminal and do then

stripe listen --forward-to localhost:3000/api/webhook

in webhook section and it in your terminal you will get something like this

[whsec_97347152fae0xxxxxx823xxb1707d0b4aaa1794a5abf9c1sdkjh17]

put this in your STRIPE_WEBHOOK_SECRET

npm run dev

Open http://localhost:3000 with your browser to see the result.