Project Overview
The Canva Smart Image Upload Kit streamlines image processing for Amazon keychain orders by automating data retrieval, image cropping, and grid rendering. It integrates with the Amazon SP-API, filters orders by ASIN, and leverages the Canva UI Kit to deliver visually consistent grid templates, reducing manual effort and ensuring accuracy.
Key Challenges
- Manual processing of keychain order images
- Ensuring precise cropping based on buyer placement and mask data
- Handling high-volume order retrieval and filtering
- Managing storage for large image assets
- Maintaining Amazon API compliance and security
- Rendering scalable grids for multiple layout types
Our Solutions
- Automated fetching of orders via Amazon SP-API
- Accurate image cropping using intersection and mask calculations
- ASIN-based filtering to target keychain orders
- Automatic folder cleanup after 48 hours to manage storage
- Secure access using Regulated Data Tokens
- Dynamic grid generation leveraging Canva UI Kit templates
Key Differentiators & Client Value
Zero-Touch Image Processing
Fully automated workflow from order fetching to grid generation.
Precise Image Cropping
Accurate rendering with buyer placement and mask data.
Scalable Operations
Handles high-volume keychain orders efficiently.
Amazon Compliance
Secure and compliant API interactions with Amazon SP-API.
Customizable Grids
Flexible layouts for diverse business needs.
Efficient Asset Management
Organized storage with automated cleanup.
Project Details
Technologies Used
Project Stats
Core Functionality & Intelligence
1. Automated Order Fetching
Seamlessly retrieves keychain orders from Amazon SP-API with intelligent filtering and secure access:
- Scheduled hourly order fetching via cron jobs
- ASIN-based filtering specifically for keychain orders
- Secure data access using Regulated Data Tokens
- API rate-limiting to ensure compliance and prevent throttling
Guarantees accurate, timely, and compliant order data retrieval.
2. Dynamic Grid Rendering
Grid Generation
- • Renders images on a 1200x800px canvas for high-resolution output
- • Configurable spacing, margins, and image heights for flexible layouts
- • Supports multi-page layouts with automatic page-break handling
User Interaction
- • Preview and adjust grid layouts before final rendering
- • Automatic download of generated templates for efficiency
Canva UI Kit Integration
- • Ensures consistent, professional, and branded grid rendering
- • Supports custom layout configurations for different order types
3. Image Processing Pipeline
Intersection Calculations
- • Calculates precise cropping coordinates for keychain images
- • Accounts for buyer placement and mask data to maintain accuracy
Image Cropping & Validation
- • Utilizes Sharp for efficient cropping, rotation, and resizing
- • Validates image dimensions to prevent processing errors
Scalable Backend Processing
- • Offloads heavy processing to backend services for performance
- • Supports high-volume image handling for large Amazon orders
4. Asset Management & Storage
Structured Storage
- • Organizes assets in /public/orderDate/ directories
- • Extracts ZIP files containing images and JSON metadata
Automated Cleanup
- • Automatically deletes folders older than 48 hours
- • Optimizes disk space usage for efficient storage
Logging & Monitoring
- • Maintains detailed logs for asset extraction and processing
- • Tracks errors and system events for debugging and audits
Critical System Components
1. Amazon Fetcher
Order Retrieval
Automatically fetches keychain orders from Amazon SP-API on an hourly schedule.
Secure Data Access
Ensures compliance using Regulated Data Tokens for secure API access.
ASIN-Based Filtering
Filters and prioritizes orders by specific ASINs for accuracy and relevance.
2. Image Processing Core
Intersection Calculations
Computes precise cropping coordinates and rotation points for accurate image placement.
Image Cropping
Utilizes Sharp for fast and efficient cropping, rotation, and validation of image dimensions.
Scalable Rendering
Offloads processing to the backend to handle high-volume image workflows seamlessly.
3. Grid Rendering & Frontend
Dynamic Grid Generation
Renders images in responsive, customizable grid layouts leveraging the Canva UI Kit for consistent visual structure.
Interactive Preview & Adjustment
Allows users to preview grids, adjust layouts, and automatically download finalized templates.
React-Powered UI
Built with React for a smooth, responsive, and intuitive user experience.
Technology Stack
Built with modern technologies for scalability, performance, and seamless image automation.