Минск, www.itransition.ru
Информационные технологии, системная интеграция, интернет... Показать еще
Стажер
ссылка на деплой проекта:
https://questionnaire-app-qy3a.onrender.com
ссылка на gitHub:
https://github.com/Sharymka/questionnaire_app
Итоговый проект во время обучения в компании Itransition.
Описание проекта:
Многофункциональное приложение для создания и управления опросниками с гибкой архитектурой и использованием современного стека технологий.
Функциональные особенности и архитектура:
Архитектура логина и сессий: Авторизация реализована на основе express-session с хранением сессий в базе MySQL (через Sequelize). Сессии подписываются и хранятся в cookies, при каждом запросе осуществляется валидация сессии и срока её действия. При истечении срока или отсутствии сессии происходит автоматический редирект на страницу логина. При разлогине удаляется сессия и cookie.
База данных и ORM: Использован модельный подход и ORM Sequelize для взаимодействия с MySQL.
Функционал создания опросов: Пользователи могут создавать шаблоны опросов, выбирать тему, загружать изображения (с загрузкой и сжатием через Cloudinary), задавать название, описание, добавлять теги из предложенного списка или собственные. В шаблонах возможно добавление вопросов с настройками типов ответов (короткая строка, абзац, число, варианты ответов) и уровнем доступа (публичный или ограниченный).
Личный кабинет: Раздел “Мои шаблоны” с возможностью редактирования, удаления шаблонов, просмотра ответов пользователей в режиме чтения.
Публичный каталог: Раздел “Все шаблоны” с карточками шаблонов, возможностью заполнения форм и сортировки по тегам.
UI-компоненты: Реализация интерфейсов с использованием библиотеки MUI/Material. Задействованы компоненты Autocomplete, TextField, FormControlLabel с обработкой событий.
Drag-and-drop: Перетаскивание вопросов и вариантов ответов реализовано через библиотеку hello-pangea/dnd с использованием кастомного хука-обертки и компонентов DragDropContext, Droppable, Draggable.
Работа с изображениями: Загрузка, предпросмотр и хранение изображений в контексте приложения.
Взаимодействие с API: Отправка запросов через axios с поддержкой перехватчиков, автоматическим JSON-парсином.
Оптимизация и хуки:
useRef для хранения промежуточных состояний без лишних ререндеров.
useCallback для мемоизации функций.
useReducer для централизованной логики управления состоянием.
Кастомный HOC withTooltip с forwardRef для корректного отображения всплывающих подсказок.
Поиск и фильтрация: Механизм поиска и фильтрации по тегам с контролем переходов и минимизацией лишних обновлений интерфейса.
Стек технологий: React, React Context, MUI, Axios, Sequelize, MySQL, express-session, Cloudinary, hello-pangea/dnd, useRef, useReducer, useCallback, forwardRef.