Task

Digitalvcard addresses a practical need: Digitalvcard is an open-source tool that allows users to create interactive and responsive digital business cards hosted directly on their website, eliminating the need for third-party services. Enjoy elegant design, concise call-to-action buttons, and quick setup for an economical digital networking solution.

The project is classified as commercial development and is completed and in use. It is related to services: Marketing and corporate websites, Application development.

This case study demonstrates the approach to tasks in the area of "Marketing and corporate websites": from requirements gathering to delivery with a clear module structure.

Before starting, we established readiness criteria: a clear first screen, predictable form errors, and the ability to make adjustments without rewriting half of the codebase.

Solution

A closed commercial tool has been implemented: the interface and logic are tailored to everyday user scenarios, without unnecessary screens.

The scenarios are designed so that the main actions fit within one or two screens: fewer switches, fewer input errors. Navigation and field labels are aligned with familiar patterns—users do not need to "learn the interface."

Special attention is given to loading states and empty lists: skeleton/spinner where data is fetched asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: vue-colorpicker, id3-parser, vue-clickaway2, vuedraggable.

Infrastructure and utilities: nuxtjs/pwa, core-js, cropperjs, file-saver, fs, jszip, nuxt.

Language distribution in the repository: JavaScript (94.3%), Vue (3%), HTML (1.9%), CSS (0.4%), SCSS (0.3%), PHP (0.1%), Dockerfile (0%).

Layers are separated so that the UI is unaware of transport details: API/store adapters, domain types, view components. This simplifies backend replacement and targeted UX adjustments.

Key features

• vue-colorpicker – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• nuxtjs/pwa – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• core-js – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• cropperjs – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• file-saver – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• fs – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• id3-parser – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• jszip – used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of vue-colorpicker in product logic and interface.
• Integration and use of nuxtjs/pwa in product logic and interface.
• Integration and use of core-js in product logic and interface.

Result

The project has been brought to a working state: the team/user receives a stable tool instead of manual spreadsheets and correspondence. Time for routine operations has been reduced through automation in the interface.

The code is closed per the client's requirements; architectural decisions and stack are described on this page for transparency of expertise and SEO.

What I would improve

The next step is observability (logs/metrics), automated regression tests, and API documentation for integrators. For high-load scenarios—profiling bottlenecks and caching directories.