Custom Print Product Builder

A production-ready graphic design platform featuring an intuitive drag-and-drop editor for creating personalized print products. Built with Next.js 14 and the Fabric.js canvas engine, it delivers a professional design experience directly in the browser.

---

Table of Contents

• Overview
• Tech Stack
• Key Features
• Getting Started
• Environment Variables
• Project Structure
• Authentication
• Image Management
• Database & Backend
• Deployment
• License

---

Overview

Custom Print Product Builder is a full-featured web application that empowers users to design and personalize print products — from t-shirts and mugs to posters and business cards — using a powerful browser-based editor. The platform combines a real-time collaborative backend with professional-grade design tools, making it suitable for both individual creators and print-on-demand businesses.

---

Tech Stack

Technology	Role
Next.js 14	React framework — App Router, SSR, API routes
React.js	Component-driven UI architecture
Fabric.js	HTML5 canvas engine powering the design editor
Convex	Serverless real-time database and backend functions
ImageKit.io	Image optimization, CDN delivery, and AI transformations
Tailwind CSS	Utility-first CSS framework for responsive styling
Stack Auth	Multi-provider authentication (Google, GitHub, Email)
Unsplash API	High-quality stock photo library integration

---

Key Features

Design Editor

• Drag-and-drop canvas powered by Fabric.js
• Templates — start from pre-built print-ready layouts
• Text tools — rich typography controls, fonts, sizes, colors, and spacing
• Shape library — rectangles, circles, polygons, custom paths, and more
• Freehand drawing — pen and brush tools with pressure sensitivity support
• Layer management — reorder, lock, hide, group, and ungroup objects
• Image upload — direct uploads with real-time optimization via ImageKit
• Stock photos — search and embed Unsplash images without leaving the editor
• Undo / Redo — full history stack for confident editing

Product Management

• Create and manage multiple print product types
• Set print-area boundaries and bleed zones per product
• Preview designs in product mockups before exporting
• Export designs as high-resolution PNG or print-ready PDF

Authentication & Accounts

• Google OAuth — one-click sign-in
• GitHub OAuth — developer-friendly login
• Email & Password — traditional account registration with verification
• Session management and protected routes out of the box

Real-time Backend

• Serverless functions via Convex for instant data sync
• User project persistence — save, load, and duplicate designs
• Asset library per user — manage uploaded images across projects

---

Getting Started

Prerequisites

• Node.js >= 18.x
• Bun (recommended) or npm / yarn
• A Convex account
• An ImageKit account
• A Stack Auth project
• An Unsplash developer account

Installation

# Clone the repository
git clone https://github.com/Empty-Developer/Custom-Print-Product-Builder-Web-App.git
cd custom-print-builder

# Install dependencies
bun install

# Start the Convex development server (in a separate terminal)
bunx convex dev

# Start the Next.js development server
bun dev

Open http://localhost:3000 to view the application.

---

Environment Variables

Create a .env.local file in the project root and populate it with the values below. Never commit this file to version control.

# Convex
CONVEX_DEPLOYMENT=your_convex_deployment_slug
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
NEXT_PUBLIC_CONVEX_SITE_URL=https://your-deployment.convex.site

# ImageKit
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_id
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key

# Unsplash
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=your_unsplash_access_key

# Stack Auth
NEXT_PUBLIC_STACK_PROJECT_ID=your_stack_project_id
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=your_stack_publishable_key
STACK_SECRET_SERVER_KEY=your_stack_secret_key

Where to find these values

Variable	Source
CONVEX_DEPLOYMENT	Convex dashboard → Settings → URL & Deploy Key
NEXT_PUBLIC_CONVEX_URL	Convex dashboard → your deployment URL
IMAGEKIT_*	ImageKit dashboard → Developer options
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY	Unsplash Developers → Your application
STACK_*	Stack Auth dashboard → your project → API Keys

---

Project Structure

├── app/                    # Next.js App Router pages and layouts
│   ├── (auth)/             # Authentication pages (sign-in, sign-up)
│   ├── (dashboard)/        # Protected user dashboard
│   └── editor/             # Design editor route
├── components/             # Reusable React components
│   ├── editor/             # Canvas, toolbar, panels, layer list
│   └── ui/                 # Shared UI primitives
├── convex/                 # Convex backend functions and schema
│   ├── schema.ts           # Database schema definition
│   └── functions/          # Queries, mutations, and actions
├── lib/                    # Utility functions and helpers
├── public/                 # Static assets
└── types/                  # Shared TypeScript type definitions

---

Authentication

Authentication is handled by Stack Auth, supporting:

• Google — OAuth 2.0
• GitHub — OAuth 2.0
• Email / Password — with email verification

Stack Auth issues session tokens that are forwarded to Convex for server-side identity verification on all protected backend functions.

---

Image Management

All user-uploaded and generated images are stored and served through ImageKit.io, providing:

• Automatic format conversion (WebP, AVIF)
• On-the-fly resizing and cropping
• AI-powered background removal and enhancement
• Global CDN delivery for low-latency access worldwide

Uploads are authenticated server-side using the IMAGEKIT_PRIVATE_KEY to generate signed URLs before the client initiates a transfer.

---

Database & Backend

The backend runs entirely on Convex — no separate server is required:

• Schema is defined in convex/schema.ts using Convex's typed schema builder
• Queries provide real-time subscriptions for live data updates in the editor
• Mutations handle all write operations (save project, upload asset, etc.)
• Actions are used for side-effects such as image processing and third-party API calls

To push schema changes during development:

bunx convex dev

---

Deployment

Vercel (recommended)

# Install Vercel CLI
bun add -g vercel

# Deploy
vercel

Set all environment variables in the Vercel project dashboard under Settings → Environment Variables.

Other platforms

The application is a standard Next.js project and can be deployed to any platform that supports Node.js 18+ (Railway, Render, AWS Amplify, etc.). Ensure the Convex deployment is also set to production mode via npx convex deploy.

---

License

This project is licensed under the PolyForm Noncommercial License 1.0.0.