Описание и детали проекта

Задача

Digitalvcard решает прикладную задачу: Digitalvcard — это инструмент с открытым исходным кодом, который позволяет создавать интерактивные и адаптивные цифровые визитные карточки, размещаемые непосредственно на вашем сайте, исключая необходимость в сторонних услугах. Наслаждайтесь элегантным дизайном, лаконичными кнопками действий и быстрой настройкой для экономичного цифрового сетевого решения.

Проект относится к коммерческий разработке и завершён и используется. Связан с услугами: Маркетинговые и корпоративные сайты, Разработка приложений.

Кейс показывает подход к задачам в области «Маркетинговые и корпоративные сайты»: от постановки до сдачи с понятной структурой модулей.

Перед стартом зафиксировали критерии готовности: понятный первый экран, предсказуемые ошибки форм, возможность доработки без переписывания половины кодовой базы.

Решение

Реализован закрытый коммерческий инструмент: интерфейс и логика заточены под повседневные сценарии пользователя, без лишних экранов.

Сценарии спроектированы так, чтобы основные действия укладывались в один–два экрана: меньше переключений, меньше ошибок при вводе. Навигация и подписи полей согласованы с привычными паттернами — пользователю не нужно «учить интерфейс».

Отдельное внимание — состояния загрузки и пустые списки: skeleton/spinner там, где данные приходят асинхронно, и понятные empty-state тексты вместо пустой таблицы.

Архитектура и стек

UI и клиент: vue-colorpicker, id3-parser, vue-clickaway2, vuedraggable.

Инфраструктура и утилиты: nuxtjs/pwa, core-js, cropperjs, file-saver, fs, jszip, nuxt.

Распределение языков в репозитории: JavaScript (94.3%), Vue (3%), HTML (1.9%), CSS (0.4%), SCSS (0.3%), PHP (0.1%), Dockerfile (0%).

Слои разделены так, чтобы UI не знал деталей транспорта: адаптеры API/хранилища, доменные типы, компоненты представления. Это упрощает замену бэкенда и точечные UX-правки.

Ключевые функции

• vue-colorpicker — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• nuxtjs/pwa — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• core-js — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• cropperjs — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• file-saver — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• fs — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• id3-parser — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• jszip — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.

Дополнительно:

• Интеграция и использование vue-colorpicker в продуктовой логике и интерфейсе.
• Интеграция и использование nuxtjs/pwa в продуктовой логике и интерфейсе.
• Интеграция и использование core-js в продуктовой логике и интерфейсе.

Результат

Проект доведён до рабочего состояния: команда/пользователь получает стабильный инструмент вместо ручных таблиц и переписки. Сокращено время на типовые операции за счёт автоматизации в интерфейсе.

Код закрыт по требованиям заказчика; архитектурные решения и стек описаны на этой странице для прозрачности экспертизы и SEO.

Что бы улучшил

Следующий шаг — observability (логи/метрики), автотесты на регресс и документация API для интеграторов. Для high-load сценариев — профилирование узких мест и кеширование справочников.