Digicard

Digicard is a lightweight, self‑hosted web application designed for rapid creation of simple graphic compositions. Written primarily in Vue.js (≈73 % of the front‑end code) with complementary CSS and a modest amount of vanilla JavaScript, it follows a classic single‑page application (SPA) architecture. The entire runtime is delivered from the dist folder, making it trivial to host on any static web server or reverse‑proxy. The application is released under the GNU AGPL v3, ensuring that any derivative work remains open source.

Key Features

• Canvas‑based drawing: Users can drag and drop shapes, text blocks, images, and apply basic transformations (scale, rotate, flip). The drawing surface is powered by the HTML5 <canvas> element and a lightweight wrapper library.
• Export pipeline: Generated compositions can be exported as PNG, SVG, or PDF. The export logic is entirely client‑side, leveraging canvas.toDataURL() and a small PDF generation helper.
• Font integration: The app ships with several open‑source fonts (Indie Flower, Lobster, etc.) and allows developers to embed custom web fonts via CSS.
• No backend: All state is kept in the browser’s localStorage or can be exported as JSON, enabling stateless hosting.

Technical Stack

Core Capabilities

• Public API: Although the app is primarily UI‑driven, it exposes a small JavaScript API (digicard.create, digicard.export) that can be invoked from parent pages. This allows embedding Digicard as a widget in other web applications.
• Event Hooks: Developers can listen to events such as onExport, onAddElement, enabling custom workflows (e.g., uploading the exported image to a server).
• Data Persistence: Exported compositions are available as JSON blobs, which can be stored in databases or transmitted via REST endpoints.

Deployment & Infrastructure

• Self‑Hosting: Deploy the dist folder on any static host (NGINX, Apache, Caddy) or CDN. No runtime dependencies mean zero server‑side configuration.
• Containerization: A minimal Dockerfile can serve the static files using nginx:alpine. This is ideal for Kubernetes or Docker‑Compose setups.
• Scalability: Since the app is stateless, scaling is a matter of serving more static instances behind a load balancer. No database or session management is required.

Integration & Extensibility

• Embedding: The component can be inserted into existing SPAs via an <iframe> or by importing the Vue component directly.
• Plugins: While there is no formal plugin system, developers can extend the canvas logic by adding custom Vue components or monkey‑patching the export functions.
• Webhooks: Not built‑in, but developers can hook into the onExport event to trigger external webhooks or API calls.

Developer Experience

• Configuration: Minimal – adjust vite.config.mjs for custom build paths or add environment variables for CDN URLs.
• Documentation: The README provides a concise overview and installation steps, but deeper API docs are sparse. Community support is limited; most queries must be resolved by inspecting the source.
• Code Quality: The project follows standard Vue conventions, uses ESLint (.eslintrc.cjs), and maintains a clean component hierarchy.

Use Cases

1. Internal Branding Tool – Teams can quickly prototype logos or social media graphics without leaving the intranet.
2. Educational Platforms – Teachers can embed Digicard into LMSs to allow students to create simple visual assignments.
3. API‑Driven Content Generation – A backend service can invoke the exported JSON to generate images server‑side for newsletters or reports.

Advantages

• Zero Runtime Footprint: No backend, no database; reduces attack surface and operational overhead.
• Open‑Source Licensing: AGPL ensures any modifications remain free, aligning with open‑source principles.
• Fast Development Cycle: Vue’s reactive system and Vite’s hot module replacement accelerate feature iteration.
• Cross‑Platform Consistency: Pure client‑side rendering guarantees identical output across browsers.

In summary, Digicard offers developers a minimal yet powerful canvas tool that can be embedded or hosted with negligible infrastructure. Its stateless design, coupled with a clean Vue architecture, makes it an attractive choice for projects that require quick graphic composition without the complexity of a full‑stack solution.