Современная платформа для создания и прохождения опросов на Django

Страница авторизации и регистрации пользователей.

Основная страница приложения с доступным функционалом.

Навигация и дополнительная информация в подвале страницы.

Профиль пользователя и управление персональными данными.

Просмотр и анализ результатов проведенных опросов.

Конструктор для создания новых опросов.

Интерфейс для респондентов при прохождении опроса.

• Создание опросов с различными типами вопросов
• Гибкая система авторизации пользователей
• Адаптивный интерфейс для всех устройств
• Интеграция с RabbitMQ для асинхронных задач
• Защита от спама с помощью PoW (Proof of Work)
• Экспорт результатов в различные форматы

• Python 3.9+
• MySQL 8.0+
• Docker (опционально)

git clone https://github.com/Seigneurs-Team/pollster/
cd pollster/src  
pip install -r requirements.txt  
python3 -m app.manage runserver  

docker-compose up  

Архитектура фронтенда представляет собой гибридный подход, идеально дополняющий Django Template Layer. jQuery был выбран в качестве основного инструмента для кросс-браузерной DOM-манипуляции и обеспечения совместимости, в то время как современный Vanilla JS (ES6+) и API fetch используются для асинхронных операций и работы с данными, что обеспечивает высокую производительность и чистоту кода.

• Mobile-First подход: Вёрстка выполнена на чистом CSS с использованием Flexbox, что гарантирует корректное отображение интерфейса на всех устройствах — от смартфонов (320px) до десктопных мониторов.
• Плавные анимации: Интерактивные элементы имеют тонкие, ненавязчивые hover-эффекты и анимации переходов, реализованные на CSS (transition, transform), что создает современное и отзывчивое ощущение от интерфейса.

Это ядро фронтенд-логики. Были реализованы сложные механики для обеспечения гибкости при создании опроса:

1. Динамическое добавление/удаление вопросов:

   • Реализована функция "Добавить вопрос", которая на основе шаблона, клонирует структуру вопроса, генерирует уникальные id и name для всех полей ввода и добавляет его в форму.
   • У каждого вопроса есть кнопка "Удалить", которая после подтверждения действия плавно удаляет блок вопроса из DOM

2. Управление вариантами ответов внутри каждого вопроса:

   • Для каждого вопроса реализована аналогичная логика: динамическое добавление и удаление полей для вариантов ответов (input[type="text"]).
   • Для удобства пользователя изначально отображается 2-3 поля, а кнопка "Добавить вариант" подгружает следующие

3. Валидация на клиенте:

   • Реализована двухэтапная валидация. Первый этап — на клиенте, перед отправкой формы. Проверяются обязательные поля: заголовок опроса, текст вопросов и варианты ответов.
   • Поля с ошибками динамически подсвечиваются (через addClass('is-invalid')), под ними появляются текстовые сообщения об ошибках.

• Валидация ответов: Реализована "ленивая" валидация. Если вопрос обязательный, проверка срабатывает при попытке отправить форму. Пользователь получает уведомление с просьбой ответить на пропущенные обязательные вопросы.
• Динамическое обновление интерфейса: Для вопросов с выбором из нескольких вариантов реализованы кастомные стилизованные чекбоксы и радиокнопки, которые визуально меняют состояние при выборе, улучшая UX.

• Отправка ответов: Ответы на опрос отправляются асинхронно через современный Fetch API с контролем заголовков (Content-Type: application/json). Ответы сервера (успех или ошибка) обрабатываются, и пользователю показываются соответствующие уведомления ("Результаты сохранены!" или детализированное сообщение об ошибке).

• Подгрузка результатов: На страницах просмотра статистики данные для интерактивных диаграмм подгружаются асинхронно через fetch-запросы. Полученные данные (количество ответов, процентные соотношения) передаются в библиотеку Chart.js, которая рендерит информативные pie-charts и bar-charts с плавными анимациями.

• Интеграция с PoW (Proof-of-Work): Перед отправкой запросов на аутентификацию или ресурсоемких действий фронтенд выполняет клиентскую часть алгоритма Proof-of-Work. Реализован вычислительный алгоритм (поиск хэша с заданным количеством ведущих нулей), результат которого передается на бэкенд для верификации, обеспечивая защиту от брут-форса и спама. • * Защита от XSS: Все динамически генерируемые текстовые элементы (например, приветствие с именем пользователя в шапке сайта), в которые подставляются данные от пользователя, проходят строгую проверку и санитизацию. Данные вставляются в DOM исключительно через безопасные методы (.text(), textContent), что полностью исключает возможность выполнения инъекций и разрывов HTML-структуры.

• Ленивая загрузка ленты опросов: На главной странице реализован пагинированный вывод опросов. При прокрутке до конца списка инициируется fetch-запрос за следующей "порцией" данных, которые динамически добавляются в DOM, создавая бесшовный опыт бесконечной ленты.

• Валидация всех input-ов: Все пользовательские вводы валидируются на клиенте в соответствии с ожидаемым типом данных (email, текст, числа) и их длиной. Это предотвращает отправку заведомо неверных данных и сразу дает обратную связь пользователю.
• Обработка ошибок сети: Все асинхронные операции обернуты в блоки try...catch, а для fetch добавлен обработчик на случай отказа сети. Пользователь всегда информирован о статусе своих действий.
• Устранение нежелательного поведения: Для кнопок отправки форм реализован механизм блокировки на время выполнения запроса (pattern "loading spinner"), чтобы предотвратить повторные нажатия и дублирование запросов.

1. Форкните репозиторий
2. Создайте ветку для своей фичи (git checkout -b feature/amazing-feature)
3. Сделайте коммит изменений (git commit -m 'Add some amazing feature')
4. Запушьте в свой форк (git push origin feature/amazing-feature)
5. Откройте Pull Request

Этот проект распространяется под лицензией MIT - подробности см. в файле LICENSE.

Разработано с ❤️ командой Seigneurs - делаем сбор мнений простым и удобным!