PropertyGPT Estait Development Guide

This skill provides comprehensive guidance for working with the PropertyGPT Estait codebase - an anticipatory real estate intelligence platform built with Next.js 15+ that predicts user needs through sophisticated design patterns.

Project Overview

PropertyGPT Estait implements an 8-phase mesh architecture focused on anticipatory user interactions. The platform combines conversational AI with predictive design to create an intelligent real estate experience.

Technology Stack

Development Commands

```bash

npm run dev # Start development server with Turbopack

npm run build # Build for production

npm run start # Start production server

npm run lint # Run ESLint

npm run type-check # TypeScript type checking

npm test # Run tests

```

Architecture: Anticipatory Design System

The project implements a unique design philosophy centered around predicting user needs through three core components:

Core Components

**AsymmetricContainer**: Creates off-center layouts with 33%/67% split for visual balance

**AnticipatoryCopywrite**: Typography system with predictive hierarchy using Raleway (ultra-thin 200) and Manrope (conversational 300)

**PredictiveSurface**: Interactive surfaces that anticipate user actions with confidence-based suggestions

Color Palette

Design Tokens

```javascript

// Spacing

'asymmetric-third': '33.333333%'

'asymmetric-two-thirds': '66.666667%'

// Typography

letterSpacing: {

'anticipatory': '0.1em',

'conversational': '0.03em'

}

// Animations

'predictive-pulse': pulse 2s cubic-bezier

'anticipatory-fade': fadeIn 0.5s ease-in-out

```

Directory Structure

```

src/

├── components/

│ ├── design-system/ # Core anticipatory components

│ ├── chat/ # Conversational interface

│ ├── property/ # Property display and search

│ ├── market/ # Market analysis components

│ ├── compliance/ # Real estate compliance tools

│ └── crm/ # Lead management

├── lib/

│ ├── types/ # TypeScript definitions

│ ├── services/ # API and business logic

│ ├── hooks/ # React hooks

│ └── utils/ # Utility functions

└── mock/ # Mock data for development

```

Implementation Phases

This is a mesh implementation system with 8 phases:

1. **Foundation & Design System** ✅ COMPLETED

2. **Conversational Interface** ✅ COMPLETED (OpenAI integration with mock fallback)

3. **Backend Services & Database** (Next Phase)

4. **Real Estate API Integration**

5. **Saved Searches & Notifications**

6. **Advanced Property Analytics**

7. **Compliance & Regulatory System**

8. **CRM & Lead Management**

Key Type Definitions

```typescript

interface User {

id: string;

email: string;

name: string;

role: 'agent' | 'broker' | 'admin';

}

interface Property {

id: string;

address: string;

price: number;

bedrooms: number;

bathrooms: number;

square_footage: number;

status: 'active' | 'pending' | 'sold';

coordinates: { lat: number; lng: number };

}

interface ConversationMessage {

id: string;

content: string;

sender: 'user' | 'ai';

timestamp: string;

rich_content?: RichContent[];

anticipated_actions?: AnticipatedAction[];

}

interface Prediction {

content: string;

confidence: number;

trigger: 'typing_pattern' | 'context_cue' | 'temporal_pattern';

category: 'property_search' | 'market_analysis' | 'compliance' | 'crm';

}

```

Environment Variables

Copy `.env.example` to `.env.local` and configure:

Development Guidelines

Design Principles

1. **Predictive Suggestions**: Appear contextually based on user behavior

2. **Asymmetric Positioning**: Use 33%/67% splits for visual balance

3. **White Surfaces**: Invite interaction on conversational-white backgrounds

4. **Minimal Magenta**: Use predictive-magenta (#FF0099) sparingly for breakthrough moments only

Code Standards

Testing Strategy

Current Status (Phase 2 Complete)

The conversational interface with intelligence engine is fully implemented:

**Ready for Phase 3**: Backend Services & Database Architecture with Supabase integration

Working with This Codebase

When modifying or extending PropertyGPT Estait:

1. **Read CLAUDE.md First**: This file is the source of truth for architecture decisions

2. **Follow Design System**: Use AsymmetricContainer, AnticipatoryCopywrite, PredictiveSurface

3. **Maintain Type Safety**: Strict TypeScript mode is enabled

4. **Predict, Don't React**: UX should anticipate needs before user requests

5. **Test Builds**: Always run `npm run build` before committing

6. **Database Security**: All Supabase tables use Row Level Security

7. **API Rate Limits**: Include rate limiting and caching for all integrations

Notes