# Studio Kunj Photo Critique Platform - Developer Guide

## Table of Contents
1. [Project Overview](#project-overview)
2. [Architecture](#architecture)
3. [Setup & Installation](#setup--installation)
4. [Development Environment](#development-environment)
5. [Code Structure](#code-structure)
6. [API Documentation](#api-documentation)
7. [Database Schema](#database-schema)
8. [Frontend Development](#frontend-development)
9. [Backend Development](#backend-development)
10. [Testing](#testing)
11. [Deployment](#deployment)
12. [Contributing](#contributing)

## Project Overview

Studio Kunj Photo Critique Platform is a scalable, modular web application built with modern development practices. The platform uses a component-based architecture with clear separation of concerns.

### Technology Stack
- **Frontend**: Vanilla JavaScript (ES6+), Custom CSS Framework
- **Backend**: PHP 8+, MySQL 8+
- **AI/ML**: Python 3.9+, OpenCV, PIL
- **Testing**: PHPUnit, Jest, Cypress
- **Deployment**: Apache/Nginx, Docker support

## Architecture

### High-Level Architecture
```
Frontend (JavaScript) ◄──► Backend API (PHP) ◄──► AI Engine (Python)
         │                       │                       │
         ▼                       ▼                       ▼
Static Files (Assets)    Database (MySQL)    File Storage (Images)
```

### Directory Structure
```
PhotoCritique/
├── api/                          # Backend API endpoints
├── src/                          # Source code
│   ├── config/                   # Configuration files
│   ├── components/               # Reusable UI components
│   ├── services/                 # Service layer
│   ├── utils/                    # Utility functions
│   └── pages/                    # Page-specific code
├── public/                       # Public assets
├── database/                     # Database files
├── ai/                          # AI/ML components
├── docs/                        # Documentation
└── README.md                    # Project README
```

## Setup & Installation

### Prerequisites
- PHP 8.0+
- MySQL 8.0+
- Python 3.9+
- Node.js 16+
- Composer
- Git

### Quick Start

1. **Clone and install**
```bash
git clone https://github.com/studiokunj/photo-critique.git
cd photo-critique
composer install
cd ai/ && pip install -r requirements.txt
```

2. **Configure environment**
```bash
cp .env.example .env
# Edit .env with your settings
```

3. **Setup database**
```bash
mysql -u root -p < database/schema.sql
```

4. **Start development server**
```bash
php -S localhost:8000
```

## Code Structure

### Frontend Architecture

The frontend uses a modular component system with centralized configuration and utilities.

#### Configuration System
```javascript
// src/config/app.config.js
const AppConfig = {
    app: { name: 'Studio Kunj', version: '2.0.0' },
    api: { baseUrl: '/api', timeout: 30000 },
    ui: { theme: { primary: '#667eea' } }
};
```

#### Service Layer
```javascript
// src/services/api.service.js
class ApiService {
    async login(email, password) { /* ... */ }
    async uploadPhotos(formData) { /* ... */ }
}
```

#### UI Components
```javascript
// src/components/ui.components.js
const UIComponents = {
    Alert: { create, dismiss },
    Modal: { create, open, close }
};
```

### Backend Architecture

#### Database Configuration
```php
// src/config/database.config.php
class DatabaseConfig {
    public static function getConnection() { /* ... */ }
    public static function query($sql, $params = []) { /* ... */ }
}
```

#### API Endpoints
```php
// api/auth/login.php
class LoginController {
    public function authenticate($email, $password) {
        // Authentication logic
    }
}
```

## API Documentation

### Authentication

#### POST /api/auth/login.php
```json
Request: { "email": "user@example.com", "password": "password123" }
Response: { "success": true, "token": "jwt_token", "user": {...} }
```

#### POST /api/auth/register.php
```json
Request: { "name": "John", "email": "user@example.com", "password": "password123" }
Response: { "success": true, "user_id": 1 }
```

### Analysis Tools

#### POST /api/tools/ai-analyze.php
Analyzes photo composition using AI.

**Request:** Multipart form data with image file
**Response:**
```json
{
    "success": true,
    "analysis": {
        "composition_score": 8.5,
        "rule_of_thirds": { "score": 9.0 },
        "suggestions": ["Adjust horizon line..."]
    }
}
```

## Database Schema

### Core Tables

```sql
-- Users table
CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role ENUM('user', 'admin') DEFAULT 'user',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Submissions table
CREATE TABLE submissions (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    title VARCHAR(255),
    filename VARCHAR(255) NOT NULL,
    file_path VARCHAR(500) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

-- AI Analyses table
CREATE TABLE ai_analyses (
    id INT PRIMARY KEY AUTO_INCREMENT,
    submission_id INT NOT NULL,
    composition_score DECIMAL(3,2),
    analysis_data JSON,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (submission_id) REFERENCES submissions(id)
);
```

## Frontend Development

### Creating Components
```javascript
const PhotoGallery = {
    create(photos, options = {}) {
        const gallery = Utils.dom.create('div', {
            className: 'photo-gallery grid grid-cols-3 gap-4'
        });
        
        photos.forEach(photo => {
            const item = Utils.dom.dom.create('div', {
                className: 'photo-item card'
            }, `<img src="${photo.url}" alt="${photo.title}">`);
            gallery.appendChild(item);
        });
        
        return gallery;
    }
};
```

### CSS Framework Usage
```css
.photo-gallery {
    @apply grid grid-cols-3 gap-4;
}

.photo-item {
    @apply card shadow-lg hover:shadow-xl;
}
```

## Backend Development

### Creating API Endpoints
```php
<?php
// api/tools/new-feature.php
require_once '../../src/config/database.config.php';

header('Content-Type: application/json');

class NewFeatureController {
    public function process($data) {
        try {
            $this->validateInput($data);
            $result = $this->performOperation($data);
            
            return ['success' => true, 'data' => $result];
        } catch (Exception $e) {
            return ['success' => false, 'error' => $e->getMessage()];
        }
    }
    
    private function validateInput($data) {
        // Validation logic
    }
    
    private function performOperation($data) {
        // Business logic
    }
}

$input = json_decode(file_get_contents('php://input'), true);
$controller = new NewFeatureController();
echo json_encode($controller->process($input));
?>
```

### Database Operations
```php
class UserRepository {
    public static function create($userData) {
        $sql = "INSERT INTO users (name, email, password_hash) VALUES (?, ?, ?)";
        return DatabaseConfig::insert($sql, [
            $userData['name'],
            $userData['email'],
            password_hash($userData['password'], PASSWORD_DEFAULT)
        ]);
    }
    
    public static function findByEmail($email) {
        $sql = "SELECT * FROM users WHERE email = ?";
        return DatabaseConfig::fetchOne($sql, [$email]);
    }
}
```

## Testing

### PHP Unit Tests
```php
<?php
use PHPUnit\Framework\TestCase;

class UserRepositoryTest extends TestCase {
    public function testCreateUser() {
        $userData = [
            'name' => 'Test User',
            'email' => 'test@example.com',
            'password' => 'password123'
        ];
        
        $userId = UserRepository::create($userData);
        $this->assertIsInt($userId);
    }
}
?>
```

### JavaScript Tests
```javascript
describe('Utils', () => {
    test('capitalize should work correctly', () => {
        expect(Utils.string.capitalize('hello')).toBe('Hello');
    });
});
```

## Deployment

### Production Setup

1. **Server requirements**
   - PHP 8.0+ with PDO, GD extensions
   - MySQL 8.0+
   - Python 3.9+
   - SSL certificate

2. **Database setup**
```bash
mysql -u root -p -e "CREATE DATABASE u987364504_photocretique;"
mysql -u root -p u987364504_photocretique < database/schema.sql
```

3. **Environment configuration**
```bash
cp .env.example .env
# Edit with production values
```

4. **Web server configuration**
```apache
<VirtualHost *:443>
    ServerName yourdomain.com
    DocumentRoot /var/www/photo-critique
    SSLEngine on
    # SSL certificate configuration
</VirtualHost>
```

### Docker Deployment
```dockerfile
FROM php:8.0-apache
RUN apt-get update && apt-get install -y python3 python3-pip
COPY . /var/www/html/
RUN pip3 install -r /var/www/html/ai/requirements.txt
EXPOSE 80
```

## Contributing

### Code Standards

#### PHP
- Follow PSR-12 standards
- Use type hints
- Add PHPDoc comments

```php
/**
 * Analyze photo composition
 * @param string $imagePath Path to image
 * @return array Analysis results
 */
public function analyzeComposition(string $imagePath): array {
    // Implementation
}
```

#### JavaScript
- Use ES6+ features
- Add JSDoc for complex functions
- Use async/await

```javascript
/**
 * Upload photos to server
 * @param {FileList} files Files to upload
 * @returns {Promise<Object>} Upload results
 */
async function uploadPhotos(files) {
    // Implementation
}
```

### Git Workflow

1. Create feature branch
2. Make changes with descriptive commits
3. Create pull request
4. Code review
5. Merge to main

### Development Checklist

- [ ] Code follows standards
- [ ] Tests are included
- [ ] Documentation updated
- [ ] Security considerations addressed
- [ ] Performance impact evaluated

This guide provides the essential information for developing and maintaining the platform. For detailed examples and advanced topics, refer to the inline code documentation and existing implementations.