Визовый центр ВолгГТУ

Содержание

• Описание
• Стек технологий
  • Общий стек технологий
  • Backend: стек технологий
  • Frontend: стек технологий
• Разработка и запуск
  • Требования
  • Запуск Backend-сервера
  • Запуск Frontend-приложения

Описание

Сайт предназначен для сотрудников визового отдела и иностранных студентов.

Сервис облегчит и ускорит работу с такими документами, как паспорт, миграционная карта, виза и уведомление о прибытии, которые в конечном итоге будут использованы для заполнения визовой анкеты студента. Документы можно экспортировать в формате Word или Excel.

Сотрудники смогут принимать и редактировать персональные данные, а также поддерживать связь со студентами и уведомлять их, при необходимости, через электронную почту, СМС, VK и Telegram.

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

Общий стек технологий

• NodeJS - Среда выполнения JavaScript
• TypeScript - Язык программирования
• Docker - Контейнеризация приложения
• GraphQL - Язык запросов API
• GraphQL WS - Реализация протокола WebSocket для GraphQL
• JWT - Токены доступа

Backend: стек технологий

• NestJS - Backend-фреймворк
• Apollo Server - Сервер для работы с GraphQL API
• Prisma ORM - ORM для работы с БД
• @paljs/plugins: PrismaSelect - Выборка полей БД в зависимости от GraphQL запроса
• PostgreSQL - СУБД
• Bcrypt - Хеширование паролей
• vk-io - VK API
• telegraf - Telegram Bot API
• nodemailer - Отправка электронной писем

Frontend: стек технологий

• React - Frontend-фреймворк
• Vite - Сборщик Frontend-приложения
• MUI - UI-фреймворк
• Tailwind CSS - CSS-фреймворк
• Apollo Client - Клиент для работы с GraphQL API
• Formik - Создание форм в React без слёз
• Zustand - Библиотека для работы с глобальным состоянием
• Apollo Link Scalars - Поддержка кастомных скалярных типов в Apollo Client
• React Router - Маршрутизация в React

Разработка и запуск

Требования

• NodeJS >=16: nodejs.org (Достаточно выбрать любую последнюю LTS-версию с данной страницы)
• Docker: www.docker.com

Установите данное программное обеспечение, если оно еще не установлено, скачав установочные файлы с указанных официальных сайтов.

Запуск Backend-сервера

1. Для начала нужно заполнить конфигурацию запуска. Для этого в директории backend_nest скопируйте файл .env.example как .env.dev и заполните необходимыми данными, проверьте логин и пароль к БД, укажите токены Telegram Bot API и VK API, укажите необходимые сроки истечения токенов авторизации, секретные ключи и т.д.

2. Распакуйте архив базы данных db_data.7z «в текущую папку». Таким образом в корне проекта должна появиться папка pg_data. Если не выполнить данный шаг, то при запуске сервер сообщит, что в БД нет таблиц. Если вы хотите инициализировать БД с нуля, то сделать это нужно через миграции Prisma ORM.

3. Запустите контейнер с БД:

docker-compose -f docker-compose.db.yml up -d --build --force-recreate

5. Перейдите в директорию backend_nest и установите зависимости командой:

npm install

6. Запустите сервер:

npm run start:dev:swc

7. Если всё прошло успешно, то в консоли появится сообщение примерно следующего содержания: App is running in DEV mode on port %port% и сервер готов, чтобы обрабатывать запросы.

Запуск Frontend-приложения

0. Перед запуском frontend-приложения убедитесь, что backend-сервер запущен и работает.

1. Перейдите в директорию frontend и установите зависимости командой:

npm install

2. Запустите приложение:

npm run dev

3. Если всё прошло успешно, то в консоли появится сообщение примерно следующего содержания: VITE ready on Local: http://localhost:5173, данный адрес вы можете открыть в браузере и начать работу с приложением.