Odinn's Art Gallery

A modern, responsive art gallery application built with Laravel and Livewire. This application provides a beautiful way to showcase and organize digital art collections with advanced image metadata extraction and intelligent layout management.

✨ Features

🖼️ Smart Image Gallery

• Automatic Collection Discovery: Automatically scans and organizes images from the storage/app/collections directory
• Intelligent Layout: Responsive grid layout that adapts to image orientation (wide, tall, square)
• Multiple Format Support: Supports JPG, JPEG, PNG, GIF, BMP, WebP, and SVG formats
• Dynamic Image Serving: Secure image serving with proper MIME type detection

📊 Advanced Metadata Extraction

• EXIF Data: Extracts camera settings, location, and timestamp information
• Image Properties: Width, height, aspect ratio, and orientation analysis
• XMP Metadata: Extracts extended metadata from images
• macOS Integration: Reads "Where from" attributes for source tracking
• Imagick Integration: Advanced image processing and metadata extraction

🎨 Modern UI/UX

• Responsive Design: Mobile-first design with Tailwind CSS
• Dark Mode Support: Built-in dark/light theme switching
• Livewire Components: Dynamic, reactive user interface
• Authentication: User registration, login, and profile management
• Breeze Integration: Laravel Breeze for authentication scaffolding

🔧 Developer Experience

• Comprehensive Testing: Pest PHP testing framework with feature and unit tests
• Code Quality: Laravel Pint for code formatting
• Development Tools: Spatie Ray integration for debugging
• Image Processing: Intervention Image for advanced image manipulation
• Color Extraction: League Color Extractor for palette analysis

🚀 Quick Start

Prerequisites

• PHP 8.2+ with the following extensions:
  • ext-imagick (for advanced image processing)
  • ext-gd (for basic image operations)
  • ext-exif (for EXIF data extraction)
• Composer for PHP dependency management
• Node.js and npm for frontend assets
• SQLite (default) or MySQL/PostgreSQL

Installation

1. Clone the repository

   git clone https://github.com/yourusername/odinnsart.git
   cd odinnsart

2. Install PHP dependencies

   composer install

3. Install Node.js dependencies

   npm install

4. Environment setup

   cp .env.example .env
   php artisan key:generate

5. Database setup

   php artisan migrate

6. Build frontend assets

   npm run build

7. Start the development server

   php artisan serve

8. Add your art collections

   # Create collections directory
   mkdir -p storage/app/collections
   
   # Add your image collections
   # Example structure:
   # storage/app/collections/
   # ├── portraits-1/
   # │   ├── image1.jpg
   # │   ├── image2.png
   # │   └── ...
   # ├── landscapes-1/
   # │   ├── landscape1.jpg
   # │   └── ...
   # └── abstract-1/
   #     ├── abstract1.jpg
   #     └── ...

📁 Project Structure

odinnsart/
├── app/
│   ├── Http/Controllers/
│   │   └── GalleryController.php      # Main gallery logic
│   ├── Services/
│   │   └── CollectionService.php      # Image collection management
│   └── Livewire/                      # Reactive UI components
├── resources/views/
│   └── gallery/
│       ├── index.blade.php           # Collections overview
│       └── collection.blade.php      # Individual collection view
├── storage/app/collections/          # Your art collections
├── tests/
│   └── Feature/
│       ├── GalleryTest.php           # Gallery functionality tests
│       └── CollectionServiceTest.php # Service layer tests
└── routes/web.php                    # Application routes

🎯 Usage

Adding Art Collections

1. Create a collection folder in storage/app/collections/

   mkdir storage/app/collections/my-collection

2. Add images to the collection folder

   cp your-images/* storage/app/collections/my-collection/

3. Access your collection at /collection/my-collection

Supported Image Formats

• JPEG/JPG: Most common format with EXIF support
• PNG: Lossless format with transparency
• GIF: Animated images and simple graphics
• WebP: Modern format with excellent compression
• BMP: Basic bitmap format
• SVG: Vector graphics

Metadata Features

The application automatically extracts and displays:

• Basic Info: Dimensions, aspect ratio, file size
• EXIF Data: Camera settings, GPS coordinates, timestamps
• XMP Metadata: Extended image properties
• Color Information: Palette analysis (when available)
• Source Tracking: "Where from" attributes (macOS)

🧪 Testing

Run the comprehensive test suite:

# Run all tests
php artisan test

# Run specific test files
php artisan test tests/Feature/GalleryTest.php
php artisan test tests/Feature/CollectionServiceTest.php

# Run tests with coverage
php artisan test --coverage

Test Coverage

• Gallery Functionality: Collection display, image serving, routing
• Service Layer: Image metadata extraction, collection management
• Authentication: User registration, login, profile management
• Error Handling: Invalid images, missing files, edge cases

🔧 Configuration

Environment Variables

Key configuration options in .env:

# Database
DB_CONNECTION=sqlite
DB_DATABASE=database/database.sqlite

# File Storage
FILESYSTEM_DISK=local

# Image Processing
IMAGICK_ENABLED=true

Customization

Styling

• Modify resources/css/app.css for custom styles
• Update tailwind.config.js for theme customization
• Edit Blade templates in resources/views/

Image Processing

• Configure allowed extensions in CollectionService.php
• Adjust metadata extraction in getImageMetadata() method
• Customize layout logic in collection views

🚀 Deployment

Production Setup

1. Environment Configuration

   # Set production environment
   APP_ENV=production
   APP_DEBUG=false
   
   # Configure caching
   php artisan config:cache
   php artisan route:cache
   php artisan view:cache

2. File Permissions

   # Ensure storage is writable
   chmod -R 775 storage/
   chmod -R 775 bootstrap/cache/

3. Web Server Configuration

   • Configure your web server to point to the public/ directory
   • Set up proper URL rewriting for Laravel
   • Configure SSL certificates for secure image serving

Docker Deployment

FROM php:8.2-fpm

# Install dependencies
RUN apt-get update && apt-get install -y \
    libmagickwand-dev \
    libfreetype6-dev \
    libjpeg62-turbo-dev \
    libpng-dev \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install -j$(nproc) gd exif \
    && pecl install imagick \
    && docker-php-ext-enable imagick

# Copy application
COPY . /var/www/html
WORKDIR /var/www/html

# Install dependencies
RUN composer install --no-dev --optimize-autoloader
RUN npm install && npm run build

# Set permissions
RUN chown -R www-data:www-data storage bootstrap/cache

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Development Setup

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Add tests for new functionality
5. Run the test suite

   php artisan test

6. Submit a pull request

Code Style

• Follow PSR-12 coding standards
• Use Laravel Pint for code formatting
• Write meaningful commit messages
• Add comments for complex logic

Testing Guidelines

• Write tests for all new features
• Ensure existing tests pass
• Use descriptive test names
• Mock external dependencies

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Laravel Team for the amazing framework
• Livewire for reactive components
• Tailwind CSS for utility-first styling
• Spatie for development tools
• Intervention Image for image processing

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Wiki

---

Made with ❤️ for the art community