# 🚀 RH Elektronik - Full Stack Platform

## Platform E-Commerce + Blog + Brand Advertising

Website lengkap untuk Service Center Elektronik dengan 3 revenue streams:
- 🛍️ **Marketplace** - Jual spareparts & aksesoris
- 📝 **Blog SEO** - Google AdSense ready (7 ad zones)
- 📢 **Brand Ads** - Platform untuk brand beriklan

---

## 📦 Isi Project

```
rh-elektronik-full-project/
├── backend/                    # FastAPI Backend
│   ├── server.py              # Main API server
│   ├── seed_data.py           # Seed blog, services, brands
│   ├── seed_products.py       # Seed products
│   ├── requirements.txt       # Python dependencies
│   └── .env                   # Environment variables
│
├── frontend/                  # React Frontend
│   ├── public/               # Static assets & images
│   ├── src/
│   │   ├── pages/           # All pages (Home, Shop, Blog, Advertise)
│   │   │   ├── HomePage.js
│   │   │   ├── ShopPage.js
│   │   │   ├── ProductDetailPage.js
│   │   │   ├── BlogListPage.js
│   │   │   ├── BlogDetailPage.js
│   │   │   ├── AdvertisePage.js
│   │   │   └── admin/       # Admin pages
│   │   ├── components/      # Reusable components
│   │   ├── utils/          # API utilities
│   │   └── App.js          # Main app
│   ├── package.json        # Node dependencies
│   └── .env               # Environment variables
│
├── README_REBUILD.md          # Dokumentasi rebuild
└── PANDUAN_SEO_ADSENSE.md    # Panduan SEO & monetisasi
```

---

## 🎯 Fitur Lengkap

### 🛍️ Marketplace
- Product catalog dengan kategori
- Search & filter products
- Multi-image gallery
- Price & discount display
- Stock management
- WhatsApp direct checkout
- Admin product management (CRUD)

### 📝 Blog & SEO
- Blog posts dengan WYSIWYG editor
- SEO meta tags (title, description, keywords)
- Open Graph & Twitter Cards
- Structured data (JSON-LD)
- 7 ad zones untuk Google AdSense
- Social sharing buttons
- View counter

### 📢 Brand Advertising
- Advertise landing page
- Real traffic statistics
- 3 pricing packages
- Professional presentation
- WhatsApp & email contact

### 👨‍💼 Admin Panel
- Dashboard dengan statistics
- Blog management (create, edit, delete)
- Product management (CRUD)
- Service management
- Brand partners management
- Area coverage management
- Contact info management
- Image upload system

---

## 🚀 Quick Start

### Prerequisites
- Python 3.8+
- Node.js 16+
- MongoDB

### 1. Setup Backend

```bash
cd backend

# Install dependencies
pip install -r requirements.txt

# Setup environment
# Edit .env file:
MONGO_URL="mongodb://localhost:27017"
DB_NAME="rh_elektronik"
CORS_ORIGINS="http://localhost:3000"

# Seed initial data
python seed_data.py
python seed_products.py

# Run server
uvicorn server:app --reload --host 0.0.0.0 --port 8001
```

### 2. Setup Frontend

```bash
cd frontend

# Install dependencies
yarn install

# Setup environment
# Edit .env file:
REACT_APP_BACKEND_URL=http://localhost:8001

# Run development server
yarn start
```

### 3. Access Application

- **Frontend**: http://localhost:3000
- **Backend API**: http://localhost:8001
- **API Docs**: http://localhost:8001/docs

---

## 🔑 Default Login

**Admin Panel**: `/admin/login`
- Username: `admin`
- Password: `admin123`

⚠️ **PENTING**: Ganti password default setelah deploy!

---

## 📊 API Endpoints

### Public APIs
- `GET /api/blog` - Get blog posts
- `GET /api/products` - Get products
- `GET /api/services` - Get services
- `GET /api/brands` - Get brands
- `GET /api/areas` - Get service areas
- `GET /api/contact` - Get contact info
- `GET /api/stats/public` - Public stats

### Admin APIs (Auth Required)
- `POST /api/admin/login` - Admin login
- `POST /api/blog` - Create blog post
- `POST /api/products` - Create product
- `POST /api/upload-image` - Upload image
- And more... (check `/docs`)

---

## 💰 Monetisasi (3 Revenue Streams)

### 1. Product Sales 🛍️
- Jual spareparts & aksesoris
- WhatsApp direct checkout
- Estimasi: Rp 1-3 juta/bulan

### 2. Google AdSense 💵
- 7 ad zones ready
- Blog SEO optimized
- Estimasi: Rp 300K-1.5 juta/bulan

### 3. Brand Advertising 📢
- 3 packages: Rp 500K - 2 juta/bulan
- Professional advertise page
- Estimasi: Rp 500K-2 juta per brand/bulan

**Total Potential: Rp 2-6.5 JUTA/BULAN!**

---

## 📱 Features Highlights

✅ **Responsive Design** - Mobile, tablet, desktop
✅ **SEO Optimized** - Meta tags, structured data
✅ **Ad Ready** - 7 ad zones untuk monetisasi
✅ **WhatsApp Integration** - Direct checkout
✅ **Image Upload** - Built-in upload system
✅ **WYSIWYG Editor** - Easy blog writing
✅ **Multi-language Ready** - Indonesian
✅ **Professional UI** - Modern design

---

## 🛠️ Tech Stack

### Backend
- **Framework**: FastAPI
- **Database**: MongoDB (Motor async driver)
- **Auth**: JWT tokens with bcrypt
- **Image Upload**: File system storage
- **Validation**: Pydantic models

### Frontend
- **Framework**: React 19
- **Styling**: Tailwind CSS
- **Routing**: React Router
- **HTTP Client**: Axios
- **State**: React Hooks
- **SEO**: React Helmet

---

## 📝 How to Use

### Add Products
1. Login to admin panel
2. Go to **Products** menu
3. Click **Add Product**
4. Fill form & upload images
5. Save & product live!

### Write Blog Post
1. Go to **Blog Posts** → **New Post**
2. Write title & content
3. Add SEO meta description & keywords
4. Upload featured image
5. Publish!

### Manage Orders
- Check WhatsApp messages
- Process orders manually
- Update stock in admin

### Setup Google AdSense
1. Daftar di google.com/adsense
2. Edit `BlogDetailPage.js`
3. Ganti placeholder dengan ad code
4. Start earning!

---

## 🚀 Deployment

### Vercel (Frontend)
```bash
cd frontend
vercel
```

### Railway/Render (Backend)
```bash
cd backend
# Add to requirements.txt
gunicorn server:app -w 4 -k uvicorn.workers.UvicornWorker
```

### MongoDB Atlas
- Create free cluster
- Update MONGO_URL in .env

---

## 📚 Documentation

- **README_REBUILD.md** - Dokumentasi rebuild lengkap
- **PANDUAN_SEO_ADSENSE.md** - Panduan SEO & monetisasi
- **API Docs** - http://localhost:8001/docs

---

## 🎯 Roadmap

**Phase 1: Launch** ✅
- ✅ Marketplace
- ✅ Blog & SEO
- ✅ Admin panel
- ✅ Brand advertise

**Phase 2: Scale** 🚧
- Order management system
- Email notifications
- Payment gateway integration
- Customer dashboard
- Product reviews
- Analytics dashboard

**Phase 3: Expand** 📋
- Mobile app
- Multi-vendor marketplace
- Subscription packages
- Loyalty program

---

## 🤝 Support

**Email**: cs.rhelektronik@gmail.com
**WhatsApp**: +62 815-5433-3316

---

## 📄 License

© 2026 CV RH Elektronik - All Rights Reserved

---

## 🎉 Get Started!

1. Extract ZIP file
2. Follow Quick Start guide
3. Customize content
4. Deploy to production
5. Start earning! 💰

**Selamat menggunakan platform RH Elektronik!** 🚀
