$ show Davronov-Alimardon/canva-clone
This repository implements a full-featured graphic design SaaS application, a clone of Canva. It is built with Next.js 14 (App Router), React 18, TypeScript, Tailwind CSS, and uses Fabric.js 5.3.0 for the canvas editor. The application allows users to create visual projects (designs) with layers including shapes, text, images, drawings, and AI-generated content. It supports background removal, image filters, color manipulation, and font adjustments. Authentication is handled via NextAuth v5 with credentials, GitHub, and Google OAuth, integrated with a PostgreSQL database through Drizzle ORM. Subscriptions (Free/Pro tiers) are managed via Stripe, limiting certain features like unlimited projects and AI capabilities. The dashboard lists user projects and templates, while the editor provides a rich toolbar, collapsible sidebars, and keyboard shortcuts. External dependencies include Unsplash for stock images, UploadThing for user file uploads, Replicate for AI inference (image generation, background removal), and Stripe for payments. The architecture follows a feature-based module structure with dedicated folders for auth, editor, projects, subscriptions, AI, and images. Server API routes are built using Hono.js mounted under a catch-all route, and client-side data fetching uses TanStack Query. State management for modals and UI is handled by Zustand. The codebase is well-organized for a production-grade tutorial project but lacks automated tests and contains some type safety shortcuts.
The LLM identified 3 files worth highlighting for reuse:
Provides undo and redo functionality for the Fabric.js canvas by maintaining a history of canvas states. The hook exposes methods to capture the current state, undo, redo, and clear history. It is self-contained and can be extracted to manage undo/redo for any serializable state in a React application.
Implements copy and paste operations for Fabric.js objects. It stores a reference to the selected object and provides `copy` and `paste` functions that work with the canvas. The pattern is reusable for any copy/paste mechanism where the clipboard holds a serializable object.
A React hook that creates a confirmation dialog as a promise. It returns an array containing a `Component` to render and a `confirm` function that resolves to a boolean. The dialog content and title are customizable. This pattern is reusable in any React project for async confirmation modals.