PolimerBeton

📬 Многостраничный адаптивный рекламный сайт с формой обратной связи и базой данных клиентов.

Демо · Сообщить об ошибке

Содержание

1. О проекте
   • Предпросмотр
   • Ключевые особенности
   • Используемые технологии
   • Структура проекта
   • Поддерживаемые браузеры
2. Начало работы
   • Предварительные требования
   • Сборка и развертывание приложения
     • Создание суперпользователя
     • Устранение проблем (опционально)
3. Использование
   • Панель администратора
4. Сложности при разработке
5. Полученные навыки
6. Дорожная карта
7. Лицензия
8. Контакты
9. Благодарности

О проекте

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

Предпросмотр

Ниже представлен предварительный просмотр сайта (Desktop + Mobile, нажмите на изображение для перехода к демо):

Ключевые особенности

Дизайн и интерфейс

• Эксклюзивность: Полностью авторский дизайн страниц сделанный в Figma.
• Адаптивность: Интерфейс построен на базе Bootstrap и Bootstrap Icons с полной поддержкой мобильных устройств.
• Dark Mode: Поддержка темной темы (автоматическое переключение + ручной режим).
• UX/UI: Плавные анимации для улучшения визуального восприятия.

Безопасность и данные

• Шифрование: Защита данных клиентов на уровне полей базы данных (field-level encryption).
• Защита окружения: Строгое разделение конфигураций через файлы .env.

Развертывание и инфраструктура

• Контейнеризация: Полная изоляция через Docker, позволяющая развернуть проект в течение 15 минут.
• CI/CD Workflow: Автоматизация обновления проекта через GitHub Actions и SSH.

Производительность и масштабируемость

• Оптимизация статики: Использование формата .webp и адаптивная подгрузка изображений в зависимости от разрешения экрана.
• Backend: Связка Django + Nginx для стабильной и быстрой работы сервера.
• Бизнес-логика: Автоматическая отправка уведомлений о заказах через SMTP (опционально — Mailjet).

Используемые технологии

Проект создан с использованием следующих инструментов и технологий:

• FRONTEND:

  • 

  • 

  • 

  • 

  • BUILD TOOLS:

    • 
    • 

• BACKEND:

  • 

  • 

  • BUILD TOOLS:

    • 

• DATABASE:

  • 

• VERSION CONTROL SYSTEM:

  • 

• DEPLOYMENT:

  • 

• WEB SERVER:

  • 

• CI/CD:

  • 

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

Основные каталоги и файлы проекта:

PolimerBeton/
│
├── .github/
│   └── workflows/
│       └── update_website_by_ssh.prod.yml      # GitHub CI/CD сценарий: обновление сайта на хостинге при пуше в ветку `main`
│
├── env/                                        # шаблоны файлов .env для разных сценариев (dev, prod, staging)
│   ├── .env.dev.template
│   ├── .env.prod.db.template
│   ├── .env.prod.proxy-companion.template
│   ├── .env.prod.template
│   ├── .env.staging.db.template
│   ├── .env.staging.proxy-companion.template
│   └── .env.staging.template
│
├── project/                                    # прочие проектные файлы
│   ├── database/                               # схема БД
│   ├── design/                                 # макеты дизайна
│   └── preview/                                # превью файлы репозитория
│
├── src/
│   ├── apps/
│   │   └── MainApp/                            # основное приложение Django
│   │       │
│   │       ├── migrations/                     # миграции БД
│   │       │
│   │       ├── static/                         # исходники статических файлов (будут скомпилированы / собраны)
│   │       │   ├── favicons/
│   │       │   ├── images/
│   │       │   ├── scss/
│   │       │   └── ts/
│   │       │
│   │       ├── templates/                      # шаблоны страниц
│   │       │   │
│   │       │   ├── email/
│   │       │   │   └── message_template.html   # шаблон электронного письма
│   │       │   │
│   │       │   ├── MainApp/
│   │       │   │   ├── error.html
│   │       │   │   ├── index.html
│   │       │   │   ├── privacy.html
│   │       │   │   └── success.html
│   │       │   │
│   │       │   └── service/                    # файлы для поисковых систем и ботов
│   │       │       └── robots.txt
│   │       │
│   │       ├── templatetags/                   # пользовательские template‑теги
│   │       │
│   │       ├── __init__.py
│   │       ├── admin.py                        # кастомизация панели администратора
│   │       ├── apps.py
│   │       ├── context_processors.py           # дополнительные контекст‑процессоры для шаблонов
│   │       ├── fields.py                       # пользовательские поля для моделей или форм
│   │       ├── forms.py                        # классы форм
│   │       ├── models.py                       # модели БД
│   │       ├── runners.py                      # разовые скрипты
│   │       ├── sitemaps.py                     # конфигурация sitemap
│   │       ├── tasks.py                        # фоновые задачи
│   │       ├── tests.py                        # модульные тесты
│   │       ├── urls.py                         # маршрутизация URL для приложения
│   │       ├── utils.py                        # вспомогательные функции
│   │       └── views.py                        # обработчики запросов (представления)
│   │
│   ├── config/                                 # файлы конфигурации Django
│   │   │
│   │   ├── settings/
│   │   │   ├── __init__.py
│   │   │   ├── base.py                         # общие настройки Django
│   │   │   ├── dev.py                          # настройки разработки / пре-продакшена
│   │   │   └── prod.py                         # настройки для продакшена
│   │   │
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   │
│   ├── locales/                                # файлы интернационализации
│   ├── scripts/                                # точки входа и вспомогательные скрипты
│   │
│   ├── .dockerignore
│   ├── Dockerfile                              # сборка Docker-образа для разработки
│   ├── Dockerfile.prod                         # сборка Docker-образа для продакшена
│   ├── manage.py                               # точка входа для команд Django
│   ├── package-lock.json                       # фиксация версий зависимостей Node.js
│   ├── package.json                            # зависимости и скрипты для фронтенда
│   ├── poetry.lock                             # фиксация версий зависимостей Python
│   ├── pyproject.toml                          # описание проекта и зависимости Python
│   └── tsconfig.json                           # настройки TypeScript
│
├── web/                                        # конфигурационные файлы веб‑сервера
│   │
│   ├── apache/                                 # конфиги Apache (если нужны для совместимости)
│   │   └── .htaccess
│   │
│   ├── nginx/                                  # основная конфигурация nginx
│   │   ├── Dockerfile
│   │   └── nginx.conf
│   │
│   ├── nginx-proxy/                            # nginx‑proxy (автоматический SSL / reverse proxy)
│   │   │
│   │   ├── vhost.d/
│   │   │   └── default
│   │   │
│   │   ├── .dockerignore
│   │   ├── custom.conf
│   │   ├── Dockerfile
│   │   └── Dockerfile.prod
│   │
│   └── templates/                              # шаблоны для docker‑gen (используется nginx‑proxy)
│       └── docker-gen/
│
├── .gitignore
├── docker-compose.prod.selinux.yml
├── docker-compose.prod.yml                     # деплой в режиме продакшена
├── docker-compose.staging.yml                  # деплой в режиме пре-продакшена
├── docker-compose.yml                          # деплой в режиме разработки
├── LICENSE
├── README.ENG.md
└── README.md

Поддерживаемые браузеры

Проект проверен на корректность отображения и стабильность работы скриптов в актуальных версиях следующих браузеров:

• 
• 
• 
• 
• 

Important

Информация актуальна для версии 2.0.4. На момент проверки проект корректно отображался в последних стабильных версиях всех указанных браузеров.

Дата последней проверки: 1 марта 2026

(наверх)

Начало работы

Следуйте приведённым ниже инструкциям для корректного развёртывания проекта.

Предварительные требования

Установите Docker и плагин Docker Compose. Затем скачайте данный репозиторий в виде ZIP-архива или клонируйте его с помощью Git:

git clone https://github.com/aLeeTheY/PolimerBeton

Перейдите в каталог проекта. Далее откройте папку env/ и создайте конфигурационные файлы на основе соответствующих шаблонов .template. Поддерживаются три окружения: development, staging и production.

Например, для окружения production выполните:

cp .env.prod.template .env.prod
cp .env.prod.db.template .env.prod.db
cp .env.prod.proxy-companion.template .env.prod.proxy-companion

После этого в каждом из созданных файлов замените значения всех переменных, содержащих плейсхолдеры вида <...>, на собственные.

Например, для файла .env.prod.db:

Исходное значение	Пример заполнения	Обязательность
POSTGRES_USER=<YOUR_DATABASE_USER>	POSTGRES_USER=db_username_for_dummy_guys	обязательно
POSTGRES_PASSWORD=<YOUR_DATABASE_PASSWORD>	POSTGRES_PASSWORD=db_password_for_dummy_guys	обязательно
POSTGRES_DB=polimerbeton_db_prod	POSTGRES_DB=polimerbeton_db_prod	опционально

Сборка и развертывание приложения

Выберите соответствующий файл конфигурации (docker-compose.*.yml) и запустите сборку с последующим запуском контейнеров:

docker compose -f docker-compose.prod.yml up -d --build

Создание суперпользователя

После успешного запуска контейнеров создайте суперпользователя для административной панели Django:

docker exec -it polimerbeton-web python manage.py createsuperuser

Следуйте инструкциям в консоли. После выполнения этих шагов проект считается успешно развёрнутым.

Устранение проблем (опционально)

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

Caution

Все команды ниже выполняются на ваш страх и риск!
Если вы не уверены в своих действиях, рекомендуется обратиться к системному администратору.

Очистите старые образы и кэш сборщика:

docker image prune
docker builder prune

Соберите основной контейнер web:

docker compose -f docker-compose.prod.yml build web

Снова выполните очистку:

docker image prune
docker builder prune

Соберите оставшиеся контейнеры и запустите приложение:

docker compose -f docker-compose.prod.yml up -d

(наверх)

Использование

После завершения этапа Начало работы проект будет доступен по вашему доменному имени (или на localhost, если используется конфигурация для разработки).

Панель администратора

Для доступа к административному интерфейсу перейдите на страницу admin/:

https://your-domain/admin/

Для входа используйте учётные данные superuser. Если суперпользователь ещё не создан, выполните соответствующую команду в работающем контейнере.

(наверх)

Сложности при разработке

• Оркестрация микросервисов: Проектирование отказоустойчивого взаимодействия между контейнерами Django, PostgreSQL, Nginx и Let's Encrypt в единой изолированной сети Docker.
• Автоматизация деплоя Django: CI/CD скрипт в GitHub Actions обновляет ветку main и пересобирает контейнер Django без вмешательства в остальные сервисы (автоматическое выполнение можно включить при необходимости).
• SEO и доступность: Проведение аудита и оптимизация HTML-структуры для достижения 100/100 баллов по метрикам Accessibility и SEO в Google Lighthouse.
• Гибкая доставка уведомлений: Основной канал — SMTP; при блокировке SMTP-портов возможна отправка через Mailjet API по HTTPS.

(наверх)

Полученные навыки

• UI/UX дизайн: Проектирование пользовательских интерфейсов в Figma, подготовка дизайн-макетов к верстке, создание адаптивных графических ассетов.
• Fullstack разработка: Проектирование реляционных баз данных в PostgreSQL, разработка серверной логики на Django, создание строго типизированного фронтенда с использованием Sass, Bootstrap и TypeScript.
• DevOps и инфраструктура: Контейнеризация приложений через Docker, управление конфигурациями сред (development/staging/production), настройка сетевого взаимодействия контейнеров.
• Системное администрирование: Развертывание приложений на Linux-серверах, конфигурирование Nginx или Apache в качестве обратного прокси, внедрение SSL-сертификатов через Let's Encrypt для обеспечения безопасности.
• Оптимизация производительности: Минификация HTML, CSS и JS с использованием django-htmlmin и django-compressor, внедрение современных графических форматов для минимизации времени загрузки и отрисовки страниц (LCP/FCP).
• CI/CD: Настройка автоматизированного деплоя через GitHub Actions, управление удалёнными серверами по протоколу SSH.
• Документация и GitHub: Оформление документации и README.md файлов с использованием Markdown, ведение версионного контроля через Git.
• Управление зависимостями и сборка: Использование Npm и Poetry для установки, обновления и фиксации версий библиотек через lock-файлы, обеспечивая воспроизводимость среды разработки.

(наверх)

Дорожная карта

• Проектирование интерфейсов в Figma:
  • Главная страница (index.html)
  • Политика конфиденциальности (privacy.html)
  • Страница успешной отправки (success.html)
  • Страница ошибки (error.html)
• Адаптивная верстка с использованием Bootstrap и поддержкой тёмной темы
• Интеграция верстки в шаблоны Django
• Проектирование архитектуры БД в PostgreSQL (клиенты и заказы)
• Настройка логики взаимодействия django-admin с моделями данных
• Реализация подсистемы обработки форм и регистрации клиентов
• Разработка сервиса уведомлений по протоколу SMTP
• Разработка альтернативного сервиса уведомлений через Mailjet API
• Внедрение механизмов шифрования и защиты персональных данных
• Реализация механизма управления пользовательским согласием (Cookie Consent)
• Интеграция сторонних метрик (Google Analytics + Yandex Metrica) с соблюдением политики Cookie
• Контейнеризация и деплой с использованием Docker:
  • Конфигурация сред окружения (.env.dev, .env.staging, .env.prod)
  • Оптимизация образов (Dockerfile и Dockerfile.prod)
  • Оркестрация микросервисов (Django, PostgreSQL, Let's Encrypt, Nginx) через docker-compose
• Автоматизация CI/CD через GitHub Actions:
  • Автоматическая сборка и деплой при обновлении ветки main
• Интернационализация (i18n):
  • Поддержка английского языка (English)

Полный список планируемых функций и известных проблем доступен в разделе Issues.

(наверх)

Лицензия

Copyright © 2025 aLeeTheY
Проект распространяется по лицензии MIT. Смотрите файл LICENSE для получения подробной информации.

(наверх)

Контакты

GitHub: aLeeTheY
Email: aleethey@gmail.com

(наверх)

Благодарности

aLeeTheY выражает благодарность разработчикам и сообществам следующих проектов:

• Figma
• Visual Studio Code
• Django
• Python
• Poetry
• Bootstrap
• Bootstrap Icons
• Sass
• TypeScript
• Node.js
• Npm
• PostgreSQL
• Let's Encrypt
• Docker
• Nginx
• Git
• GitHub
• GitHub Actions
• Mailjet
• Chocolatey
• FFmpeg
• gifsicle
• Chrome DevTools
• Lighthouse

Без этих инструментов, разработка данного проекта была бы невозможна.

(наверх)