VZOR-frontend

Модуль фронтенда для проекта VZOR

Особенности реализации

• адаптивный интерфейс хорошо смотрится на разных типах экранов
• можно использовать как мобильное приложение, благодаря технологии PWA
• рендеринг веб-страниц на сервере
• светлая и тёмная темы
• авторизация пользователей
• параметрический поиск
• поддержка drag-n-drop
• ручное редактирование метаданных
• админ-панель

Стек

• Bun — быстрая среда исполнения JavaScript
• TypeScript — статически типизированный JavaScript
• Next.js — фронтенд-фреймворк на основе React
• Tailwind CSS — CSS-фреймворк
• shadcn/ui — набор компонентов
• ESLint — статический анализатор кода
• Stylelint — анализатор стилей
• Prettier — форматировщик кода
• Docker — платформа для контейнеризации

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

[!WARNING] > Полноценная работа фронтенда возможна только в том случае, если оно запущено в контейнере базового репозитория.

0. Клонируйте репозиторий и перейдите в его папку.

Посредством Docker

1. Установите Docker.
2. Создайте файл .env на основе .env.template и настройте все описанные там параметры.
3. Запустите сборку образа:

docker build -t vzor-frontend .

4. Теперь запускать образ можно командой:

docker run -d --name vzor-frontend-standalone -p 3000:3000 vzor-frontend

Без использования Docker

1. Установите Bun одним из способов. Например, для Windows:

powershell -c "irm bun.sh/install.ps1 | iex"

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

bun install

3. Создайте файл .env на основе .env.template и настройте все описанные там параметры.

4. Соберите проект:

bun run build

5. Теперь запускать проект можно командой:

bun run start

Модификация

Запуск сервера в режиме отладки осуществляется командой:

bun run dev

Чтобы добавить в проект компонент из экосистемы shadcn/ui, выполните:

bun run add-component <компонент>

Прочие скрипты, необходимые для запуска линтеров, форматировщика и т. д. находятся в файле package.json.