7.1. Survey - Общая информация

Описание проекта

Survey - это приложение для проведения опросов сотрудников компании, позволяющее собирать и анализировать обратную связь. Приложение предоставляет удобный пользовательский интерфейс для респондентов, а также инструменты для управления опросами для администраторов.

Основные возможности приложения:

Проведение различных типов опросов с разными интерфейсами для ответов
Адаптивный дизайн для удобства использования на любых устройствах
Сохранение прогресса прохождения опроса
Аналитика результатов опросов
Управление группами вопросов и ответами

Технологический стек

Проект Survey разработан с использованием современных веб-технологий:

React - JavaScript-библиотека для построения пользовательских интерфейсов
TypeScript - типизированный надмножество JavaScript
Vite - быстрый инструмент сборки для современных веб-приложений
Firebase - платформа для разработки мобильных и веб-приложений
React Router - библиотека маршрутизации для React
TailwindCSS - утилитарный CSS-фреймворк
ESLint - инструмент статического анализа кода

Файл package.json содержит полный список зависимостей проекта:

package.json


{
  "name": "survey",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "firebase": "^10.8.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

Требования к окружению

Для работы с проектом Survey требуется следующее окружение:

Node.js версии 16 или выше
npm или yarn
Современный веб-браузер (Chrome, Firefox, Safari, Edge)
Доступ к Firebase (для настройки бэкенда и базы данных)

Установка и запуск

Клонирование репозитория:
Команды для клонирования
```
git clone <url_репозитория>
cd survey
```
Установка зависимостей:
Команды для установки зависимостей
```
npm install
```
Запуск в режиме разработки:
Команды для запуска
```
npm run dev
```
Сборка для продакшн:
Команды для сборки
```
npm run build
```

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

Проект Survey имеет следующую структуру директорий:

Структура директорий


survey/
├── dist/                 # Директория сборки (создается при сборке проекта)
│   ├── assets/           # Скомпилированные ресурсы (стили, скрипты)
│   ├── index.html        # Собранный HTML-файл
│   └── manifest.json     # Манифест приложения
├── public/               # Публичные статические файлы
│   └── manifest.json     # Публичный манифест
├── src/                  # Исходный код
│   ├── components/       # React-компоненты
│   │   ├── answer-interfaces/  # Компоненты интерфейсов ответов
│   │   │   ├── pictures-4pt/   # Компонент выбора картинки
│   │   │   ├── radio-5pt/      # Компонент радиокнопок
│   │   │   ├── scale-11pt/     # Компонент 11-балльной шкалы
│   │   │   ├── slider-11pt/    # Компонент ползунка
│   │   │   ├── stars-5pt/      # Компонент звездочек
│   │   │   ├── text/           # Компонент текстового ввода
│   │   │   └── index.ts        # Экспорты интерфейсов ответов
│   │   ├── CompletionScreen.tsx # Экран завершения опроса
│   │   ├── CompletionScreen.css # Стили экрана завершения
│   │   ├── DifficultyModal.tsx  # Модальное окно выбора сложности
│   │   ├── Footer.tsx           # Компонент подвала
│   │   ├── Header.tsx           # Компонент заголовка
│   │   ├── Logo.tsx             # Компонент логотипа
│   │   ├── NavigationControls.tsx # Навигационные кнопки
│   │   ├── PreparationSteps.tsx   # Шаги подготовки к опросу
│   │   ├── QuestionInterface.tsx  # Интерфейс вопроса
│   │   ├── QuestionInterface.css  # Стили интерфейса вопроса
│   │   ├── SurveyCard.tsx         # Карточка опроса
│   │   ├── SurveyCompleted.tsx    # Экран завершенного опроса
│   │   └── SurveyEnded.tsx        # Экран окончания опроса
│   ├── config/           # Конфигурационные файлы
│   │   └── constants.ts  # Константы приложения
│   ├── types/            # TypeScript типы и интерфейсы
│   │   └── survey.ts     # Типы данных для опросов
│   ├── utils/            # Утилиты и вспомогательные функции
│   │   ├── api/          # Функции для работы с API
│   │   │   ├── cache.ts       # Кэширование API-запросов
│   │   │   ├── index.ts       # Экспорты API-функций
│   │   │   ├── surveyApi.ts   # API для опросов
│   │   │   └── surveyData.ts  # Функции для работы с данными опросов
│   │   ├── surveyGroups.ts    # Работа с группами опросов
│   │   ├── surveyPersistence.ts # Сохранение состояния опросов
│   │   ├── uuid.ts            # Генерация UUID
│   │   └── wordDeclension.ts  # Склонение слов
│   ├── App.tsx           # Корневой компонент
│   ├── index.css         # Глобальные стили
│   ├── main.tsx          # Точка входа
│   └── vite-env.d.ts     # Типы окружения Vite
├── .bolt/                # Настройки для инструментов
├── .gitattributes        # Настройки Git атрибутов
├── .gitignore            # Список игнорируемых Git-файлов
├── eslint.config.js      # Конфигурация ESLint
├── index.html            # Основной HTML-файл
├── package.json          # Зависимости и скрипты npm
├── package-lock.json     # Фиксация версий зависимостей
├── postcss.config.js     # Конфигурация PostCSS
├── tailwind.config.js    # Конфигурация TailwindCSS
├── tsconfig.app.json     # Конфигурация TS для приложения
├── tsconfig.json         # Основная конфигурация TypeScript
├── tsconfig.node.json    # Конфигурация TS для Node.js
└── vite.config.ts        # Конфигурация Vite

Ключевые файлы

Проект содержит следующие ключевые файлы:

src/App.tsx - основной компонент приложения, определяющий маршрутизацию
src/main.tsx - точка входа в приложение
src/config/firebase.ts - конфигурация Firebase
src/config/constants.ts - константы приложения
src/types/survey.ts - типы данных, связанные с опросами
src/components/QuestionInterface.tsx - основной компонент интерфейса вопроса

Пример основного файла приложения

Ниже приведен пример основного файла приложения App.tsx:

App.tsx


import { useEffect, useState } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import SurveyCard from './components/SurveyCard';
import SurveyCompleted from './components/SurveyCompleted';
import SurveyEnded from './components/SurveyEnded';
import { getSurveyData } from './utils/api/surveyData';
import PreparationSteps from './components/PreparationSteps';
import DifficultyModal from './components/DifficultyModal';
import CompletionScreen from './components/CompletionScreen';
import { saveSurveyState } from './utils/surveyPersistence';
import './App.css';

function App() {
  const [surveyData, setSurveyData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [step, setStep] = useState(0);
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [answers, setAnswers] = useState>({});
  const [difficultyModalOpen, setDifficultyModalOpen] = useState(false);
  const [showPreparation, setShowPreparation] = useState(false);
  const [showCompletionScreen, setShowCompletionScreen] = useState(false);

  // ... остальной код компонента
  
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={} />
        <Route 
          path="/survey" 
          element={
            // Основной контент приложения
          } 
        />
        <Route path="*" element={} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Документация проекта