Форма збору запитів: валідація, дедуплікація, інтеграція з Jira

Уявіть: продуктова команда з 10 осіб щодня отримує 50 повідомлень у Slack та Telegram з ідеями та побажаннями. Половина втрачається, дублікати не відсіюються, а пріоритети розставляються «на око». Ручна обробка забирає до 2 годин на день — час, який можна витратити на розробку. Наша форма збору feature request вирішує цю проблему: структурує запити, відокремлює опис проблеми від запропонованого рішення та автоматично створює завдання в Jira або Linear. Ми використовуємо стек React + TypeScript + Zod для валідації та API на Next.js або Express. Завдяки дедуплікації через Elasticsearch знижуємо шум на 60–80%, а швидкість обробки одного запиту — менше 200 мс.

Як форма збору запитів функцій вирішує проблеми команди?

Дублікати: без дедуплікації одні й ті самі ідеї надходять по 5–10 разів, засмічуючи беклог. Ми впроваджуємо пошук схожих запитів через Elasticsearch або Meilisearch перед відправкою. Якщо знаходиться схожий заголовок, користувачеві пропонується проголосувати за існуючий, а не створювати новий.

Відсутність контексту: користувачі пишуть «додайте кнопку», не пояснюючи, навіщо. Форма примушує описати проблему, а не рішення, що дає команді повну картину. Категорія та оцінка важливості додають структуру.

Ручна обробка: перенесення запитів із чатів у Jira вручну забирає до 2 годин на день. Webhook-інтеграція робить це автоматично, маппуючи importance у пріоритет (critical → P0, high → P1, medium → P2, low → P3) та категорію в label.

Чому валідація на сервері обов'язкова?

Клієнтська валідація за допомогою Zod та React Hook Form дає миттєвий зворотний зв'язок, але не захищає від маніпуляцій. Серверна валідація дублює схему, перевіряє довжину, формат та заборонені символи. Zod дозволяє використовувати одну й ту саму схему на клієнті та сервері, гарантуючи єдиний контракт даних. Це критично для безпеки: без серверної перевірки зловмисник може відправити шкідливі дані безпосередньо в API.

Як запобігти дублікатам запитів?

Перед відправкою форма виконує пошук за існуючими запитами через Elasticsearch. Якщо знаходиться схожий заголовок, ми показуємо користувачеві картку та пропонуємо проголосувати замість створення дубліката. Це знижує шум на 60–80% та підвищує точність пріоритизації. Для пошуку використовуємо індексацію з tf-idf та поріг схожості 0.7.

Як влаштована інтеграція з беклогом?

Після збереження запиту відправляється webhook у Linear або Jira. Пріоритет маппиться з поля importance: critical → P0, high → P1, medium → P2, low → P3. Категорія перетворюється на label. Це позбавляє ручного перенесення завдань та прискорює обробку. Приклад конфігурації webhook для Linear:

{
  "url": "https://api.linear.app/graphql",
  "headers": {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json"
  },
  "body": {
    "query": "mutation CreateIssue($input: IssueCreateInput!) { issueCreate(input: $input) { success } }",
    "variables": {
      "input": {
        "title": "[Feature] {{title}}",
        "description": "{{problem}}",
        "priority": {{priority}}
      }
    }
  }
}

Реалізація форми та API

Структура форми

Мінімальний набір полів, який дає корисний сигнал:

• Заголовок запиту (коротко, суть)
• Опис проблеми (яку задачу намагаєтеся вирішити — не «додайте кнопку», а навіщо)
• Запропоноване рішення (опціонально)
• Категорія / область продукту
• Оцінка важливості (наскільки часто зустрічаєте проблему)

// FeatureRequestForm.tsx (React + React Hook Form + Zod)
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  title: z
    .string()
    .min(10, 'Минимум 10 символов')
    .max(120, 'Максимум 120 символов'),
  problem: z
    .string()
    .min(30, 'Опишите проблему подробнее')
    .max(2000),
  solution: z.string().max(2000).optional(),
  category: z.enum(['ui-ux', 'performance', 'integrations', 'api', 'other']),
  importance: z.enum(['critical', 'high', 'medium', 'low']),
  email: z.string().email().optional().or(z.literal('')),
});

type FormData = z.infer<typeof schema>;

const CATEGORIES = [
  { value: 'ui-ux', label: 'Интерфейс / UX' },
  { value: 'performance', label: 'Производительность' },
  { value: 'integrations', label: 'Интеграции' },
  { value: 'api', label: 'API / разработчикам' },
  { value: 'other', label: 'Другое' },
] as const;

const IMPORTANCE = [
  { value: 'critical', label: 'Критично — не могу работать без этого' },
  { value: 'high', label: 'Высокая — сталкиваюсь каждый день' },
  { value: 'medium', label: 'Средняя — неудобно, но терпимо' },
  { value: 'low', label: 'Низкая — было бы приятно иметь' },
] as const;

export function FeatureRequestForm() {
  const {
    register,
    control,
    handleSubmit,
    formState: { errors, isSubmitting, isSubmitSuccessful },
    reset,
    watch,
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      category: 'other',
      importance: 'medium',
    },
  });

  const titleValue = watch('title', '');

  const onSubmit = async (data: FormData) => {
    const res = await fetch('/api/feature-requests', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...data,
        submittedAt: new Date().toISOString(),
        pageUrl: window.location.href,
      }),
    });

    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.message ?? 'Ошибка при отправке');
    }
  };

  if (isSubmitSuccessful) {
    return (
      <div className="rounded-lg border border-green-200 bg-green-50 p-6 text-center">
        <p className="text-lg font-semibold text-green-800">Запрос отправлен</p>
        <p className="mt-2 text-sm text-green-700">
          Мы рассмотрим его при планировании следующего релиза.
        </p>
        <button
          onClick={() => reset()}
          className="mt-4 text-sm text-green-700 underline"
        >
          Отправить ещё один
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 max-w-xl">
      {/* Заголовок */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Кратко опишите запрос
          <span className="text-gray-400 ml-1 font-normal">
            ({titleValue.length}/120)
          </span>
        </label>
        <input
          {...register('title')}
          type="text"
          placeholder="Например: Экспорт данных в CSV"
          className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {errors.title && (
          <p className="mt-1 text-xs text-red-600">{errors.title.message}</p>
        )}
      </div>

      {/* Описание проблемы */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Какую проблему это решает?
        </label>
        <p className="text-xs text-gray-500 mb-1">
          Опишите ситуацию, а не конкретное решение — это поможет нам найти лучший подход
        </p>
        <textarea
          {...register('problem')}
          rows={4}
          placeholder="Когда я пытаюсь делать X, мне приходится Y, что неудобно потому что..."
          className="w-full border rounded-md px-3 py-2 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {errors.problem && (
          <p className="mt-1 text-xs text-red-600">{errors.problem.message}</p>
        )}
      </div>

      {/* Предложенное решение */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Как бы вы это реализовали? <span className="text-gray-400">(опционально)</span>
        </label>
        <textarea
          {...register('solution')}
          rows={3}
          placeholder="Добавьте кнопку «Экспорт» в меню таблицы, которая скачивает..."
          className="w-full border rounded-md px-3 py-2 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      {/* Категория */}
      <div>
        <label className="block text-sm font-medium mb-2">Область продукта</label>
        <Controller
          control={control}
          name="category"
          render={({ field }) => (
            <div className="flex flex-wrap gap-2">
              {CATEGORIES.map(cat => (
                <button
                  key={cat.value}
                  type="button"
                  onClick={() => field.onChange(cat.value)}
                  className={`px-3 py-1.5 rounded-full text-xs border transition-colors ${
                    field.value === cat.value
                      ? 'bg-blue-600 border-blue-600 text-white'
                      : 'border-gray-300 hover:border-blue-400'
                  }`}
                >
                  {cat.label}
                </button>
              ))}
            </div>
          )}
        />
      </div>

      {/* Важность */}
      <div>
        <label className="block text-sm font-medium mb-2">Насколько это важно для вас?</label>
        <div className="space-y-2">
          {IMPORTANCE.map(item => (
            <label key={item.value} className="flex items-start gap-2 cursor-pointer">
              <input
                {...register('importance')}
                type="radio"
                value={item.value}
                className="mt-0.5"
              />
              <span className="text-sm">{item.label}</span>
            </label>
          ))}
        </div>
      </div>

      {/* Email */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Email <span className="text-gray-400">(чтобы уведомить вас о реализации)</span>
        </label>
        <input
          {...register('email')}
          type="email"
          placeholder="[email protected]"
          className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {errors.email && (
          <p className="mt-1 text-xs text-red-600">{errors.email.message}</p>
        )}
      </div>

      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium py-2.5 rounded-md text-sm transition-colors"
      >
        {isSubmitting ? 'Отправляю...' : 'Отправить запрос'}
      </button>
    </form>
  );
}

API endpoint

// pages/api/feature-requests.ts (Next.js) или routes/feature-requests.ts (Express)
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).end();

  const { title, problem, solution, category, importance, email, pageUrl } = req.body;

  // Базовая валидация
  if (!title || !problem || !category || !importance) {
    return res.status(400).json({ message: 'Обязательные поля не заполнены' });
  }

  const record = await db.featureRequest.create({
    data: {
      title,
      problem,
      solution: solution || null,
      category,
      importance,
      email: email || null,
      pageUrl,
      status: 'new',
      votes: 0,
    },
  });

  // Уведомление в Linear/Jira/Notion через webhook
  if (process.env.LINEAR_WEBHOOK_URL) {
    await fetch(process.env.LINEAR_WEBHOOK_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: `[Feature] ${title}`,
        description: `**Проблема:**\n${problem}\n\n**Решение:**\n${solution ?? 'не указано'}`,
        priority: importance === 'critical' ? 1 : importance === 'high' ? 2 : 3,
        labelIds: [CATEGORY_LABEL_MAP[category]],
      }),
    });
  }

  return res.status(201).json({ id: record.id });
}

Процес і терміни впровадження

Базова реалізація (форма + API + сповіщення) займає від 2 до 3 днів. Розширення з дедуплікацією, публічним голосуванням та дорожньою картою — ще 3–5 днів. Вартість розраховується індивідуально і залежить від складності інтеграцій.

Що входить у роботу

Чому наше рішення краще за готові?

Готові сервіси (Formspree, Typeform) не дають контролю над валідацією та інтеграцією. Наприклад, Formspree не підтримує Zod-схеми та кастомні webhook-формати. Наше рішення в 2–3 рази швидше за часом відповіді API (локальний сервер без затримок на сторонній API) і повністю кастомізується під бізнес-логіку. Середній час обробки запиту — менше 200 мс.

Як ми гарантуємо якість?

Ми тестуємо форму на всіх етапах: модульні тести Jest, E2E-тести Playwright, ручне QA на трьох браузерах. Досвід команди — понад 30 впроваджень подібних рішень. Ми гарантуємо відсутність регресій при оновленні залежностей та супроводжуємо проект місяць після деплою. Економія часу команди — до 40 годин на місяць за рахунок автоматизації.

Зверніться до нас для оцінки вашого проекту — ми безкоштовно проаналізуємо вимоги та запропонуємо оптимальне рішення. Отримайте консультацію інженера вже сьогодні.

Фронтенд-розробка React: від аудиту до production

Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.

Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.

Чому Next.js — стандартний вибір для SEO?

React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.

Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.

Як TypeScript запобігає багам у продакшені?

TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.

Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.

Vue 3 + Nuxt 3 — альтернативний стек для SSR

Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.

Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.

Продуктивність: метрики та інструменти

Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.

Динамічні імпорти для важких компонентів:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.

Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.

State management: без овериніжирингу

Для більшості додатків достатньо:

• React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
• Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
• React Hook Form — для форм

Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.

CSS та дизайн-система

Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки. React DevTools Profiler — офіційний інструмент від команди React.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.