Transpify - Image Manipulation Suite

Aplikasi web full-stack untuk manipulasi gambar dengan berbagai fitur profesional. Transpify menyediakan tool untuk menghapus background, kompres gambar, konversi format, dan crop gambar dengan antarmuka yang modern dan mudah digunakan.

✨ Fitur Utama

🎨 Background Remover

Hapus latar belakang gambar secara otomatis menggunakan AI (Remove.bg)
Preview before/after dengan transparency grid
Export sebagai PNG dengan transparansi

📦 Image Compressor & Resizer

Kompres gambar dengan kontrol kualitas (10-100%)
Resize berdasarkan dimensi spesifik (width/height)
Resize berdasarkan persentase (10-200%)
Tampilkan perbandingan ukuran file dan compression ratio

🔄 Format Converter

Konversi ke PNG, JPEG, WebP, atau AVIF
Optimasi otomatis untuk setiap format
Kualitas output terbaik dengan ukuran file efisien

✂️ Image Cropper

Crop dengan presisi menggunakan react-image-crop
Aspect ratio presets (Free, 1:1, 16:9, 4:3, 3:2)
Live preview hasil crop
Export dalam format original

🚀 Tech Stack

Frontend:

React 18 dengan Vite
Tailwind CSS untuk styling
React Router untuk navigasi
React Dropzone untuk upload file
React Image Crop untuk cropping
Lucide React untuk icons
Axios untuk HTTP requests

Backend:

Vercel Serverless Functions (Node.js)
Sharp untuk image processing
Remove.bg API untuk background removal

📋 Prerequisites

Node.js >= 18.0.0
npm atau yarn
Remove.bg API key (gratis untuk 50 requests/bulan)

🛠️ Installation & Setup

1. Clone atau Download Project

cd /home/developer/js_dev/rionapp/transpify

2. Install Dependencies

# Install frontend dependencies
npm install

# Install API dependencies
cd api
npm install
cd ..

3. Setup Environment Variables

Buat file .env di root project:

cp .env.example .env

Edit file .env dan tambahkan API key Anda:

VITE_REMOVE_BG_API_KEY=your_actual_api_key_here

Cara mendapatkan Remove.bg API Key:

Kunjungi https://www.remove.bg/api
Daftar/login ke akun Anda
Copy API key dari dashboard
Free tier: 50 requests/bulan

4. Run Development Server

npm run dev

Aplikasi akan berjalan di http://localhost:3000

📦 Build untuk Production

npm run build

Output akan berada di folder dist/

🌐 Deployment ke Vercel

Cara 1: Deploy via Vercel CLI

# Install Vercel CLI (jika belum)
npm i -g vercel

# Deploy
vercel

Cara 2: Deploy via Vercel Dashboard

Push code ke GitHub repository
Login ke vercel.com
Klik "New Project"
Import repository Anda
Configure project settings:
- Framework Preset: Vite
- Build Command: npm run build
- Output Directory: dist
Tambahkan Environment Variable:
- Key: VITE_REMOVE_BG_API_KEY
- Value: your_api_key_here
Klik "Deploy"

Environment Variables di Vercel

Pastikan menambahkan environment variable berikut di Vercel Dashboard:

VITE_REMOVE_BG_API_KEY - API key untuk Remove.bg

Langkah:

Buka project di Vercel Dashboard
Settings → Environment Variables
Tambahkan variable
Redeploy project

📁 Struktur Project

transpify/
├── api/                          # Vercel Serverless Functions
│   ├── package.json             # API dependencies
│   ├── remove-background.js     # Background removal endpoint
│   ├── compress-resize.js       # Compression & resize endpoint
│   ├── convert-format.js        # Format conversion endpoint
│   └── crop-image.js            # Image cropping endpoint
├── src/
│   ├── components/              # React components
│   │   ├── Navbar.jsx
│   │   ├── LandingPage.jsx
│   │   ├── BackgroundRemover.jsx
│   │   ├── ImageCompressor.jsx
│   │   ├── ImageConverter.jsx
│   │   ├── ImageCropper.jsx
│   │   └── LoadingSpinner.jsx
│   ├── App.jsx                  # Main app component
│   ├── main.jsx                 # Entry point
│   └── index.css                # Global styles
├── public/                      # Static assets
├── index.html                   # HTML template
├── package.json                 # Frontend dependencies
├── vite.config.js              # Vite configuration
├── tailwind.config.js          # Tailwind configuration
├── postcss.config.js           # PostCSS configuration
├── vercel.json                 # Vercel deployment config
├── .env.example                # Environment variables template
└── README.md                   # Dokumentasi ini

🎯 Cara Penggunaan

Background Remover

Klik menu "Background Remover"
Upload atau drag & drop gambar
Klik "Hapus Background"
Download hasil PNG dengan transparansi

Image Compressor

Klik menu "Compressor"
Upload gambar
Atur kualitas dengan slider (10-100%)
Pilih resize option:
- Gunakan persentase, atau
- Masukkan width/height manual
Klik "Kompres Gambar"
Lihat perbandingan ukuran file
Download hasil

Format Converter

Klik menu "Converter"
Upload gambar
Pilih format output (PNG/JPEG/WebP/AVIF)
Klik "Konversi"
Download hasil

Image Cropper

Klik menu "Cropper"
Upload gambar
Pilih aspect ratio preset atau gunakan free crop
Drag area crop pada gambar
Klik "Generate Preview"
Download hasil crop

⚙️ API Endpoints

POST /api/remove-background

Remove background dari gambar

Request Body:

{
  "image": "data:image/png;base64,..."
}

Response:

{
  "success": true,
  "image": "data:image/png;base64,..."
}

POST /api/compress-resize

Kompres dan resize gambar

Request Body:

{
  "image": "data:image/png;base64,...",
  "quality": 80,
  "width": 800,
  "height": null,
  "percentage": null
}

Response:

{
  "success": true,
  "image": "data:image/jpeg;base64,...",
  "size": 123456,
  "dimensions": {
    "width": 800,
    "height": 600
  }
}

POST /api/convert-format

Konversi format gambar

Request Body:

{
  "image": "data:image/png;base64,...",
  "format": "webp"
}

Response:

{
  "success": true,
  "image": "data:image/webp;base64,...",
  "format": "webp",
  "size": 98765
}

POST /api/crop-image

Crop gambar

Request Body:

{
  "image": "data:image/png;base64,...",
  "crop": {
    "x": 100,
    "y": 100,
    "width": 400,
    "height": 300,
    "unit": "px"
  }
}

Response:

{
  "success": true,
  "image": "data:image/png;base64,...",
  "dimensions": {
    "width": 400,
    "height": 300
  }
}

🔒 Batasan & Perhatian

Vercel Serverless Functions (Free Tier)

Timeout: 10 detik max
Response Size: 50MB max
Memory: 1024MB

Tips untuk Menghindari Timeout

Kompres gambar di client-side sebelum upload jika ukuran > 5MB
Gunakan gambar dengan resolusi wajar (max 4000x4000px)
Remove.bg memiliki limit ukuran file sendiri

Remove.bg API Limits

Free Tier: 50 requests/bulan
File Size: Max 12MB
Resolution: Max 25 megapixels

🐛 Troubleshooting

Error: "Remove.bg API key belum dikonfigurasi"

Solusi: Pastikan file .env ada dan berisi VITE_REMOVE_BG_API_KEY yang valid

Error: "Request timeout"

Solusi:

Gunakan gambar dengan ukuran lebih kecil
Kompres gambar sebelum upload
Pastikan koneksi internet stabil

Gambar tidak muncul setelah di-upload

Solusi:

Check console browser untuk error
Pastikan format file didukung
Coba clear cache browser

Build error saat deployment

Solusi:

Pastikan semua dependencies ter-install
Check Node.js version (>= 18.0.0)
Periksa log build di Vercel dashboard

📄 License

MIT License - Feel free to use for personal or commercial projects

👨‍💻 Developer

Dikembangkan dengan ❤️ menggunakan React, Vite, dan Tailwind CSS

🙏 Credits

Remove.bg - Background removal API
Sharp - Image processing library
React Image Crop - Cropping library
Lucide Icons - Beautiful icon set

Happy Image Editing! 🎨✨

🔄 Auto-Deploy Configuration

Project is now connected to GitHub for automatic deployments. Every push to main branch will trigger a new production deployment.

Last Updated: Tue Dec 2 12:23:22 PM WIB 2025

Name		Name	Last commit message	Last commit date
Latest commit History 37 Commits
api		api
public		public
src		src
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
test-css-filter.js		test-css-filter.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

Transpify - Image Manipulation Suite

✨ Fitur Utama

🎨 Background Remover

📦 Image Compressor & Resizer

🔄 Format Converter

✂️ Image Cropper

🚀 Tech Stack

📋 Prerequisites

🛠️ Installation & Setup

1. Clone atau Download Project

2. Install Dependencies

3. Setup Environment Variables

4. Run Development Server

📦 Build untuk Production

🌐 Deployment ke Vercel

Cara 1: Deploy via Vercel CLI

Cara 2: Deploy via Vercel Dashboard

Environment Variables di Vercel

📁 Struktur Project

🎯 Cara Penggunaan

Background Remover

Image Compressor

Format Converter

Image Cropper

⚙️ API Endpoints

POST /api/remove-background

POST /api/compress-resize

POST /api/convert-format

POST /api/crop-image

🔒 Batasan & Perhatian

Vercel Serverless Functions (Free Tier)

Tips untuk Menghindari Timeout

Remove.bg API Limits

🐛 Troubleshooting

Error: "Remove.bg API key belum dikonfigurasi"

Error: "Request timeout"

Gambar tidak muncul setelah di-upload

Build error saat deployment

📄 License

👨‍💻 Developer

🙏 Credits

🔄 Auto-Deploy Configuration

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages