Imaginify - AI powered image generator.

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

imaginify/
  |- actions/
    |-- image.action.ts
    |-- transaction.action.ts
    |-- user.action.ts
  |- app/
    |-- (auth)/
        |--- sign-in/[[...sign-in]]/
        |--- sign-up/[[...sign-up]]/
        |--- layout.tsx
    |-- (root)/
        |--- credits/
        |--- profile/
        |--- transformations/
            |---- [id]/
                |----- update/
                |----- page.tsx
            |---- add/
            |---- layout.tsx
            |---- page.tsx
        |--- layout.tsx
        |--- page.tsx
    |-- api/webhooks/
        |--- clerk/
        |--- stripe/
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- shared/
    |-- ui/
  |- config/
    |-- index.ts
  |- constants/
    |-- index.ts
  |- lib/
    |-- mongoose.ts
    |-- utils.ts
  |- models/
    |-- image.model.ts
    |-- transaction.model.ts
    |-- user.model.ts
  |- public/assets/
    |-- icons/
    |-- images/
  |- types/
    |-- index.d.ts
  |- .env.example
  |- .env.local
  |- .eslintrc.json
  |- .gitignore
  |- .vercelignore
  |- components.json
  |- environment.d.ts
  |- middleware.ts
  |- next.config.mjs
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# .env.local

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk redirect urls
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=/

# clerk webhook secret
WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXX

# mongo db url
MONGODB_URL=mongodb+srv://<user>:<password>@<host>:<port>/?retryWrites=true&w=majority&appName=imaginify-backend

# cloudinary
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=xxxxxxxxxxx
CLOUDINARY_API_KEY=000000000000000
CLOUDINARY_API_SECRET=XXXXXXXXXXXXXXXXXXXX

# stripe keys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# public server url
NEXT_PUBLIC_SERVER_URL=http://localhost:3000

5. Clerk Auth Keys:

   • Go to the Clerk Dashboard (https://dashboard.clerk.dev/).
   • Log in to your account.
   • Navigate to the project you're working on.
   • Find the section for API keys.
   • Generate or locate the following keys:
     • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
     • CLERK_SECRET_KEY
   • Copy these keys into your .env.local file.

6. Clerk Redirect URLs:

   • These are typically configured within your Clerk Dashboard or during project setup.
   • Ensure that the following URLs are configured correctly:
     • NEXT_PUBLIC_CLERK_SIGN_IN_URL
     • NEXT_PUBLIC_CLERK_SIGN_UP_URL
     • NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL
     • NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL
   • Copy these URLs into your .env.local file.

7. Clerk Webhook Secret:

   • Navigate to the Clerk Dashboard.
   • Find the section for webhooks or integrations.
   • Generate a webhook secret or locate an existing one.
   • Copy the webhook secret (WEBHOOK_SECRET) into your .env.local file.

8. MongoDB URL:

   • Log in to your MongoDB Atlas account (https://www.mongodb.com/cloud/atlas).
   • Navigate to your project or cluster.
   • Locate the connection string.
   • Replace <user>, <password>, <host>, and <port> with your MongoDB credentials.
   • Copy the MongoDB URL (MONGODB_URL) into your .env.local file.

9. Cloudinary:

   • Log in to your Cloudinary account (https://cloudinary.com/console).
   • Navigate to your account settings or dashboard.
   • Find or generate the Cloudinary API key and API secret.
   • Copy these credentials into your .env.local file under NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, and CLOUDINARY_API_SECRET.

10. Stripe Keys:

• Log in to your Stripe account (https://dashboard.stripe.com/login).
• Navigate to your API settings.
• Find or generate the following keys:
  • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
  • STRIPE_SECRET_KEY
  • STRIPE_WEBHOOK_SECRET
• Copy these keys into your .env.local file.

11. Public Server URL:

• This is typically the URL where your server is hosted.
• Replace http://localhost:3000 with your actual server URL.
• Copy the updated URL (NEXT_PUBLIC_SERVER_URL) into your .env.local file.

12. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
13. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Imaginify.

• @clerk/nextjs: ^4.29.9
• @hookform/resolvers: ^3.3.4
• @radix-ui/react-alert-dialog: ^1.0.5
• @radix-ui/react-dialog: ^1.0.5
• @radix-ui/react-label: ^2.0.2
• @radix-ui/react-select: ^2.0.0
• @radix-ui/react-slot: ^1.0.2
• @radix-ui/react-toast: ^1.1.5
• @stripe/stripe-js: ^3.0.10
• class-variance-authority: ^0.7.0
• cloudinary: ^2.0.3
• clsx: ^2.1.0
• lucide-react: ^0.357.0
• mongodb: ^6.5.0
• mongoose: ^8.2.1
• next: 14.1.3
• next-cloudinary: ^6.3.0
• qs: ^6.12.0
• react: ^18
• react-dom: ^18
• react-hook-form: ^7.51.0
• stripe: ^14.21.0
• svix: ^1.21.0
• tailwind-merge: ^2.2.1
• tailwindcss-animate: ^1.0.7
• zod: ^3.22.4

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)