Мини-анкета (Mini-questionnaire)

Простое приложение для проведения опросов, состоящее из backend-части на Node.js/TypeScript и frontend-интерфейса на React.

Функционал

Backend

• GET /questions – возвращает список жёстко заданных вопросов анкеты (3–5 шт.)
• POST /answers – принимает ответы пользователя и сохраняет их в памяти (в массиве)
• GET /submissions – дополнительный endpoint для просмотра всех сохранённых ответов (для отладки)

Frontend

• Загружает вопросы с backend
• Отображает их в удобном интерфейсе с различными типами полей ввода
• Отправляет заполненные ответы через POST /answers
• Показывает сообщение «Спасибо!» после успешной отправки
• Валидация обязательных полей

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

HW01/
├── backend/              # Node.js/TypeScript сервер
│   ├── server.ts        # Основной сервер с API
│   ├── package.json     # Зависимости backend
│   └── tsconfig.json    # Конфигурация TypeScript
├── frontend/            # React приложение
│   ├── src/
│   │   ├── App.tsx      # Главный компонент анкеты
│   │   ├── App.css      # Стили компонента
│   │   ├── index.tsx    # Точка входа
│   │   └── index.css    # Глобальные стили
│   ├── package.json     # Зависимости frontend
│   └── tsconfig.json    # Конфигурация TypeScript
└── README.md            # Документация

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

1. Запуск backend сервера

cd backend
npm install
npm run dev

Сервер запустится на http://localhost:3001

2. Запуск frontend приложения

cd frontend
npm install
npm start

Приложение откроется в браузере по адресу http://localhost:3000

API Endpoints

GET /questions

Возвращает массив вопросов в формате JSON:

[
  {
    "id": "1",
    "text": "Как вас зовут?",
    "type": "text",
    "required": true
  },
  ...
]

POST /answers

Принимает JSON с ответами:

{
  "answers": {
    "1": "Иван",
    "2": "25",
    "3": "синий",
    "4": "5",
    "5": "JavaScript"
  }
}

Возвращает:

{
  "success": true,
  "message": "Answers saved successfully",
  "totalSubmissions": 1
}

Технологии

• Backend: Node.js, Express, TypeScript, CORS
• Frontend: React, TypeScript, CSS3
• Связь: REST API, проксирование запросов

Особенности реализации

1. Типы вопросов: текст, число, диапазон (range), выпадающий список
2. Валидация: проверка обязательных полей на сервере и клиенте
3. Хранение данных: ответы сохраняются в памяти сервера (массив)
4. Интерфейс: адаптивный дизайн, удобные элементы ввода
5. Обратная связь: сообщения об ошибках и успешной отправке

Скриншоты

1. Страница анкеты – форма с вопросами разных типов
2. Сообщение "Спасибо" – появляется после успешной отправки
3. Ошибки валидации – подсветка обязательных полей

Дальнейшее развитие

• Добавление базы данных для постоянного хранения ответов
• Аутентификация пользователей
• Экспорт ответов в CSV/Excel
• Административная панель для просмотра статистики
• Поддержка нескольких языков

Использованные промпты:

---

сгенерировать простое приложение «Мини-анкета», состоящее из backend-части и небольшого frontend-интерфейса.

Требуемый функционал:

Backend предоставляет два API:

GET /questions — возвращает список вопросов анкеты (жёстко заданных, 3–5 шт.).

POST /answers — принимает ответы пользователя и сохраняет их в памяти (например, в slice/array/map).

Frontend:

загружает вопросы с backend;

отображает их в HTML/JS интерфейсе;

отправляет заполненные ответы через POST /answers;

показывает пользователю сообщение «Спасибо!» после отправки.

Backend: Node.js/TS

Frontend: React/Vue шаблон генерированный ассистентом.

как запустить бэкэнд-приложение?

не могу запустить бакенд

npm run dev

---

Мини-анкета не отображает вопросы

Я бы хотел отладить серверное приложение, чтобы убедиться, что вопросы доходят

где находятся логи сервера?

Заверши работу серверного приложения

можешь сделать запрос к дополнительному endpoint для просмотра всех ответов ?

Можно ли вычистить папки приложения от скачанных файлов, чтобы остались только исходники?