Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swarnendug07/imagemagic
User Can upscale their Images and Change their Background's & Erase Any Objects from a Image , Change Color of a Object, Convert Image ratio's
https://github.com/swarnendug07/imagemagic
cicd clerk-authentication clerk-webhooks docker docker-compose magic-ui momgodb mongoose nextjs14 reactjs shadcn stripe-api tailwindcss typescript zod-validation
Last synced: about 1 month ago
JSON representation
User Can upscale their Images and Change their Background's & Erase Any Objects from a Image , Change Color of a Object, Convert Image ratio's
- Host: GitHub
- URL: https://github.com/swarnendug07/imagemagic
- Owner: SwarnenduG07
- Created: 2024-07-29T17:13:06.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-19T15:37:47.000Z (4 months ago)
- Last Synced: 2024-08-20T18:26:31.007Z (4 months ago)
- Topics: cicd, clerk-authentication, clerk-webhooks, docker, docker-compose, magic-ui, momgodb, mongoose, nextjs14, reactjs, shadcn, stripe-api, tailwindcss, typescript, zod-validation
- Language: TypeScript
- Homepage: https://image-magic.vercel.app
- Size: 635 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IMAGE-MAGIC
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](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`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
pen [http://localhost:3000](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`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
This project uses [`shadcn`](https://ui.shadcn.com/) for UI's.
# For Local Development
1st Clone the Repo
```
git clone https://github.com/SwarnenduG07/ImageMagic.git
cd imagemagic
```
Go to the project directory and do
```bash
npm install
```
### Next Step
Go to _*[.env.example]*_
Replace your won API keys with existing one's
### Replace
CLERK_PUBLISHABLE_KEY & CLERK_SECRET_KEY & webhook secret
Go to [`Clerk`](https://clerk.com/)
Cloudinary_API_TOKEN
Go to[`Cloudinary`](https://cloudinary.com/documentation) 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.
## Db_URL
go to [`MongoDb Altas`]([`Cloudinary`](https://cloudinary.com/documentation) )
STRIP API TOKEN & STRIPE_WEBHOOK_SECRET
Go to [`Strip`](https://stripe.com/in)
## How to Download strip-cli
In WINDOWS
we will use [`Scoop`](https://scoop.sh/) to install it so
Open PowerShell and pest this command to install scoop
```bash
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
```bash
scoop bucket add stripe https://github.com/stripe/scoop-stripe-cli.git
scoop install stripe
```
This will install Strip-cli
### For Other OS
Visit this [`Strip-cli`](https://docs.stripe.com/stripe-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
```bash
stripe login
```
In your terminal and do then
```bash
stripe listen --forward-to localhost:3000/api/webhook
```
in webhook section and it in your terminal you will get something like this
```bash
[whsec_97347152fae0xxxxxx823xxb1707d0b4aaa1794a5abf9c1sdkjh17]
```
put this in your STRIPE_WEBHOOK_SECRET
## For Running the project
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.