## 1. Architecture Design

```mermaid
graph TD
  A[User Browser] --> B[React Frontend Application]
  B --> C[Supabase SDK]
  C --> D[Supabase Service]
  C --> E[Supabase Storage]
  C --> F[Supabase Database]

  subgraph "Frontend Layer"
      B
  end

  subgraph "Service Layer (Provided by Supabase)"
      D
      E
      F
  end
```

## 2. Technology Description
- Frontend: React@18 + tailwindcss@3 + vite
- Initialization Tool: vite-init
- Backend: Supabase (BaaS)
- Database: Supabase PostgreSQL
- Storage: Supabase Object Storage
- Authentication: Supabase Auth

## 3. Route Definitions
| Route | Purpose |
|-------|---------|
| / | Home page with hero section and featured properties |
| /properties | Property listings with search and filtering |
| /property/:id | Individual property details page |
| /about | Company information and team |
| /services | Real estate services offered |
| /contact | Contact form and office information |
| /admin | Admin dashboard for property management |
| /admin/login | Admin authentication |

## 4. API Definitions

### 4.1 Property Management APIs

**Get All Properties**
```
GET /api/properties
```

Request Parameters:
| Param Name| Param Type  | isRequired  | Description |
|-----------|-------------|-------------|-------------|
| limit     | number      | false       | Number of properties to return |
| offset    | number      | false       | Pagination offset |
| type      | string      | false       | Property type filter |
| min_price | number      | false       | Minimum price filter |
| max_price | number      | false       | Maximum price filter |
| bedrooms  | number      | false       | Bedroom count filter |
| location  | string      | false       | Location search term |

Response:
| Param Name| Param Type  | Description |
|-----------|-------------|-------------|
| properties| array       | Array of property objects |
| total     | number      | Total property count |

**Get Property by ID**
```
GET /api/properties/:id
```

Response:
| Param Name| Param Type  | Description |
|-----------|-------------|-------------|
| property  | object      | Property details object |

**Submit Application**
```
POST /api/applications
```

Request:
| Param Name| Param Type  | isRequired  | Description |
|-----------|-------------|-------------|-------------|
| name      | string      | true        | Applicant full name |
| email     | string      | true        | Applicant email address |
| phone     | string      | true        | Applicant phone number |
| property_id | string    | false       | Property reference ID |
| message   | string      | true        | Application message |
| type      | string      | true        | Application type (buying/renting/inquiry) |

Response:
| Param Name| Param Type  | Description |
|-----------|-------------|-------------|
| success   | boolean     | Submission status |
| id        | string      | Application ID |

## 5. Server Architecture Diagram

```mermaid
graph TD
  A[Client / Frontend] --> B[Supabase Client SDK]
  B --> C[Supabase Auth]
  B --> D[Supabase Database]
  B --> E[Supabase Storage]
  
  subgraph "Supabase Backend Services"
      C
      D
      E
  end
```

## 6. Data Model

### 6.1 Data Model Definition
```mermaid
erDiagram
  PROPERTIES ||--o{ PROPERTY_IMAGES : contains
  PROPERTIES ||--o{ APPLICATIONS : receives
  
  PROPERTIES {
      UUID id PK
      STRING title
      TEXT description
      DECIMAL price
      STRING type
      INTEGER bedrooms
      INTEGER bathrooms
      DECIMAL area_sqft
      STRING address
      STRING city
      STRING state
      STRING zip_code
      JSON features
      BOOLEAN is_featured
      BOOLEAN is_active
      TIMESTAMP created_at
      TIMESTAMP updated_at
  }
  
  PROPERTY_IMAGES {
      UUID id PK
      UUID property_id FK
      STRING image_url
      INTEGER sort_order
      BOOLEAN is_primary
      TIMESTAMP created_at
  }
  
  APPLICATIONS {
      UUID id PK
      STRING name
      STRING email
      STRING phone
      UUID property_id FK
      TEXT message
      STRING type
      STRING status
      TIMESTAMP created_at
      TIMESTAMP updated_at
  }
```

### 6.2 Data Definition Language

**Properties Table**
```sql
-- Create properties table
CREATE TABLE properties (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    title VARCHAR(255) NOT NULL,
    description TEXT,
    price DECIMAL(12,2) NOT NULL,
    type VARCHAR(50) NOT NULL CHECK (type IN ('house', 'apartment', 'condo', 'townhouse', 'commercial')),
    bedrooms INTEGER DEFAULT 0,
    bathrooms INTEGER DEFAULT 0,
    area_sqft DECIMAL(8,2),
    address VARCHAR(255) NOT NULL,
    city VARCHAR(100) NOT NULL,
    state VARCHAR(50) NOT NULL,
    zip_code VARCHAR(20),
    features JSONB DEFAULT '[]',
    is_featured BOOLEAN DEFAULT false,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create property images table
CREATE TABLE property_images (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    property_id UUID NOT NULL REFERENCES properties(id) ON DELETE CASCADE,
    image_url VARCHAR(500) NOT NULL,
    sort_order INTEGER DEFAULT 0,
    is_primary BOOLEAN DEFAULT false,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create applications table
CREATE TABLE applications (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    email VARCHAR(255) NOT NULL,
    phone VARCHAR(20) NOT NULL,
    property_id UUID REFERENCES properties(id),
    message TEXT NOT NULL,
    type VARCHAR(50) NOT NULL CHECK (type IN ('buying', 'renting', 'inquiry')),
    status VARCHAR(50) DEFAULT 'new' CHECK (status IN ('new', 'contacted', 'in_progress', 'closed')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create indexes for performance
CREATE INDEX idx_properties_type ON properties(type);
CREATE INDEX idx_properties_price ON properties(price);
CREATE INDEX idx_properties_city ON properties(city);
CREATE INDEX idx_properties_featured ON properties(is_featured) WHERE is_featured = true;
CREATE INDEX idx_property_images_property_id ON property_images(property_id);
CREATE INDEX idx_applications_property_id ON applications(property_id);
CREATE INDEX idx_applications_created_at ON applications(created_at DESC);

-- Grant permissions
GRANT SELECT ON properties TO anon;
GRANT SELECT ON property_images TO anon;
GRANT INSERT ON applications TO anon;
GRANT ALL ON properties TO authenticated;
GRANT ALL ON property_images TO authenticated;
GRANT ALL ON applications TO authenticated;

-- Row Level Security (RLS) policies
ALTER TABLE properties ENABLE ROW LEVEL SECURITY;
ALTER TABLE property_images ENABLE ROW LEVEL SECURITY;
ALTER TABLE applications ENABLE ROW LEVEL SECURITY;

-- Policies for properties
CREATE POLICY "Public can view active properties" ON properties
    FOR SELECT USING (is_active = true);

CREATE POLICY "Authenticated users can manage properties" ON properties
    FOR ALL USING (auth.role() = 'authenticated');

-- Policies for property images
CREATE POLICY "Public can view property images" ON property_images
    FOR SELECT USING (true);

CREATE POLICY "Authenticated users can manage property images" ON property_images
    FOR ALL USING (auth.role() = 'authenticated');

-- Policies for applications
CREATE POLICY "Public can submit applications" ON applications
    FOR INSERT WITH CHECK (true);

CREATE POLICY "Authenticated users can view applications" ON applications
    FOR ALL USING (auth.role() = 'authenticated');
```

## 7. Supabase Configuration

### Storage Buckets
- **property-images**: Store property photos and gallery images
  - Public access for viewing
  - Authenticated upload permissions
  - Image optimization and resizing enabled

### Authentication Settings
- Email/password authentication enabled
- Admin users manually created through Supabase dashboard
- Session persistence configured for 1 week

### Real-time Subscriptions
- Property listing updates for admin dashboard
- Application notifications for new submissions