Canva clone with customizable templates and AI-powered features

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

canva-clone/
  |- drizzle/
  |- public/
    |-- bg.svg
    |-- car_sale.json
    |-- car_sale.png
    |-- coming_soon.json
    |-- coming_soon.png
    |-- flash_sale.json
    |-- flash_sale.png
    |-- logo.svg
    |-- travel.json
    |-- travel.png
  |- src/
    |-- app/
        |--- (auth)/
        |--- (dashboard)/
        |--- api/
            |---- api/[[...route]]/
            |---- auth/
            |---- uploadthing/
        |--- editor/[projectId]/
        |--- apple-icon.png
        |--- error.tsx
        |--- favicon.ico
        |--- globals.css
        |--- icon1.png
        |--- icon2.png
        |--- layout.tsx
        |--- not-found.tsx
    |-- components/
        |--- ui/
        |--- hint.tsx
        |--- modal-provider.tsx
        |--- providers.tsx
        |--- query-provider.tsx
    |-- config/
        |--- drizzle.ts
        |--- schema.ts
    |-- db/
        |--- index.ts
    |-- features/
        |--- ai/
        |--- auth/
        |--- editor/
        |--- images/
        |--- projects/
        |--- subscriptions/
    |-- hooks/
        |--- use-confirm.tsx
    |-- lib/
        |--- hono.ts
        |--- replicate.ts
        |--- stripe.ts
        |--- unsplash.ts
        |--- uploadthing.ts
        |--- utils.ts
    |-- auth.config.ts
    |-- auth.ts
    |-- middleware.ts
  |- .env.example
  |- .env.local
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc.json
  |- .prettierrc.mjs
  |- bun.lockb
  |- components.json
  |- drizzle.config.ts
  |- environment.d.ts
  |- next.config.mjs
  |- package.json
  |- postcss.config.js
  |- README.md
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# disable next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# app base url
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

# unsplash api access key
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=x-X-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# uploadthing token
UPLOADTHING_TOKEN='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

# replicate api token
REPLICATE_API_TOKEN=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Added by `npx auth`. Read more: https://cli.authjs.dev
AUTH_SECRET="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# github oauth id and secret
AUTH_GITHUB_ID=XXXXXXXXXXXXXXXX
AUTH_GITHUB_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

AUTH_GOOGLE_ID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="XXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# postgres neon db url
DATABASE_URL="postgresql://<username>:<password>@<hostname>:<port>/image-ai?sslmode=require"

# stripe secret key and price id and webhook secret
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_PRICE_ID=price_XXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

5. Disable Next.js Telemetry

This disables Next.js telemetry (optional).

• Variable: NEXT_TELEMETRY_DISABLED
• Value: 1 (default for disabling telemetry)

6. App Base URL

Set the base URL where your app will be running locally or in production.

7. Unsplash API Access Key

To get the Unsplash API Access Key, follow these steps:

• Go to Unsplash Developers.
• Log in with your Unsplash account.
• Create a new application under "Your Applications."
• Copy the Access Key from the application details.

8. UploadThing Token

To get the UploadThing token:

• Visit UploadThing and sign up.
• Create a new project which will generate an API token.
• Copy the token.

9. Replicate API Token

To get the Replicate API token:

• Sign up at Replicate.
• Go to your account settings and find the API section.
• Copy the API token.

10. Auth.js Secret

This is automatically generated by npx auth or bunx auth and used for session encryption. Keep this secret safe.

11. GitHub OAuth Client ID and Secret

To obtain GitHub OAuth credentials:

• Go to GitHub Developer Settings.
• Create a new OAuth app:
  • Homepage URL: Your app's base URL (e.g., http://localhost:3000).
  • Authorization callback URL: http://localhost:3000/api/auth/callback/github.
• After creation, you'll get Client ID and Client Secret.

12. Google OAuth Client ID and Secret

To obtain Google OAuth credentials:

• Visit the Google Cloud Console.
• Create a new project and configure OAuth consent screen with default settings.
• Create OAuth 2.0 credentials:
  • Authorized redirect URIs: http://localhost:3000/api/auth/callback/google.
• After creation, you'll receive a Client ID and Client Secret.

13. PostgreSQL Neon Database URL

To get the Neon PostgreSQL database URL:

• Sign up at Neon.
• Create a new database and retrieve the connection URL.
  • Replace <username>, <password>, <hostname>, <port> in the URL.
• Ensure SSL mode is enabled (sslmode=require).

14. Stripe API Keys

To get the Stripe API keys:

• Sign up at Stripe.
• Create a new account or use an existing one.
• Go to Developers → API keys to get your Secret Key.
• To create a Price ID, navigate to Products → Create a Product and set a price.
• For Webhook Secret, set up a webhook in Developers → Webhooks:
  • Endpoint: http://localhost:3000/api/subscriptions/webhook.

15. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps or bun install --legacy-peer-deps.

16. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev or bun dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Canva Clone.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @auth/core: ^0.37.0
• @auth/drizzle-adapter: ^1.7.0
• @hono/auth-js: ^1.0.11
• @hono/zod-validator: ^0.4.1
• @neondatabase/serverless: ^0.10.1
• @paralleldrive/cuid2: ^2.2.2
• @radix-ui/react-alert-dialog: ^1.1.2
• @radix-ui/react-avatar: ^1.1.1
• @radix-ui/react-dialog: ^1.1.2
• @radix-ui/react-dropdown-menu: ^2.1.2
• @radix-ui/react-label: ^2.1.0
• @radix-ui/react-scroll-area: ^1.2.0
• @radix-ui/react-separator: ^1.1.0
• @radix-ui/react-slider: ^1.2.1
• @radix-ui/react-slot: ^1.1.0
• @radix-ui/react-tooltip: ^1.1.3
• @radix-ui/react-visually-hidden: ^1.1.0
• @tanstack/react-query: ^5.59.13
• @uploadthing/react: ^7.0.3
• bcryptjs: ^2.4.3
• class-variance-authority: ^0.7.0
• clsx: ^2.1.1
• crypto: ^1.0.1
• date-fns: ^4.1.0
• drizzle-orm: ^0.35.1
• drizzle-zod: ^0.5.1
• fabric: 5.3.0-browser
• hono: ^4.6.4
• jsdom: ^25.0.1
• lodash.debounce: ^4.0.8
• lucide-react: ^0.447.0
• material-colors: ^1.2.6
• next: 14.2.14
• next-auth: ^5.0.0-beta.22
• next-themes: ^0.3.0
• react: ^18
• react-color: ^2.19.3
• react-dom: ^18
• react-icons: ^5.3.0
• react-use: ^17.5.1
• replicate: ^1.0.0
• sonner: ^1.5.0
• stripe: ^17.2.1
• tailwind-merge: ^2.5.3
• tailwindcss-animate: ^1.0.7
• unsplash-js: ^7.0.19
• uploadthing: ^7.1.0
• use-file-picker: ^2.1.2
• zod: ^3.23.8
• zustand: ^5.0.0
• @babel/eslint-parser: ^7.25.7
• @trivago/prettier-plugin-sort-imports: ^4.3.0
• @types/bcryptjs: ^2.4.6
• @types/fabric: 5.3.0
• @types/lodash.debounce: ^4.0.9
• @types/material-colors: ^1.2.3
• @types/node: ^20
• @types/react: ^18
• @types/react-color: ^3.0.12
• @types/react-dom: ^18
• dotenv: ^16.4.5
• drizzle-kit: ^0.26.2
• eslint: ^8
• eslint-config-next: 14.2.14
• eslint-config-prettier: ^9.1.0
• eslint-plugin-prettier: ^5.2.1
• pg: ^8.13.0
• postcss: ^8
• prettier-plugin-tailwindcss: ^0.6.8
• sort-classes: npm:prettier-plugin-tailwindcss
• tailwindcss: ^3.4.1
• tidy-imports: npm:@trivago/prettier-plugin-sort-imports
• typescript: ^5.6.2

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)