This project is a web application built using the MERN stack (MongoDB, Express, React, Node.js) and Vite, designed to remove the background from your images. It allows users to upload an image, remove the background, and download the result with a transparent background.

• Upload Images: Users can upload images in supported formats.
• Background Removal: Automatic and precise background removal using advanced algorithms.
• Download Images: Download processed images with a transparent background.
• Responsive UI: Fully responsive design for seamless experience across devices.
• User Authentication: Secure login and signup functionalities.
• Transaction History: Keep track of image processing transactions.

• React.js (UI Framework)
• Vite (Frontend tooling)
• Tailwind CSS (Styling)

• Node.js (Runtime Environment)
• Express.js (Backend Framework)
• MongoDB (Database)

• Multer (File Upload Middleware)
• JWT (Authentication)
• Cloud Services: Deployed on Vercel (Frontend) and backend API hosted online.

client/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   └── assets.js
│   ├── components/
│   │   ├── BgSlider.jsx
│   │   ├── Footer.jsx
│   │   ├── Header.jsx
│   │   ├── Navbar.jsx
│   │   ├── Steps.jsx
│   │   ├── Testimonial.jsx
│   │   └── Upload.jsx
│   ├── context/
│   ├── pages/
│   │   ├── BuyCredit.jsx
│   │   ├── Home.jsx
│   │   ├── Result.jsx
│   │   └── App.jsx
│   ├── index.css
│   └── main.jsx
├── .env

server/
├── config/
│   └── mongodb.js
├── controllers/
│   ├── imageController.js
│   └── userController.js
├── middlewares/
│   ├── auth.js
│   └── multer.js
├── models/
│   ├── transactionModel.js
│   └── userModel.js
├── routes/
├── node_modules/
├── .env
├── package.json
├── package-lock.json
├── server.js
└── vercel.json

Ensure you have the following installed:

• Node.js
• MongoDB
• Vite (Optional)

1. Clone the Repository

   git clone https://github.com/Gyanthakur/ClearBg.git
   cd repository-name

1. Navigate to the server/ directory.

2. Create a .env file and add the required environment variables:

   MONGO_URI=your-mongodb-connection-string
   JWT_SECRET=your-secret-key
   CLERK_WEBHOOK_SECRET = YOUR_CLERK_WEBHOOK_SECRET
   CLIPDROP_API = YOUR_CLIPDROP_API
   RAZORPAY_KEY_ID = YOUR_RAZORPAY_KEY_ID
   RAZORPAY_KEY_SECRET = YOUR_RAZORPAY_KEY_SECRET
   CURRENCY = 'INR'
   

3. Install dependencies and start the server:

   npm install
   npm start

1. Navigate to the client/ directory.

2. Create a .env file if needed.

3. Install dependencies and start the client:

   npm install
   npm run dev

• Open your browser and navigate to http://localhost:5173 for the client.
• The server API will run on http://localhost:4000.

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch.
3. Commit your changes.
4. Push the branch and create a pull request.

📧 Contact For any queries or suggestions, reach out at: gps.96169@gmail.com.
📧 Contact For any queries or suggestions, reach out at: