Quiz / Form Builder Project for ITDon

Интерактивное веб-приложение для создания и прохождения квиз-форм с сохранением ответов, аналитикой и интеграцией с внешними сервисами.

Демо

Открыть проект: https://rendermood.vercel.app

О проекте

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

Пользователь проходит форму пошагово, отвечая на различные типы вопросов. Все ответы сохраняются и отправляются на сервер, где используются для аналитики или интеграции с внешними сервисами (например, Bitrix24 и Яндекс Метрика).

Проект реализован как клиент-серверное приложение с разделением на frontend и backend.

Задача проекта

• разработать систему многошаговых форм (quiz builder)
• реализовать различные типы вопросов
• обеспечить сохранение состояния пользователя
• реализовать отправку данных на сервер
• настроить интеграции с внешними сервисами
• обеспечить масштабируемую архитектуру

Функционал

• многошаговые формы (step-by-step)
• типы вопросов:
  • radio
  • checkbox
  • input
  • slider (range)
  • carousel
• сохранение состояния (localStorage)
• отправка данных на backend API
• интеграция с Bitrix24
• аналитика через Яндекс Метрику
• валидация пользовательских данных
• админ-логика (управление шагами и вопросами)
• обработка и хранение результатов

Технологии

• Frontend
• Vue
• Pinia
• TypeScript
• Vite
• CSS3
• Backend
• Node.js
• Express
• Prisma
• PostgreSQL

Деплой

Frontend — Vercel Backend — Render Database — Neon

Роль в проекте

Выполненные задачи:

• интеграция с backend API
• разработка backend-логики
• реализация отправки данных и обработки ответов
• настройка интеграций (Bitrix24, аналитика - Яндекс Метрики)
• структурирование проекта (frontend + backend)

Что решает проект

Проект демонстрирует решение задач:

• создание гибкой системы квиз-форм
• сбор и обработка пользовательских данных
• интеграция с CRM и аналитикой
• построение масштабируемого веб-приложения

Практикуемые навыки

• работа с Vue 3 и Composition API
• управление состоянием (Pinia)
• TypeScript в реальном проекте
• построение REST API
• работа с базами данных (PostgreSQL + Prisma)
• проектирование архитектуры приложения
• интеграция сторонних сервисов
• работа с формами и валидацией

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

project/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── questions/
│   │   │   ├── quiz/
│   │   ├── pages/
│   │   ├── stores/
│   │   ├── router/
│   │   └── main.ts
│   └── package.json
│
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── routes/
│   │   ├── services/
│   │   ├── middleware/
│   │   └── app.js
│   ├── prisma/
│   └── server.js
│
└── README.md

Запуск проекта

Frontend

cd frontend
npm install
npm run dev

Backend

cd backend
npm install
npm run dev

Итог

Проект стал практикой разработки полноценного веб-приложения с разделением на frontend и backend.

В ходе работы были освоены:

• современные frontend-технологии (Vue + TypeScript)
• разработка API на Node.js
• работа с базой данных через Prisma
• интеграция внешних сервисов
• построение масштабируемой архитектуры

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