🎨 Canva Clone - Full-Featured Graphic Design SaaS Platform

A production-ready graphic design SaaS platform with an intuitive drag-and-drop editor, AI-powered features, and complete subscription management. Built with Next.js 14, Fabric.js canvas engine, Replicate AI, and Stripe payments.

---

🚀 Quick Start

New to this project? Follow our step-by-step setup guide:

📖 Complete Setup Documentation

Start here: 00-PREREQUISITES.md

Estimated setup time: ~90 minutes

---

✨ Key Features

• 🎨 Professional Design Editor - Templates, text, shapes, drawing tools, and layers
• 🤖 AI-Powered Tools - Image generation and background removal
• 🔐 Multi-Auth - Google, GitHub, and Email/Password
• 💳 Stripe Subscriptions - Complete payment management
• 📤 Export Options - PNG, JPG, SVG, JSON
• 📱 Fully Responsive - Works on all devices
• 🔍 Project Management - Create and organize multiple projects
• 🎯 Unsplash Integration - Millions of free stock photos

---

🛠️ Tech Stack

Frontend: Next.js 14, React 18, TypeScript, TailwindCSS, Shadcn UI, Fabric.js
Backend: Hono.js, Drizzle ORM, Neon PostgreSQL, Auth.js
AI & Media: Replicate AI, Unsplash, UploadThing
Payments: Stripe
State: Zustand, TanStack Query

---

📋 Prerequisites

Before starting, you need:

• Node.js (v18+) or Bun
• Git
• Free accounts for: Neon, UploadThing, Replicate, Unsplash, Stripe, Google, GitHub

👉 See Prerequisites Guide for details

---

🎯 Setup Guide

Follow these guides in order:

1. Prerequisites - What you need (2 min)
2. Installation - Clone and install (5 min)
3. Database Setup - Neon PostgreSQL (10 min)
4. Unsplash API - Stock photos (5 min)
5. UploadThing API - File uploads (5 min)
6. Replicate API - AI features (10 min)
7. Stripe Setup - Payments (20 min)
8. Templates Setup - Design templates (15 min)
9. GitHub OAuth - GitHub login (5 min)
10. Google OAuth - Google login (10 min)
11. Deployment - Deploy to Vercel (15 min)

Need help? Check Troubleshooting Guide

---

📦 Quick Commands

# Install dependencies
bun install

# Setup database
bun run db:generate
bun run db:migrate

# Start development
bun dev

# Open database GUI
bun run db:studio

Full command reference: See Installation Guide

---

🔧 Environment Variables

Create a .env file with these variables:

DATABASE_URL=
AUTH_SECRET=
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
UPLOADTHING_TOKEN=
REPLICATE_API_TOKEN=
STRIPE_SECRET_KEY=
STRIPE_PRICE_ID=
STRIPE_WEBHOOK_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Detailed guide: Environment Variables Reference

---

💎 Pro Features

Unlock with subscription:

• ✨ Unlimited projects
• 🎨 Premium templates
• 🤖 Unlimited AI generations
• 📤 High-resolution exports
• 💾 Priority support

---

📚 Documentation

• Setup Guides - Complete step-by-step setup
• Troubleshooting - Common issues and solutions
• Environment Variables - All variables explained

---

🎓 Learn More

• Next.js Documentation
• Drizzle ORM Documentation
• Auth.js Documentation
• Fabric.js Documentation
• Stripe Documentation
• Replicate Documentation

---

🙏 Credits

Course: YouTube/Original Tutorial (18-hour course)
Creator: Code With Antonio
Deployment: Vercel
UI Components: Shadcn

---

📝 License

This project is based on the tutorial by Antonio Erdeljac.

---

⭐ Support

If you found this project helpful, please give it a star!

Need help?

• Check Documentation
• Review Troubleshooting
• Create an issue on GitHub

---

Ready to start? → Begin with Prerequisites Guide 🚀