# 🏗️ Hosting Platform - Modular Architecture

## 📋 Project Overview

Professional WordPress hosting platform with container infrastructure and automation.

---

## 🎯 Architecture Principles

1. **Modularity** - Each feature is a separate module
2. **Scalability** - Easy to add new features without breaking existing code
3. **Separation of Concerns** - Clear boundaries between layers
4. **Security First** - Authentication, encryption, and access control
5. **Clean Code** - Readable, maintainable, and well-documented

---

## 🏛️ System Architecture

### Frontend Architecture

```
frontend/
├── customer-portal/          # argeict.net
│   ├── src/
│   │   ├── pages/
│   │   │   ├── Landing.jsx           # Register/Login page
│   │   │   ├── Dashboard.jsx         # Customer dashboard
│   │   │   ├── DNS/                  # DNS module
│   │   │   ├── Container/            # Container module
│   │   │   ├── Network/              # Network module
│   │   │   └── Security/             # Security module
│   │   ├── components/
│   │   │   ├── auth/                 # Auth components
│   │   │   ├── layout/               # Layout components
│   │   │   └── shared/               # Shared components
│   │   ├── services/
│   │   │   ├── api.js                # API client
│   │   │   ├── auth.js               # Auth service
│   │   │   └── storage.js            # Local storage
│   │   ├── hooks/                    # Custom React hooks
│   │   ├── context/                  # React context
│   │   └── utils/                    # Utility functions
│   └── public/
│
├── admin-portal/             # adminpanel.argeict.net
│   ├── src/
│   │   ├── pages/
│   │   │   ├── Login.jsx             # Admin login
│   │   │   ├── Dashboard.jsx         # Admin dashboard
│   │   │   ├── CFAccounts/           # CF management
│   │   │   ├── Customers/            # Customer management
│   │   │   └── Settings/             # System settings
│   │   ├── components/
│   │   ├── services/
│   │   └── utils/
│   └── public/
│
└── shared/                   # Shared code between portals
    ├── components/
    ├── utils/
    └── styles/
```

### Backend Architecture

```
backend/
├── app/
│   ├── __init__.py
│   ├── main.py                       # Application entry point
│   ├── config.py                     # Configuration
│   │
│   ├── models/                       # Database models
│   │   ├── __init__.py
│   │   ├── user.py                   # User/Customer model
│   │   ├── domain.py                 # Domain model
│   │   ├── cloudflare.py             # CF Account model
│   │   ├── container.py              # Container model
│   │   └── base.py                   # Base model
│   │
│   ├── routes/                       # API routes (blueprints)
│   │   ├── __init__.py
│   │   ├── auth.py                   # Authentication routes
│   │   ├── customer.py               # Customer routes
│   │   ├── dns.py                    # DNS routes
│   │   ├── container.py              # Container routes
│   │   ├── admin.py                  # Admin routes
│   │   └── webhook.py                # Webhook routes
│   │
│   ├── services/                     # Business logic
│   │   ├── __init__.py
│   │   ├── auth_service.py           # Authentication logic
│   │   ├── cloudflare_service.py     # Cloudflare API
│   │   ├── nameserver_service.py     # DNS/NS logic
│   │   ├── container_service.py      # Container management
│   │   └── email_service.py          # Email notifications
│   │
│   ├── middleware/                   # Middleware
│   │   ├── __init__.py
│   │   ├── auth.py                   # Auth middleware
│   │   ├── rate_limit.py             # Rate limiting
│   │   └── cors.py                   # CORS configuration
│   │
│   ├── utils/                        # Utilities
│   │   ├── __init__.py
│   │   ├── encryption.py             # Encryption helpers
│   │   ├── validators.py             # Input validation
│   │   └── helpers.py                # General helpers
│   │
│   └── migrations/                   # Database migrations
│
├── tests/                            # Tests
│   ├── unit/
│   ├── integration/
│   └── e2e/
│
└── requirements.txt
```

---

## 🗄️ Database Schema

### Users Table
- id, email, password_hash, full_name
- is_active, is_verified, created_at, updated_at
- role (customer, admin)

### Customers Table (extends Users)
- user_id (FK), company_name, phone
- billing_info, subscription_plan

### CloudflareAccounts Table
- id, name, email, api_token_encrypted
- is_active, max_domains, current_domain_count

### Domains Table
- id, domain_name, customer_id (FK)
- cf_account_id (FK), cf_zone_id
- status, created_at

### Containers Table (Future)
- id, customer_id (FK), domain_id (FK)
- container_id, status, resources

---

## 🎨 Design System

### Brand Colors (from logo)
- Primary: #0066CC (Blue)
- Secondary: #00A3E0 (Light Blue)
- Accent: #FF6B35 (Orange)
- Dark: #1A1A1A
- Light: #F5F5F5

### Typography
- Headings: Inter, sans-serif
- Body: Inter, sans-serif

---

## 🔐 Security

1. **Authentication**: JWT tokens
2. **Password**: bcrypt hashing
3. **API Tokens**: Fernet encryption
4. **HTTPS**: All communications
5. **Rate Limiting**: Per endpoint
6. **CORS**: Configured per domain

---

## 📦 Technology Stack

### Frontend
- React 18 + Vite
- React Router (multi-app routing)
- TailwindCSS
- Axios
- React Query (data fetching)

### Backend
- Flask 3.0
- SQLAlchemy 2.0
- PostgreSQL 16
- Redis 7.0
- JWT authentication

### DevOps
- Docker (containers)
- Nginx (reverse proxy)
- Supervisor (process management)
- Gitea (version control)

---

**Next Steps**: Implementation in phases