Building an Embeddable DIY Diamond Mosaic PDF Generator
Created a web app that transforms photos into diamond art patterns using client-side processing, eliminating server costs while enhancing UX
"We're developing personalized diamond painting kits and need software that transforms photos into instructions."
This request came from a craft company specializing in DIY art kits.
The goal was specific: transform any user photo into a pattern recreatable with exactly six shades of diamond beads on a physical canvas.
Customers buy a kit, upload a photo, and receive step-by-step instructions to create a personalized art piece.
Validating with AI Prototyping
Before committing to a full build, we validated the core concept using AI assistance to build our first prototype.
Within a few hours, we had a working prototype that could process images and output a diamond art pattern using five grayscale colors.
This rapid prototyping confirmed technical feasibility and gave the client something tangible to evaluate immediately.
Building the Full Web Application
With the core algorithm proven, we started developing a complete web application. Requirements included:
No login required
Cross-device compatibility
Downloadable PDF instructions
We built it with React for the frontend and deployed it on Firebase.
The Evolution of Our Approach
The initial version included more server-side features:
Server-generated PDFs for higher quality
Email delivery system for instruction manuals
Storage of processed images for user history
Database for tracking user interactions
This approach offered benefits for user convenience but added complexity:
Server-side processing created costs that would scale with usage
Required database setup and maintenance
Introduced potential privacy concerns with stored images
Added authentication requirements to access saved files
We had working code for these features, but our development discussions led us to question whether they were truly necessary. The decision: making everything work client-side only.
This architectural choice solved several problems at once:
Zero server costs
No privacy concerns with user photos
No authentication needed
Instant processing without upload delays
Overcoming Performance Challenges
As development progressed, performance issues emerged:
“The PDF generation was freezing the UI on mobile devices”
The problem: we were asking the main thread to do too much work. We fixed it by implementing Web Workers to handle PDF generation in the background, making the application responsive even on older phones.
For the cropping interface, we took a different approach:
"Users move and scale their photo within a fixed frame, like they're used to doing in their phone gallery."
This intuitive interaction improved the user experience significantly.
Technical Components
The final solution combined:
Interactive Image Manipulation: supports touch/mouse/wheel controls and multiple canvas layers.
Custom Image Processing: converts grayscale with six-shade quantization, transforming a picture to a 117×165 pixel grid.
PDF Generation: background processing with Web Workers, section-by-section guides, color-coded placement instructions.
Responsive UI: drag-and-drop uploads, progress indicators, and helpful tips.
The Impact
The final product achieved all goals while requiring no ongoing backend maintenance:
Photo transformation in seconds
Precise placement instructions
Cross-device compatibility
Minimal hosting costs
Key Insights
Prototype First: AI-assisted prototyping validated core functionality quickly.
Question Requirements: Challenging the original access code requirement created a better user experience.
Process Locally When Possible: Client-side processing eliminated costs and complexity.
Use Web Workers for Heavy Lifting: Keeping intensive operations off the main thread maintained responsiveness.
Think Mobile-First: Addressing mobile performance early prevented larger problems later.
This project demonstrates how thoughtful architecture can create excellent user experiences while minimizing infrastructure costs — benefiting both users and business owners.