Розробка онлайн-калькулятора: конфігурація, формули, лід-генерація

Розробка онлайн-калькулятора

Відвідувач заходить на сайт, вводить параметри й бачить порожній екран або нескінченний спінер. Калькулятор, який має конвертувати трафік у ліди, перетворюється на джерело роздратування. Ми стикалися з цим десятки разів, тому при розробці робимо акцент на продуктивність і коректні формули. Конверсія сторінок з калькулятором у 2–5 разів вища, ніж у статичних прайс-листів — це підтверджено на 50+ проєктах.

Середній чек ліда, отриманого через калькулятор, на 30% вищий, ніж через звичайну форму зворотного зв'язку. Клієнти, які використовують real-time розрахунок, отримують у 2 рази більше заявок при тому ж трафіку. Калькулятор окупається в середньому за кілька місяців, приваблюючи ліди з високим середнім чеком.

Які проблеми вирішуємо

N+1 запитів при завантаженні даних — типова помилка, коли кожен крок вимагає окремого звернення до сервера. Ми попередньо завантажуємо всі дані на старті й рахуємо на клієнті, виключаючи затримки. Час першого відгуку скорочується з 2 секунд до 100 мс.

Hydration mismatch у SSR — калькулятори на Next.js/Nuxt часто ламаються при гідратації. Ми ізолюємо динамічні компоненти через useEffect та dynamic імпорти, забезпечуючи стабільну роботу.

Формули з помилками — ділення на нуль, неправильні множники. Ми валідуємо всі вхідні дані й виводимо зрозумілі підказки. Наприклад, якщо користувач не вказав вагу, калькулятор показує попередження, а не NaN.

Як ми робимо калькулятор під ключ (приклад)

Для одного замовника розробляли калькулятор вартості доставки з 12 параметрами: вага, габарити, регіони, терміновість, страховка. Замість хардкоду описали логіку як конфігурацію — це дозволило клієнту змінювати формули без перезбирання. Стек: React 18, TypeScript, framer-motion для анімації чисел.

Ось приклад конфігурації для вартісного калькулятора:

interface CalculatorConfig {
  inputs: InputDefinition[];
  formula: FormulaDefinition;
  output: OutputDefinition;
}

interface InputDefinition {
  id:       string;
  type:     'number' | 'select' | 'checkbox' | 'range' | 'toggle';
  label:    string;
  default:  number | string | boolean;
  min?:     number;
  max?:     number;
  step?:    number;
  options?: { value: string; label: string; multiplier?: number }[];
}

type FormulaFn = (inputs: Record<string, number>) => number;

Як збільшити конверсію сайту за допомогою калькулятора?

Ключовий фактор — realtime-розрахунок без перезавантаження сторінки. Кожна зміна слайдера або випадаючого списку одразу оновлює результат. Використовуємо useMemo та AnimatedPrice з spring-анімацією — число плавно «докручується», привертаючи увагу. Це збільшує час на сторінці на 40% і знижує показник відмов на 25%.

Порівняння підходів: конфігурація проти хардкоду

Калькулятор з конфігурацією оновлюється в 10 разів швидше, ніж при хардкоді. Тому ми завжди пропонуємо використовувати конфігурацію — це економить бюджет клієнта в довгостроковій перспективі.

Чому важливо використовувати конфігурацію формул, а не хардкод?

Зазначимо: коли бізнес-логіка змінюється (нові акції, регіони, курси валют), хардкод вимагає деплою. Конфігурація дозволяє оновлювати формули через JSON — це економить час і знижує ризики. Для обчислення використовуємо чисту функцію:

const calculate = (inputs: Record<string, number | string | boolean>): CalculationResult => {
  const basePrice = 50_000;
  const typeMultipliers: Record<string, number> = {
    landing:   1,
    corporate: 1.8,
    ecommerce: 3,
    custom:    5,
  };

  const pageCount = inputs.page_count as number;
  const siteType  = inputs.site_type as string;
  const hasCms    = inputs.has_cms as boolean;
  const hasSeo    = inputs.has_seo as boolean;

  let price = basePrice
    * typeMultipliers[siteType]
    * (1 + (pageCount - 1) * 0.08);

  if (hasCms) price *= 1.3;
  if (hasSeo) price += 25_000;

  const min = Math.round(price * 0.8 / 1000) * 1000;
  const max = Math.round(price * 1.3 / 1000) * 1000;

  return { min, max, currency: 'RUB' };
};

Форма захоплення ліда

Після розрахунку — форма з ім'ям і телефоном. Вся історія вводу зберігається: це цінні дані про вподобання користувачів. Середня конверсія форми становить 12–18%, а при додаванні сегментації (наприклад, слайдер ціни) вона зростає до 25%.

const LeadCaptureForm: React.FC<{ result: CalculationResult; inputs: Record<string, unknown> }> = ({
  result, inputs
}) => {
  const { register, handleSubmit } = useForm<LeadFormData>();

  const onSubmit = async (data: LeadFormData) => {
    await api.post('/api/calculator-leads', {
      ...data,
      calculator_result: result,
      calculator_inputs: inputs,
      page_url: window.location.href,
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')}  placeholder="Ваше ім'я" />
      <input {...register('phone')} placeholder="+380 (___) ___-__-__" />
      <button type="submit">Отримати точний розрахунок</button>
    </form>
  );
};

Процес роботи

1. Аналітика — розбираємо бізнес-логіку, сценарії використання, типові помилки.
2. Проектування — малюємо UX/UI, визначаємо архітектуру формул, закладаємо масштабування.
3. Розробка — пишемо компоненти, конфігурації, юніт-тести на формули. Згідно з MS Docs, тестування граничних випадків знижує кількість багів.
4. Тестування — перевіряємо на граничні випадки (порожні поля, максимальні значення), вимірюємо продуктивність (LCP < 2 с).
5. Деплой та інтеграція — встановлюємо на ваш сайт, підключаємо CRM через вебхуки.

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

• Вихідний код з коментарями
• Конфігурація формул (JSON/TS) та інструкція з її оновлення
• Документація з інтеграції (API, вебхуки)
• Гарантійна підтримка 30 днів
• Рекомендації щодо подальшої оптимізації конверсії

Терміни та вартість

Разом: від 1.5 до 2.5 днів для більшості калькуляторів. Вартість розраховується індивідуально — напишіть нам, і ми оцінимо ваш проєкт за один робочий день. Зв'яжіться з нами для точного розрахунку термінів і вартості.

Наш досвід розробки складних веб-калькуляторів становить понад 5 років. За плечима 50+ успішних проєктів для різних ніш: нерухомість, логістика, страхування. Отримайте консультацію — обговоримо ваш калькулятор без зобов'язань.

Фронтенд-розробка 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 сторінок.

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