Affiliate Hub - Instagram Automation & Product Management

Affiliate Hub is a fullstack application for Instagram automation and product management built with Next.js 15, TypeScript, and MySQL, now featuring S3-compatible file storage with MinIO.

🚀 Key Features

📱 Instagram Automation

• Automated Post Scheduling: Schedule Instagram posts with videos/photos
• Auto-DM Keyword Based: Automatic DM system based on comment keywords
• Repost Functionality: Repost feature with automatic video download
• Instagram Graph API Integration: Direct integration with Instagram

🛍️ Product Management

• Product Master Data: Manage products with ID, name, image, and URL
• Image Upload: Upload product images directly to secure cloud storage
• Product Linking: Connect posts with specific products
• Search & Filter: Search and filter products

🎯 Dashboard Features

• Modern Dashboard: Easy-to-use interface with better UX
• Secure Authentication: JWT-based authentication with session management
• Real-time Status: Monitor posting status and schedules
• File Upload: Upload videos/photos to secure MinIO storage
• Better Form Experience: Improved placeholder visibility and focus states

🆕 Recent Updates

✅ File Storage with MinIO (S3-Compatible)

• Docker-based Storage: MinIO runs in Docker container for local development
• S3-Compatible API: Easy migration to AWS S3 or other S3-compatible services
• Automatic Bucket Management: Buckets are created and configured automatically
• Secure File URLs: Public URLs for uploaded files with proper access control

✅ Enhanced User Experience

• Better Placeholder Visibility: Fixed placeholder text visibility in light mode
• Improved Focus States: Better visual feedback for form interactions
• Upload Progress Indicators: Loading states during file uploads
• Image Previews: Preview images before saving

🛠️ Tech Stack

• Frontend & Backend: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Database: MySQL with Prisma ORM
• File Storage: MinIO (S3-Compatible) with Docker
• Authentication: JWT with session cookies
• File Handling: MinIO client for uploads, Sharp for image processing
• Scheduling: Node-cron for scheduling
• API Integration: Axios for Instagram Graph API

📁 Project Structure

affiliate-hub/
├── docker-compose.yml         # MinIO and MySQL containers
├── prisma/
│   └── schema.prisma          # Database schema
├── src/
│   ├── app/
│   │   ├── api/               # Backend API routes
│   │   │   ├── auth/          # Authentication endpoints
│   │   │   ├── products/      # Product management
│   │   │   ├── posts/         # Post scheduling
│   │   │   └── upload/        # File upload to MinIO
│   │   ├── dashboard/         # Dashboard page
│   │   ├── login/             # Login page
│   │   └── page.tsx           # Home page
│   ├── lib/
│   │   ├── minio.ts           # MinIO configuration
│   │   ├── prisma.ts          # Database connection
│   │   ├── auth.ts            # Authentication utilities
│   │   ├── instagram.ts       # Instagram API client
│   │   └── scheduler.ts       # Scheduling utilities
├── scripts/
│   └── scheduler.ts           # Standalone scheduler script
└── SETUP.md                   # Detailed setup guide

🚀 Quick Start

For detailed setup instructions, see SETUP.md

1. Clone Repository

git clone <repository-url>
cd affiliate-hub

2. Start Docker Services

docker-compose up -d

3. Install Dependencies & Setup

npm install
cp .env.example .env.local
npm run db:push
npm run db:seed

4. Start Development

npm run dev

Visit http://localhost:3000 and login with:

• Username: admin
• Password: admin123

🔧 Environment Configuration

DATABASE_URL="mysql://username:password@localhost:3306/AutoIG"
NEXTAUTH_SECRET="your-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"
INSTAGRAM_APP_ID="your-instagram-app-id"
INSTAGRAM_APP_SECRET="your-instagram-app-secret"
ADMIN_USERNAME="admin"
ADMIN_PASSWORD="password123"
JWT_SECRET="your-jwt-secret-here"

4. Database Setup

# Generate Prisma client
npm run db:generate

# Push schema to database (untuk development)
npm run db:push

# Atau gunakan migrations (untuk production)
npm run db:migrate

5. Instagram App Setup

1. Buat Facebook App di Facebook Developers
2. Tambahkan Instagram Basic Display API
3. Dapatkan Access Token dan Page ID
4. Simpan di database melalui Instagram Config

🎮 Usage

1. Start Development Server

npm run dev

2. Start Scheduler (Terminal terpisah)

npm run scheduler

3. Access Dashboard

• Buka browser: http://localhost:3000
• Login dengan: admin / password123

📝 API Endpoints

Authentication

• POST /api/auth/login - Login
• POST /api/auth/logout - Logout
• GET /api/auth/check - Check auth status

Products

• GET /api/products - Get all products
• POST /api/products - Create product
• PUT /api/products/[id] - Update product
• DELETE /api/products/[id] - Delete product

Posts

• GET /api/posts - Get all scheduled posts
• POST /api/posts - Create scheduled post

Upload

• POST /api/upload - Upload file

🗄️ Database Schema

Products

• id (Int, Primary Key)
• name (String)
• picture (String)
• url (String)
• createdAt, updatedAt

Scheduled Posts

• id (Int, Primary Key)
• content (String) - File path
• contentType (String) - 'video' or 'photo'
• caption (Text)
• scheduledAt (DateTime)
• keywords (Text) - Comma-separated
• productId (Int, Foreign Key)
• isRepost (Boolean)
• repostUrl (String, Optional)
• status (String) - 'pending', 'posted', 'failed'
• postedAt (DateTime, Optional)

Auto DMs

• id (Int, Primary Key)
• username (String) - Instagram username
• keyword (String)
• productId (Int)
• sentAt (DateTime)

Instagram Config

• id (Int, Primary Key)
• accessToken (String)
• pageId (String)
• isActive (Boolean)

🎯 Features Detail

1. Product Management

• Tambah produk baru dengan nama, gambar, dan URL
• Edit dan hapus produk existing
• Search produk berdasarkan nama
• Grid view dengan preview gambar

2. Post Scheduling

• Upload video/foto untuk konten
• Pilih produk yang akan dipromosikan
• Set caption dan waktu posting
• Tambah keywords untuk auto-DM
• Support repost dari URL lain

3. Auto-DM System

• Monitor komentar di posting
• Deteksi keyword yang sudah ditentukan
• Kirim DM otomatis dengan link produk
• Log history DM yang terkirim

4. Scheduler Service

• Background process untuk eksekusi posting
• Cron job untuk monitoring komentar
• Retry mechanism untuk posting gagal
• Real-time status update

🔧 Customization

Mengubah Kredensial Login

Edit di file .env:

ADMIN_USERNAME="your_username"
ADMIN_PASSWORD="your_password"

Menambah Instagram Config

1. Login ke dashboard
2. Tambah config melalui database
3. Atau buat API endpoint untuk manage config

Custom Timezone

Edit di src/lib/scheduler.ts:

timezone: 'Asia/Jakarta' // Ganti sesuai timezone

🚨 Important Notes

Security

• Gunakan HTTPS di production
• Ganti semua secret keys
• Implement rate limiting
• Validate semua input

Instagram API Limitations

• Perlu approval untuk production
• Rate limits apply
• Access token bisa expire

File Storage

• Saat ini file disimpan lokal di /public/uploads
• Untuk production, consider cloud storage (AWS S3, etc.)

🤝 Contributing

1. Fork repository
2. Create feature branch
3. Commit changes
4. Push to branch
5. Create Pull Request

📄 License

This project is licensed under the MIT License.

🆘 Support

Jika ada pertanyaan atau issue:

1. Check dokumentasi ini
2. Check Instagram Graph API docs
3. Create issue di GitHub repository

---

Developed with ❤️ using Next.js & TypeScript