158 lines
4.0 KiB
Markdown
158 lines
4.0 KiB
Markdown
# 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. |