Citraartframe.com — Project Overview & Technical Documentation

Citraartframe.com is a specialized web platform and custom framing visualizer built with Laravel, Blade, and Vue.js. It bridges interactive customer visualization with backend operational management—enabling customers to upload custom images and preview them inside physical frames while offering site administrators complete control over content, security, and system performance.

Executive Summary

Attribute	Details
Project Name	Citraartframe.com
Primary Core	Full-Stack Web Application / E-Commerce Showcase
Architecture	Hybrid Monolith (Laravel Blade for Public Web + Vue.js SPA for Admin Panel)
Key Differentiator	Interactive Photo-to-Frame Visualizer & Mockup Generator
Security & Optimization	DB-stored Caching System & API / Admin Rate Limiting

Descriptions

1. Short Description

Citraartframe.com is a web platform for custom art framing and visual showcases. Built with Laravel & Blade for the core site and an interactive Vue.js admin panel, the platform features a real-time photo-to-frame matching tool that allows users to upload custom images and preview them inside frames before ordering. It includes a complete CMS with a WYSIWYG article editor, secure role authentication, database-driven caching, and rate limiting for optimal security and site performance.

2. Complete Technical Description

Overview

Citraartframe.com was designed to solve a core problem in the custom framing industry: enabling customers to visualize how their personal photos look inside specific frames before buying. The platform features a high-performance public frontend for customer interaction, paired with an administrative dashboard designed as a Single-Page Application (SPA) for content management and site management.

Architecture & Tech Stack

                     ┌──────────────────────────────────────────┐
                     │            CITRAARTFRAME.COM             │
                     └────────────────────┬─────────────────────┘
                                          │
                  ┌───────────────────────┴───────────────────────┐
                  ▼                                               ▼
     ┌──────────────────────────┐                   ┌──────────────────────────┐
     │     Public Frontend      │                   │     Admin Dashboard      │
     │  (Laravel Blade Engine)  │                   │      (Vue.js SPA)        │
     └────────────┬─────────────┘                   └────────────┬─────────────┘
                  │                                               │
                  ├───────────────────────┬───────────────────────┤
                  ▼                       ▼                       ▼
      ┌───────────────────────┐ ┌───────────────────┐ ┌──────────────────────┐
      │ Interactive Visualizer│ │ WYSIWYG CMS       │ │ Auth & Security      │
      │ (Photo-to-Frame Engine)│ │ (Article Management)│ │ (Rate Limiter / Auth)│
      └───────────────────────┘ └───────────────────┘ └──────────────────────┘
                  │                       │                       │
                  └───────────────────────┼───────────────────────┘
                                          ▼
                            ┌──────────────────────────┐
                            │    Laravel Backend API   │
                            │   & DB-Stored Caching    │
                            └──────────────────────────┘

Tech Stack Breakdown

Core Backend Framework: PHP / Laravel
Public Frontend: Laravel Blade, HTML5, CSS3, JavaScript
Admin Panel Frontend: Vue.js (Single Page Application architecture)
Visualizer Tool: Dynamic JavaScript canvas rendering / image manipulation
Database & Caching Layer: Relational DB with database-driven caching driver (CACHE_STORE=database)
Security Middleware: Custom/Laravel Throttle Requests (Rate Limiting) & Authentication Guard System

Feature Deep-Dive

1. Interactive Photo-to-Frame Visualizer (Core Edge Case Handling)

Custom File Upload & Canvas Rendering: Users can upload custom personal images directly into the browser workspace.
Aspect Ratio & Frame Fitting: Handles complex edge cases including mismatched aspect ratios, varying border margins, mats/pass-partout options, and orientation switches (portrait vs. landscape).
Live Dynamic Preview: Renders an accurate visual representation of the final artwork fitted into physical frame profiles in real time.

2. Admin Dashboard & Content Management System (CMS)

Vue.js SPA Interface: Provides a desktop-like experience for administrators managing products, inquiries, and content without full-page reloads.
WYSIWYG Article Editor: Integrated rich-text editor enabling administrators to write, format, and publish articles, news, and promotional guides seamlessly.
Authentication & Authorization System: Built-in authentication layer securing admin routes, API endpoints, and sensitive settings.

3. Performance & Security Engineering

Database-Stored Caching: Leverages database-backed query and view caching to reduce database read overhead, optimize server responsiveness, and handle traffic spikes reliably.
Rate Limiting Engine: Enforces strict request throttling across admin authentication endpoints and sensitive API routes to defend against brute-force attacks and abuse.

Key Use Cases & Capabilities

Customer Frame Previewing: Eliminates purchasing ambiguity by visualizing photos inside real frame dimensions before making a purchase.
Content Marketing Management: Non-technical team members can draft and edit content effortlessly using the WYSIWYG editor.
Protected Infrastructure: Admin features and backend routes remain guarded against unauthorized access and automated spam queries.

./Citra ArtFrame

// overview