Toota Art Portfolio - 1
LaravelLivewireAlpine.jsTailwind CSSPostgreSQLCloudflare R2DockerSpatie

Toota Art Portfolio

A performance-first digital gallery for visual artists, built with the TALL stack and Cloudflare R2. Features server-side interactivity with Livewire 3, zero-egress object storage, and a comprehensive automated backup system.

Case Study: Toota Art Portfolio

A Performance-First Digital Gallery for Visual Artists

Role: Full-Stack Developer Stack: Laravel 12, Livewire 3, Alpine.js, Tailwind CSS, PostgreSQL, Cloudflare R2 Live: toota-art.ahmedlotfy.site

Professional artists need more than storage—they need a high-performance stage. This portfolio handles high-resolution artwork seamlessly while providing a fully bilingual experience (English & Arabic), all manageable by a non-technical user.

Technical Architecture

Built with the TALL Stack to deliver SPA-like speed with traditional SEO reliability:

  • Livewire 3 for server-side interactivity, reducing JavaScript bundle size.
  • PostgreSQL 13+ for structured data with advanced features.
  • Cloudflare R2 for zero-egress object storage.
  • FrankenPHP on Dokploy with custom Dockerfile for production deployment.
  • Aggressive caching strategies for instant gallery load times.

Key Solutions

Performance Optimization

Artists upload large, unoptimized files that would kill performance.

  • Problem: Heavy media assets slowing down the site.
  • Solution: I built an automated pipeline that converts uploads to WebP and generates responsive sizes on the fly.
  • Result: A 10MB upload becomes a crisp 150KB image for users—blazing fast globally with zero egress fees.

Comprehensive Backup System

Content creators fear data loss and platform lock-in. I engineered a multi-layered backup center with:

  • MediaArchiver Service: Downloads thousands of images from R2, organized by project title.
  • DataExportService: Structured JSON exports of all content.
  • PostgreSQL Dump Integration: Smart binary detection across Docker/Dokploy/Nixpacks.
  • Dual-Destination Strategy: Local disk + R2 bucket for geographic redundancy.
  • Smart Retention: Daily (16 days), weekly (8 weeks), monthly (4 months), yearly (2 years).
  • Automated Scheduling: Configurable frequency with email notifications.
  • Secure Downloads: 5-minute expiring signed URLs for backup files.

Combined with automatic storage cleanup at 5GB threshold, the artist has complete peace of mind.

Security First

Unlike social platforms, this is a dedicated professional portfolio.

  • Public registration disabled entirely.
  • Strict Google OAuth for the artist only.
  • Separates public viewing from private management, making the dashboard impenetrable to brute-force attacks.

Features

  • True RTL Support: Fully localized interface with automatic layout flipping for Arabic.
  • Live Admin Dashboard: Manage projects, toggle featured status, rearrange categories in real-time.
  • Automated SEO: Daily sitemap generation via spatie/laravel-sitemap for instant Google indexing.
  • One-Click Resilience: Instant downloads of SQL dumps, JSON exports, or complete media archives.

What I Learned

  • Mastering Cloudflare R2 APIs for cost-effective, high-performance media delivery.
  • Building complex drag-and-drop uploaders purely in PHP/Livewire.
  • Implementing automated backup scheduling with programmatic retention policies.
  • Operationalizing SEO automation for instant content discoverability.