TravelCanvas
A personalized travel-poster studio with a real-time canvas editor, automatic photo location detection, and Shopify checkout.
Case study by Talha Amir · AI Agent & Full-Stack Engineer
Discuss a similar project →- TravelCanvas · travelcanvas.nl
- Full-Stack Engineer
- 3 Months
Overview
TravelCanvas is an e-commerce SaaS product enabling customers to transform vacation photos into minimalist wall art. Developed a custom online design canvas that extracts location data from photo EXIF metadata, renders high-resolution map routes, and syncs design state in real time via Convex before seamlessly handing off to Shopify for fulfillment.
The Problem
Generic photo printing services offer clumsy, rigid templates that require manual captioning and coordinates. Customers wanted custom poster art with clean vector routes and accurate locations without needing graphic design skills or desktop software.
- ▸Manual entry of travel coordinates and itineraries was tedious and error-prone.
- ▸Off-the-shelf design tools failed to accurately reflect physical print ratios and dpi.
- ▸Integrating a bespoke, high-performance editor with standard e-commerce fulfillment was challenging.
The Solution
Built a responsive, real-time web editor in React and TypeScript. When users upload vacation snapshots, the client reads EXIF geolocation data to pinpoint destinations automatically on an interactive map. Live print previews match physical dimensions up to 50×70 cm, with state saved instantly to Convex and exported for Shopify checkout.
- ✓Automated photo metadata extraction for instant route plotting.
- ✓Sub-millisecond canvas updates backed by Convex real-time persistence.
- ✓High-precision vector poster renderer ensuring print-ready resolution.
- ✓Direct checkout integration with Shopify API for automated print fulfillment.
Architecture
Real-time reactive editor connected to cloud persistence and headless e-commerce checkout.
Client Canvas Engine
React canvas renderer with client-side EXIF parser, dynamic typography scaling, and real-time colorway switching.
Reactive State Backend
Convex real-time database managing user poster drafts, route waypoints, and image references with instant sync.
Print Rendering Pipeline
Vector map generation and print-dimension export matching 300 DPI physical print specs up to 50×70 cm.
Commerce Handshake
Shopify Storefront API generating cart line items with serialized poster configurations and cloud print assets.
Key Features
EXIF Location Detection
Extracts GPS latitude/longitude from uploaded smartphone photos to auto-populate city names and map pins.
Interactive Route Builder
Allows travelers to drag, reorder, and style road trips or multi-destination flight paths across stylized maps.
True-to-Print Live Preview
Renders accurate frame mockups and typography in real time matching A4 to 50×70 cm physical dimensions.
Frictionless Cart Integration
Transfers customized print assets and selected frame variants into Shopify checkout with single-click handoff.
Technology Stack
Lead Full-Stack Web Engineer
Architected and built the entire interactive canvas application, real-time Convex integration, and Shopify checkout pipeline.
- ▪Developed the custom React editor and photo EXIF metadata extraction pipeline.
- ▪Engineered reactive data persistence with Convex for instant auto-saving of drafts.
- ▪Integrated vector map styling and high-resolution print export capabilities.
- ▪Connected custom editor state to Shopify cart and checkout webhooks.
Product UI
Technical Challenges
Browser EXIF Handling Across Formats
Challenge: Mobile photos from iOS (HEIC) and Android (stripped EXIF on web shares) frequently lacked standard JPEG metadata headers.
Solution: Built a client-side conversion and parsing pipeline that safely normalizes image payloads and provides an intuitive manual city fallback when GPS data is stripped.
Print Accuracy vs Browser Performance
Challenge: Rendering 300 DPI print-ready posters in the DOM was memory-intensive and degraded mobile editor responsiveness.
Solution: Employed a dual-canvas model: lightweight vector rendering for the 60fps UI preview, with high-resolution vector and raster generation executed on export.
Outcome
Over 10,000 posters have been designed and shipped through the platform with an average 4.5-star rating and a 1–2 day automated fulfillment pipeline.
- ✓Shipped a sub-second reactive canvas editor without reliance on third-party design tools.
- ✓Automated the production handoff from browser canvas to commercial print house.
- ✓Scaled smoothly to handle high holiday traffic spikes without backend degradation.
- 10,000+
- Posters created
- Realtime
- Convex persistence
- 1–2 Days
- Automated fulfillment
