AB Codeworks Prompt Generator

Aplikasi web full-stack untuk menghasilkan prompt AI berkualitas tinggi untuk pembuatan video dan gambar. Dibangun dengan React, Express.js, dan MongoDB.

✨ Fitur Utama

🎬 Prompt Video

• Generate prompt video AI dengan pengaturan sinematografi lengkap
• Opsi pergerakan kamera, sudut kamera, dan jenis lensa
• Pengaturan durasi, aspect ratio, dan frame rate
• Dukungan musik, mood, dan dialog

🖼️ Prompt Gambar

• Generate prompt gambar dengan kustomisasi detail
• Pengaturan gaya seni, pencahayaan, dan tone warna
• Opsi pengaturan karakter (etnis, bentuk tubuh, rambut, kulit, pakaian)
• Dukungan berbagai platform AI (Midjourney, DALL-E, Stable Diffusion, dll)

👥 Manajemen Pengguna

• Sistem autentikasi lengkap (Register, Login, Verifikasi Email)
• Reset password dengan kode verifikasi
• Role-based access control (Free, Pro, Admin)
• Quota harian untuk pengguna Free

💎 Subscription & Pembayaran

• Paket langganan: Harian, Bulanan, Tahunan
• Integrasi Tripay Payment Gateway
• Upgrade otomatis ke akun Pro setelah pembayaran
• Notifikasi email untuk status langganan

🔔 Sistem Notifikasi

• Email notifikasi untuk verifikasi dan reset password
• Notifikasi langganan (expiring soon, expired, upgraded)
• Integrasi Telegram untuk notifikasi admin
• WebSocket untuk notifikasi real-time

🎨 UI/UX

• Dark/Light mode
• Multi-bahasa (Indonesia & English)
• Responsive design (mobile-friendly)
• Tutorial interaktif untuk pengguna baru
• Form kontak untuk support

🛠️ Tech Stack

Frontend

• React 18 - UI Framework
• Vite - Build Tool
• Tailwind CSS - Styling
• Radix UI - Component Library
• React Router - Routing
• React Query - Data Fetching
• i18next - Internationalization
• Framer Motion - Animations
• Lucide React - Icons

Backend

• Node.js - Runtime
• Express.js - Web Framework
• MongoDB - Database
• JWT - Authentication
• Nodemailer - Email Service
• WebSocket - Real-time Communication
• node-cron - Scheduled Tasks
• Azure OpenAI - AI Integration

Payment

• Tripay - Payment Gateway

📁 Struktur Project

Prompt Generator/
├── backend/
│   ├── src/
│   │   ├── controllers/     # Route controllers
│   │   ├── middleware/      # Custom middleware
│   │   ├── models/          # MongoDB models
│   │   ├── routes/          # API routes
│   │   ├── utils/           # Utility functions
│   │   └── server.js        # Entry point
│   ├── .env.example         # Environment variables template
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/      # Reusable components
│   │   ├── contexts/        # React contexts
│   │   ├── locales/         # i18n translations
│   │   ├── pages/           # Page components
│   │   ├── services/        # API services
│   │   └── utils/           # Utility functions
│   ├── .env.example         # Environment variables template
│   └── package.json
└── README.md

🚀 Getting Started

Prerequisites

• Node.js v16 atau lebih baru
• MongoDB (local atau MongoDB Atlas)
• npm atau yarn

1. Clone Repository

git clone https://github.com/your-username/ab-codeworks-prompt-generator.git
cd ab-codeworks-prompt-generator

2. Setup Backend

cd backend
npm install

Buat file .env dari .env.example dan isi variabel yang diperlukan:

cp .env.example .env

Konfigurasi .env:

# Server
PORT=5000

# JWT
JWT_SECRET=your_jwt_secret_here
JWT_EXPIRES_IN=1h
JWT_REFRESH_SECRET=your_refresh_secret_here
JWT_REFRESH_EXPIRES_IN=7d
JWT_ISSUER=api.abcodeworks.tech
JWT_AUDIENCE=generateprompt.abcodeworks.tech

# MongoDB
MONGODB_URI=mongodb://localhost:27017/ab-codeworks-prompt-generator

# Admin
ADMIN_EMAIL=admin@example.com
ADMIN_USERNAME=admin
ADMIN_PASSWORD=secure_admin_password

# Azure OpenAI
AZURE_OPENAI_API_KEY=your_azure_openai_api_key
AZURE_OPENAI_ENDPOINT=your_azure_openai_endpoint

# Email
EMAIL_NOTIFICATIONS_ENABLED=true
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@example.com
EMAIL_PASS=your_email_app_password
EMAIL_FROM=AB Codeworks Prompt Generator <your_email@example.com>

# Tripay Payment Gateway
TRIPAY_API_KEY=your_tripay_api_key
TRIPAY_MERCHANT_CODE=your_tripay_merchant_code
TRIPAY_PRIVATE_KEY=your_tripay_private_key
TRIPAY_MODE=sandbox

# URLs
BACKEND_URL=http://localhost:5000
FRONTEND_URL=http://localhost:5173
ALLOWED_ORIGINS=http://localhost:5173

# Notifications
NOTIFICATIONS_ENABLED=true
TELEGRAM_ENABLED=false
TELEGRAM_TOKEN=your_telegram_bot_token
TELEGRAM_CHAT_ID=your_telegram_chat_id

# Environment
ENV_TYPE=development
NODE_ENV=development

Jalankan backend:

npm run dev

3. Setup Frontend

cd frontend
npm install

Buat file .env dari .env.example:

cp .env.example .env

Konfigurasi .env:

VITE_API_URL=http://localhost:5000/api
VITE_APP_NAME=AB Codeworks Prompt Generator

Jalankan frontend:

npm run dev

4. Akses Aplikasi

Buka browser dan akses: http://localhost:5173

📝 Scripts

Backend

npm start        # Production mode
npm run dev      # Development mode (dengan nodemon)
npm test         # Run tests

Frontend

npm run dev      # Development mode
npm run build    # Build untuk production
npm run preview  # Preview production build
npm run lint     # Run ESLint

🔐 Environment Variables

Backend

Variable	Description	Required
PORT	Server port	No (default: 5000)
JWT_SECRET	JWT secret key	Yes
JWT_EXPIRES_IN	JWT expiry time	No (default: 1h)
MONGODB_URI	MongoDB connection string	Yes
ADMIN_EMAIL	Admin email	Yes
ADMIN_USERNAME	Admin username	Yes
ADMIN_PASSWORD	Admin password	Yes
AZURE_OPENAI_API_KEY	Azure OpenAI API key	Yes
AZURE_OPENAI_ENDPOINT	Azure OpenAI endpoint	Yes
EMAIL_USER	Email sender	Yes (if email enabled)
EMAIL_PASS	Email password/app password	Yes (if email enabled)
TRIPAY_API_KEY	Tripay API key	Yes (if payment enabled)
TRIPAY_MERCHANT_CODE	Tripay merchant code	Yes (if payment enabled)
TRIPAY_PRIVATE_KEY	Tripay private key	Yes (if payment enabled)

Frontend

Variable	Description	Required
VITE_API_URL	Backend API URL	Yes
VITE_APP_NAME	Application display name	Yes

📦 Deployment

Build Frontend

cd frontend
npm run build

Output akan berada di folder frontend/dist/.

Production Backend

cd backend
npm start

Pastikan semua environment variables production sudah dikonfigurasi dengan benar.

📄 License

MIT License - lihat file LICENSE untuk detail.

👨‍💻 Author

AB Codeworks

• Email: abcodework0.1@gmail.com

🙏 Acknowledgments

• React
• Vite
• Tailwind CSS
• Express.js
• MongoDB
• Azure OpenAI
• Tripay

---

Made with ❤️ by AB Codeworks