IT-Challenge: Card Designer

The Card Designer is an IT-Challenge project for Femke Reuvers, a shop specialized in making personalized presents.

Features

The designer allows users to:

• Add shapes, text
• Upload their own images through a mobile QR code or use preset "stickers"
• Apply colors to objects
• Align objects
• Design multiple sides of the card
• Export the result as a PDF

Dependencies

The designer depends on:

• Fabric.js (high-level canvas usage)
• QRCode.js (generating QR-codes at runtime)
• jsPDF (exporting card as PDF)
• alwan (customizable color picker)
• jQuery (AJAX requests & PDF upload)

Code Structure

📂 editor

• index.php Editor front-end
• canvas.js Canvas setup & options
• pages.js Card pages & previews
• tools.js Tools (e.g. shapes, text, images, etc.)
• 📂 utils PHP helper functions

📂 upload

• upload.php Mobile upload front-end
• on_submit.php Server-side file upload handling