Profile
Back to NewsBack
GitHub Trending 6 min
Reader Mode
sanidhyy/canva-clone: Canva clone with customizable templates and AI-powered features for effortless visual creation.

sanidhyy/canva-clone: Canva clone with customizable templates and AI-powered features for effortless visual creation.

3 hours ago
GitHub Trending

Canva clone with customizable templates and AI-powered features

!Canva clone with customizable templates and AI-powered features

Ask Me Anything!</a> GitHub license</a> Maintenance</a> GitHub branches</a> Github commits</a> GitHub issues</a> GitHub pull requests</a> Vercel status</a>

:notebook_with_decorative_cover: Table of Contents

:bangbang: Folder Structure

Here is the folder structure of this app.

canva-clone/
  |- drizzle/
    |-- meta/
    |-- 0000_busy_scourge.sql
    |-- 0001_cultured_beast.sql
    |-- 0002_glossy_cloak.sql
    |-- 0003_clumsy_chat.sql
  |- public/
  |- src/
    |-- app/
      |--- (auth)/
      |--- (dashboard)/
      |--- api/
      |--- editor/
      |--- 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/
      |--- index.ts
    |-- db/
      |--- drizzle.ts
      |--- schema.ts
    |-- features/
      |--- ai/
      |--- auth/
      |--- editor/
      |--- images/
      |--- projects/
      |--- settings/
      |--- subscriptions/
    |-- hooks/
      |--- use-confirm.tsx
      |--- use-is-client.ts
    |-- lib/
      |--- encryption.ts
      |--- hono.ts
      |--- openai.ts
      |--- stripe.ts
      |--- unsplash.ts
      |--- uploadthing.ts
      |--- user-api-keys.ts
      |--- utils.ts
    |-- auth.config.ts
    |-- auth.ts
    |-- proxy.ts
  |- .env.example
  |- .env/.env.local
  |- .gitignore
  |- .prettierignore
  |- .prettierrc.json
  |- .prettierrc.mjs
  |- components.json
  |- drizzle.config.ts
  |- environment.d.ts
  |- eslint.config.mjs
  |- next.config.ts
  |- package.json
  |- pnpm-lock.yaml
  |- pnpm-workspace.yaml
  |- postcss.config.mjs
  |- tsconfig.json
  |- vercel.ts


:toolbox: 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

UNSPLASH_ACCESS_KEY=x-X-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

uploadthing token

UPLOADTHING_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

encrypted AI settings cookie (openssl rand -hex 32)

AI_SETTINGS_COOKIE_NAME="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
VERIFICATION_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

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. AI Settings Cookie Secrets

Generate both values with:

openssl rand -hex 32
  • AI_SETTINGS_COOKIE_NAME: Cookie name used to store encrypted API keys.
  • VERIFICATION_SECRET: Secret used to encrypt/decrypt the cookie payload. Keep this secret safe.

10. Auth.js Secret

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

11. GitHub OAuth Client ID and Secret

To obtain GitHub OAuth credentials:

- 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 , , , 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.
  1. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps or pnpm install --legacy-peer-deps.
  1. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev or pnpm dev.
NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

:raising_hand: Need Help?

If you run into issues during installation or setup:

:camera: Screenshots

!Modern UI/UX

!Fully functional Fabric.js editor

!Multi Template Feature

!Unsplash Images and Custom Upload Support

:gear: Tech Stack

React JS</a> Next JS</a> Typescript</a> PostgreSQL</a> Tailwind CSS</a> Vercel</a>

:wrench: Stats

Stats for Canva Clone</a>

:raised_hands: 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.

:gem: Acknowledgements

Useful resources and dependencies that are used in Canva Clone.

  • Thanks to CodeWithAntonio: https://codewithantonio.com/

:coffee: Buy Me a Coffee

:rocket: Follow Me

Follow Me</a> Tweet about this project</a>

:books: Learn More

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

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

:page_with_curl: 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.

:star: Give A Star

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

:star2: Star History

Star History Chart


(back to top)

You finished the article!

Want to go deeper or explore more stories?

Full Article on GitHub Trending More Tech News
Reading Mode

Adjust typography and theme to your preference.

View Original
Related Stories
I asked for a brutal enterprise stress-test of my AI. The audit came back, and I realized the craziest plot twist of launch day.
Dev.to 23 hours ago
launch day, hour 6: flagged by hacker news, locked out by google, called a scammer by a stranger — and the moment HYNAWEB stopped being a hobby.
Dev.to 1 day ago
Which inference provider has both serverless and dedicated GPU tiers on the same platform with one API?
Dev.to 1 day ago
Vesting schedule: how 9,375 NVIDIA stock options became a $1B claim
Dev.to 1 day ago
Getting the downloads was the easy part. Retention is the real game.
Dev.to 2 days ago
Related Stories

I asked for a brutal enterprise stress-test of my AI. The audit came b...

Dev.to 23 hours ago

launch day, hour 6: flagged by hacker news, locked out by google, call...

Dev.to 1 day ago

Which inference provider has both serverless and dedicated GPU tiers o...

Dev.to 1 day ago

Vesting schedule: how 9,375 NVIDIA stock options became a $1B claim

Dev.to 1 day ago

Getting the downloads was the easy part. Retention is the real game.

Dev.to 2 days ago
Chat with me