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:

# ServerPORT=5000# JWTJWT_SECRET=your_jwt_secret_hereJWT_EXPIRES_IN=1hJWT_REFRESH_SECRET=your_refresh_secret_hereJWT_REFRESH_EXPIRES_IN=7dJWT_ISSUER=api.abcodeworks.techJWT_AUDIENCE=generateprompt.abcodeworks.tech# MongoDBMONGODB_URI=mongodb://localhost:27017/ab-codeworks-prompt-generator# AdminADMIN_EMAIL=admin@example.comADMIN_USERNAME=adminADMIN_PASSWORD=secure_admin_password# Azure OpenAIAZURE_OPENAI_API_KEY=your_azure_openai_api_keyAZURE_OPENAI_ENDPOINT=your_azure_openai_endpoint# EmailEMAIL_NOTIFICATIONS_ENABLED=trueEMAIL_HOST=smtp.gmail.comEMAIL_PORT=587EMAIL_USER=your_email@example.comEMAIL_PASS=your_email_app_passwordEMAIL_FROM=AB Codeworks Prompt Generator <your_email@example.com># Tripay Payment GatewayTRIPAY_API_KEY=your_tripay_api_keyTRIPAY_MERCHANT_CODE=your_tripay_merchant_codeTRIPAY_PRIVATE_KEY=your_tripay_private_keyTRIPAY_MODE=sandbox# URLsBACKEND_URL=http://localhost:5000FRONTEND_URL=http://localhost:5173ALLOWED_ORIGINS=http://localhost:5173# NotificationsNOTIFICATIONS_ENABLED=trueTELEGRAM_ENABLED=falseTELEGRAM_TOKEN=your_telegram_bot_tokenTELEGRAM_CHAT_ID=your_telegram_chat_id# EnvironmentENV_TYPE=developmentNODE_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/apiVITE_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