🧩 PECS Builder

PECS Builder — это веб-приложение для создания персонализированных наборов карточек системы PECS (Picture Exchange Communication System). Инструмент позволяет быстро собрать набор необходимых карточек из встроенной библиотеки или добавить свои собственные, настроить их внешний вид и экспортировать готовый лист для печати в формате PDF.

✨ Основные возможности

• 📦 Богатая библиотека ~1000 уникальных карточек: Просмотр и фильтрация доступных карточек по категориям и поиску.
• 🎨 Персонализация:
  • Возможность добавлять собственные карточки с любыми изображениями и подписями.
  • Управление своим набором через интуитивный интерфейс.
• 🖱️ Drag-and-Drop: Удобная организация карточек в наборе с помощью перетаскивания.
• 🖨️ Гибкая настройка печати:
  • Выбор размера сетки (2x2, 3x3, 4x4).
  • Настройка ориентации листа (книжная/альбомная).
  • Переключатель отображения текстовых подписей.
  • Вспомогательные механизмы для типографий.
• 📄 Экспорт в PDF: Генерация качественного PDF-файла, готового к печати.
• 💾 Локальное хранение: Все ваши наборы и настройки сохраняются в браузере (IndexedDB) и не пропадают после перезагрузки страницы.
• 📖 Обучающие материалы: Встроенные инструкции и советы по печати для новых пользователей.

🛠 Стек технологий

• Frontend: React 19 + TypeScript
• Сборка: Vite
• Менеджер пакетов: Bun
• Библиотеки:
  • jspdf — для генерации PDF-документов.
  • @dnd-kit — для реализации функционала Drag-and-Drop.
  • IndexedDB — для персистентного хранения данных на стороне клиента.

🚀 Быстрый старт

Требования

Для запуска проекта рекомендуется использовать Bun, так как в проекте используется bun.lock.

Установка и запуск

1. Клонируйте репозиторий:

   git clone [email protected]:olluorg/upecs.git
   cd upecs
   

2. Установите зависимости:

   bun install
   

3. Запустите сервер для разработки:

   bun run dev
   

4. Откройте приложение в браузере по адресу http://localhost:5173.

📖 Как пользоваться

1. Сбор набора: Перейдите в раздел «Библиотека», найдите нужные карточки и добавьте их в свой список.
2. Редактирование: В разделе «Набор» вы можете менять порядок карточек, удалять лишние или добавлять свои уникальные карточки через кнопку «Добавить свою».
3. Настройка печати: Перейдите в раздел «Печать» или используйте боковую панель, чтобы выбрать размер карточек и ориентацию страницы.
4. Печать: Нажмите «Скачать PDF», чтобы получить готовый файл для печати.

📁 Структура проекта

• src/components — UI-компоненты (Модальные окна, Библиотека, Панель настроек).
• src/data — Встроенная база данных карточек (cards.json).
• src/utils — Вспомогательные функции (генерация PDF, работа с IndexedDB).
• src/types — Определения типов TypeScript для всего приложения.