web-hosts/chuckie.coppertone.tech/app

Canva Connector

A Vue 3 application that connects to the Canva API, allowing users to create, manage, and organize their Canva designs from a centralized dashboard. This project can be used both as a standalone application and as an installable Vue component.

Features

• Connect to Canva using OAuth authentication
• View and manage all your Canva designs
• Create new designs directly from the application
• Duplicate and organize existing designs
• Responsive UI built with Tailwind CSS

Tech Stack

• Vue 3 with Composition API
• Pinia for state management
• Vue Router for navigation
• Tailwind CSS for styling
• Canva API integration
• Containerized with Podman

Project Structure

Canva-Connector/
├── frontend/               # Frontend source code and configuration
│   ├── src/                # Vue components, views, stores, etc.
│   ├── index.html          # Application HTML template
│   ├── vite.config.js      # Vite configuration for standalone app
│   ├── vite.lib.config.js  # Vite configuration for library build
│   └── package.json        # Frontend dependencies and scripts
├── Dockerfile              # Production Dockerfile for standalone app
├── Dockerfile.dev          # Development Dockerfile
├── podman-compose.yml      # Production podman-compose configuration
├── podman-compose.dev.yml  # Development podman-compose configuration
└── package.json            # Root package configuration

Prerequisites

• Podman
• Podman Compose
• pnpm

Usage Modes

Standalone Application

Running with Podman

1. Copy the .env.example file to .env and add your Canva API credentials:

cp .env.example .env

2. Update the .env file with your actual Canva API credentials

3. Run the application in development mode:

# Build and run the development container
podman-compose -f podman-compose.dev.yml up --build

The application will be available at http://localhost:3000

4. Or run in production mode:

# Build and run the production container
podman-compose up --build

The application will be available at http://localhost:8080

Running without containers

1. Install dependencies:

pnpm install

2. Run the development server:

pnpm dev

3. Build for production:

pnpm build

As an Installable Vue Module

This project can also be used as an installable Vue module in other projects.

1. Install the module:

npm install @canva-connector/frontend

2. Use in your Vue application:

import { createApp } from 'vue'
import { CanvaConnectorPlugin } from '@canva-connector/frontend'

const app = createApp(App)

// Install the plugin
app.use(CanvaConnectorPlugin)

app.mount('#app')

Then use the component in your templates:

<template>
  <CanvaConnector />
</template>

Canva API Integration

The application integrates with the Canva API using the Canva Design SDK. To use this application:

1. Register for a Canva developer account
2. Create a new app in the Canva Developer Portal
3. Add your app's domain to the allowed domains list
4. Use the Client ID and Client Secret in your environment variables

Environment Variables

• VITE_CANVA_CLIENT_ID: Your Canva app's client ID
• VITE_CANVA_CLIENT_SECRET: Your Canva app's client secret

Development

For development of the component library:

cd frontend
pnpm build-lib  # Creates a distributable library version

Troubleshooting

If you encounter issues with the Canva SDK not loading, ensure that:

1. You've included the Canva SDK script in your HTML
2. Your domain is added to the allowed domains in the Canva Developer Portal
3. Your Client ID is correctly configured

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License.