# 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](https://podman.io/getting-started/installation)
- [Podman Compose](https://github.com/containers/podman-compose)
- [pnpm](https://pnpm.io/installation)

## Usage Modes

### Standalone Application

#### Running with Podman

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

```bash
cp .env.example .env
```

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

3. Run the application in development mode:
```bash
# 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:
```bash
# 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:
```bash
pnpm install
```

2. Run the development server:
```bash
pnpm dev
```

3. Build for production:
```bash
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:
```bash
npm install @canva-connector/frontend
```

2. Use in your Vue application:
```javascript
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:

```vue
<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:
```bash
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.