**Warnings below**

⚠️: Important: The payment gateway is still a WIP because Stripe does not allow payments from India in test mode.

⚠️: Unable to add upload Image on production using Cloudinary. Will fix the error soon.

📌 Overview

InstantAI is an AI Powered Image Generator App under development. It leverages various libraries/tools like Clerk/Next.js, Cloudinary, React, Stripe, MongoDB, TailwindCSS, TypeScript, and more for seamless functionality.

🔍 Table of Contents

• 📁 Project Structure

• 📝 Project Summary

• 💻 Stack

• ⚙️ Setting Up

• 🚀 Run Locally

• 🙌 Contributors

• ☁️ Deploy

• 📄 License

📁 Project Structure

├── .eslintrc.json
├── .gitignore
├── README.md
├── app
│   ├── (auth)
│   │   ├── layout.tsx
│   │   ├── sign-in
│   │   │   └── [[...sign-in]]
│   │   │       └── page.tsx
│   │   └── sign-up
│   │       └── [[...sign-up]]
│   │           └── page.tsx
│   ├── (root)
│   │   ├── credits
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── profile
│   │   │   └── page.tsx
│   │   └── transformations
│   │       ├── [id]
│   │       │   ├── page.tsx
│   │       │   └── update
│   │       │       └── page.tsx
│   │       └── add
│   │           └── [type]
│   │               └── page.tsx
│   ├── api
│   │   └── webhooks
│   │       ├── clerk
│   │       │   └── route.ts
│   │       └── stripe
│   │           └── route.ts
│   ├── favicon.ico
│   ├── globals.css
│   └── layout.tsx
├── components.json
├── components
│   ├── shared
│   │   ├── Checkout.tsx
│   │   ├── Collection.tsx
│   │   ├── CustomField.tsx
│   │   ├── DeleteConfirmation.tsx
│   │   ├── Header.tsx
│   │   ├── InsufficientCreditsModal.tsx
│   │   ├── MediaUploader.tsx
│   │   ├── MobileNav.tsx
│   │   ├── Search.tsx
│   │   ├── Sidebar.tsx
│   │   ├── TransformationForm.tsx
│   │   └── TransformedImage.tsx
│   └── ui
│       ├── alert-dialog.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── form.tsx
│       ├── input.tsx
│       ├── label.tsx
│       ├── pagination.tsx
│       ├── select.tsx
│       ├── sheet.tsx
│       ├── toast.tsx
│       ├── toaster.tsx
│       └── use-toast.ts
├── constants
│   └── index.ts
├── lib
│   ├── actions
│   │   ├── image.actions.ts
│   │   ├── transaction.action.ts
│   │   └── user.actions.ts
│   ├── database
│   │   ├── db.ts
│   │   ├── models
│   │   │   ├── image.model.ts
│   │   │   ├── transaction.model.ts
│   │   │   └── user.model.ts
│   │   └── mongoose.ts
│   └── utils.ts
├── middleware.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── assets
│   │   ├── icons
│   │   │   ├── add.svg
│   │   │   ├── bag.svg
│   │   │   ├── camera.svg
│   │   │   ├── caret-down.svg
│   │   │   ├── check.svg
│   │   │   ├── close.svg
│   │   │   ├── coins.svg
│   │   │   ├── credit-coins.svg
│   │   │   ├── cross.svg
│   │   │   ├── download.svg
│   │   │   ├── filter.svg
│   │   │   ├── free-plan.svg
│   │   │   ├── home.svg
│   │   │   ├── image.svg
│   │   │   ├── menu.svg
│   │   │   ├── photo.svg
│   │   │   ├── profile.svg
│   │   │   ├── scan.svg
│   │   │   ├── search.svg
│   │   │   ├── spinner.svg
│   │   │   └── stars.svg
│   │   └── images
│   │       ├── banner-bg.jpg
│   │       ├── coins.jpg
│   │       ├── gradient-bg.svg
│   │       ├── logo-icon.svg
│   │       └── logo-text.svg
│   ├── favicon.ico
│   ├── logo-icon.png
│   ├── logo.png
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
├── tsconfig.json
└── types
    └── index.d.ts

📝 Project Summary

• app: Core application logic and structure.
• components: Reusable UI components.
• lib: Library for actions and database models.
• public: Publicly accessible assets.
• constants: Constants and configurations.
• types: Type definitions.
• app/(auth): Authentication-related functionality.
• app/(root): Root-level application features.
• app/api: API endpoints.
• public/assets: Image and icon assets.

💻 Stack

• react-hook-form: Simplifies form management and validation.
• mongoose: Facilitates MongoDB data modeling and interaction.
• next: Framework for server-rendered React applications.
• stripe: Enables payment processing integration.
• tailwindcss: Utility-first CSS framework for styling.
• typescript: Adds static typing to JavaScript for enhanced development.

⚙️ Setting Up

Your Environment Variable

• Step 1

• Step 2

🚀 Run Locally

1.Clone the InstantAI repository:

git clone https://github.com/gaurav-sarage/InstantAI

2.Install the dependencies with one of the package managers listed below:

pnpm install
bun install
npm install
yarn install

3.Start the development mode:

pnpm dev
bun dev
npm run dev
yarn dev

☁️ Live Link

InstantAI

Stargazers over time