🌐 VL.RU OFF — обновлённый сервис отключений Владивостока

Наша команда:

• Соловьев Евгений @zhekich_solovev - Frontend Developer
• Мамонтов Михаил @mmmontov - Backend Developer
• Величко София @sofleee - Дизайнер
• Завадский Максим @revolxn - Аналитик данных
• Барилов Василий @NightVas - Product Manager

🏆Результат

По итогам "Проектной школы", данный проект занял 5 место из 12 в общем зачёте и лучший Frontend среди всех

Проект представляет собой редизайн сайта VL.RU-OFF — сервиса, который информирует жителей Владивостока об отключениях воды, света и других коммунальных услуг.

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

Редизайн включает:

• Переработанную структуру страницы;
• Оптимизацию отображения информации;
• Адаптивный дизайн для корректной работы на всех устройствах.

Рабочую версию сайта можно посмотреть по ссылке https://jenison.ru (сайт не индексируется)

⚙️ Структура проекта

Проект состоит из двух основных частей:

Компонент	Назначение
Frontend (Next.js)	Редизайн главной страницы OFF. Отображение данных и улучшенный пользовательский опыт.
Backend (FastAPI)	REST API для получения данных об отключениях и адресах, с возможностью фильтрации и поиска.

Проект backend`a по basic уровню, представлен в файле ./backend/BACKEND_PROJECT.md

🗃️ ER-диаграмма базы данных

📎 Посмотреть ER-диаграмму в Google Drive

Основные сущности:

• blackouts — данные об отключениях (тип, описание, инициатор);
• buildings — здания и их координаты;
• blackouts_buildings — связь "многие ко многим";
• streets - названия улиц города. Используется для гибкого поиска
• districts, folk_districts, big_folk_districts, cities — справочные таблицы (в проекте не используются).

---

🔄 Архитектура взаимодействия

📎 Визуализация архитектуры (Google Drive)

---

🚀 Запуск проекта в разных режимах

• Настройка файлов .env

  Frontend: нужно создать файл ./frontend/env.local и заполнить его по шаблону из файла ./frontend/.env.local.example

  Backend: создать файл ./backend/app/.env и заполнить по шаблону из файла ./backend/app/.env.template (если название бд не менялось и бд "лежит в нужном месте", тогда всё заработает и без .env, но лучше создать)

  ⚙ Запуск в dev-режиме

1. Для того чтобы протестировать проект локально необходимо в корне прописать команду

docker compose -f docker-compose.dev.yml up --build

---

Если вы хотите запустить Next.js в тест режиме на Mock данных, вам необходимо

1. Установить Node >= v18.20.8
2. В папке /frontend прописать:

npm install

3. После того как все зависимости установятся, пропишите всё в той же папке /frontend:

npm run dev

после этих действий Next.js подымется на https://localhost:3000 и будет использовать mock данные, которые в свою очередь находятся в /frontend/src/mocks/handlers.ts

---

🌎 Запуск в product-режиме

❗Перед началом необходимо в файле docker-compose.prod.yml в переменной окружения NGINX_DOMAIN блока Nginx указать домен сервера на котором будет расположенно приложение

1. Создаём папку для хранения SSL-сертификатов и ключей вашего домена

mkdir ./nginx/certs/conf/live/your_domain.ru

2. заменить данные в файле ./nginx/nginx.conf на свои

3. Создаём самоподписанный SSL-сертификат и приватный ключ

openssl req -x509 -nodes -days 365 -newkey rsa:2048   -keyout ./nginx/certs/conf/live/your_domain.ru/privkey.pem   -out ./nginx/certs/conf/live/your_domain.ru/fullchain.pem   -subj "/CN=your_domain.ru"

4. Запускаем Certbot в Docker-контейнере, чтобы получить реальный SSL-сертификат для своего домена

docker compose run --rm --entrypoint "" certbot \
  certbot certonly --webroot -w /var/www/certbot \
  -d your_domain.ru -d www.your_domain.ru \
  --cert-name your_domain.ru \
  --email youremail@mail.ru --agree-tos --no-eff-email

5. Запуск всего проекта

docker-compose up --build

---

❗❗ Важная информация ❗❗

• База данных: файл blackouts.db необходимо разместить
  в папке ./backend/app рядом с blackouts_database_put_here.lock.
  Скачать базу данных

• Все документы с аналитикой доступны по ссылке 👉[https://drive.google.com/drive/folders/1N7p3im_A7fy_p8x8oYJiDyIwTabf4f7O?usp=sharing]

• Swagger UI доступен по адресу
  👉 http://127.0.0.1:8000/docs
  при запущенном FastAPI-приложении.

• Важно: запуск FastAPI выполняется из директории
  ./backend/app
  (иначе импорты модулей будут некорректны).
  Ссылка на пример launch.json для VSCode

---

@ Разработано в рамках кейса VL.RU OFF — редизайн, переосмысление и расширение функциональности сервиса отключений.