Від ідеї до живого сайту: карта понять для не-розробника

Коли людина без технічного досвіду вперше стикається з розробкою сайту, найбільший бар'єр — не складність задач, а незнайомі слова. Фронтенд, бекенд, деплой, репозиторій, API, домен, хостинг — усе це звучить як інша мова, і саме тому здається, що вайбкодинг «не для мене». Насправді за кожним із цих слів стоїть просте, зрозуміле поняття — просто його ще ніхто не пояснив нормальною мовою.

Ця стаття — словник-карта. Для кожного терміна: що це насправді, навіщо воно існує, і чи потрібно про це думати на старті. Мета — щоб наступного разу, коли AI чи стаття в інтернеті скаже одне з цих слів, не закривалась вкладка, а було зрозуміло, про що йдеться.

Фронтенд і бекенд — вітрина і кухня

Уяви ресторан. Зал зі столиками, меню, освітленням і музикою — це те, що бачить відвідувач. Кухня, де готують страви, — те, чого відвідувач не бачить, але без чого ресторан не працює.

Фронтенд («передній кінець») — це все, що бачить і чіпає відвідувач сайту: кнопки, тексти, кольори, форми, анімації. Усе, що видно у браузері, — це фронтенд.

Бекенд («задній кінець») — це те, що працює «на кухні»: обробка форм, перевірка пароля при вході, зберігання даних, розрахунок ціни зі знижкою. Відвідувач цього не бачить, але результат цієї роботи впливає на те, що зрештою покаже фронтенд.

Чи потрібно це на старті? Якщо мета — сайт-візитка, портфоліо чи проста сторінка з формою, яка просто надсилає лист на пошту, — майже повністю вистачить фронтенду. Бекенд стає потрібним, коли з'являється щось, що треба «пам'ятати»: реєстрація користувачів, збереження замовлень, особистий кабінет.

Репозиторій і Git — історія змін твого проєкту

Репозиторій — це просто папка з усіма файлами проєкту, яка додатково зберігає повну історію змінень. Уяви документ Google Docs, де можна відкрити «історію версій» і побачити, яким текст був годину тому, вчора, тиждень тому. Git — технологія, яка робить те саме, але для коду.

Навіщо це потрібно: коли AI щось «полагодить» і випадково зламає щось інше, репозиторій дозволяє відкотитися до попередньої робочої версії — замість того, щоб панікувати і починати заново. GitHub — один з найпопулярніших сервісів, де такі репозиторії зберігаються онлайн, і звідки їх потім бере хостинг, щоб опублікувати сайт.

Чи потрібно на старті: так, навіть на найпростішому проєкті. Це як страхування — не відчувається потрібним, поки не рятує один раз. Більшість сучасних інструментів для вайбкодингу вже мають підключення до GitHub у кілька кліків, тож технічно це не складно — головне, розуміти, навіщо воно там.

Приклад питання, яке варто поставити AI, якщо це слово незрозуміле:

Поясни простими словами, без жаргону, що таке репозиторій і Git.
Наведи аналогію з повсякденного життя і скажи, чи справді мені
потрібно про це думати на етапі, коли в мене лише одна проста
сторінка-візитка.

Хостинг і деплой — де живе сайт і як він туди потрапляє

Файли сайту, поки вони лежать на комп'ютері, бачить тільки автор. Хостинг — це комп'ютер (точніше, багато потужних комп'ютерів у дата-центрі), який постійно ввімкнений і підключений до інтернету, і на якому ці файли зберігаються так, щоб їх міг відкрити будь-хто у світі.

Деплой (від англійського «розгортання») — сам процес перенесення сайту зі стану «лежить на комп'ютері» у стан «доступний за посиланням в інтернеті». Це як переїзд: квартира вже готова (код), а деплой — вантажівка, яка перевозить меблі (файли) у новий будинок (сервер хостингу), щоб туди могли зайти гості.

Сервіси на кшталт Vercel зробили цей процес значно простішим за останні роки: підключається репозиторій — і кожна нова версія коду публікується автоматично, без ручного «завантаження файлів на сервер», яке було стандартом раніше.

Чи потрібно розбиратись глибоко: ні. На старті достатньо розуміти, що деплой — це кнопка «опублікувати», а хостинг — місце, куди публікується.

Домен — адреса, а не сам будинок

Домен — це людяна адреса сайту, наприклад svidomy.academy, замість довгого технічного номера (IP-адреси), який комп'ютери насправді використовують для пошуку один одного в мережі. Домен — це вивіска з адресою, а сам сайт (файли на хостингу) — будинок.

Важливо розуміти різницю: домен і хостинг — це дві окремі речі, які часто купують у різних місцях. Домен реєструють через спеціальні сервіси-реєстратори, а хостинг — окремо. Потім їх «з'єднують», вказуючи, на який хостинг має вести домен.

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

База даних — шафа з картками

База даних — це організоване сховище інформації, яка має «жити» довше, ніж одне відкриття сторінки: список користувачів, товари в магазині, коментарі, замовлення. Уяви картотеку в бібліотеці — шафу з картками, де кожна картка має чітку структуру (автор, назва, рік), і будь-яку картку можна швидко знайти за одним з полів.

Без бази даних сайт «забуває» все одразу після того, як вкладку закрито. З базою даних сайт «пам'ятає»: хто зареєструвався, що лежить у кошику, які повідомлення були в чаті вчора.

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

Чи потрібно на старті: тільки якщо сайту треба щось «пам'ятати» між відвідуваннями. Проста сторінка-візитка без реєстрації користувачів і кошика бази даних не потребує.

API — офіціант між кухнею і залою

Повертаючись до аналогії з рестораном: якщо фронтенд — це зал, а бекенд — кухня, то API — це офіціант, який передає замовлення на кухню і приносить готову страву назад у зал. Технічно API — це домовлений спосіб, яким одна частина програми питає щось в іншої і отримує відповідь.

Наприклад, коли сайт показує актуальний курс валют, десь «за кулісами» він робить запит через API до сервісу, який ці курси зберігає, і отримує у відповідь потрібне число.

Чи потрібно розуміти на старті глибоко: ні, але корисно знати саме слово, бо AI часто вживатиме його в поясненнях — «підключимо це через API» означає просто «з'єднаємо дві частини системи узгодженим способом».

Приклад того, як попросити AI пояснити термін замість того, щоб мовчки гуглити:

Ти щойно написав, що потрібно «підключити API погоди».
Поясни, будь ласка, простими словами: що саме тут відбувається,
яких дій це від мене вимагає, і чи є тут щось, з чим я можу
випадково щось зламати, якщо не розумію процесу.

Фреймворк — конструктор, а не будівництво з нуля

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

Next.js, на якому працює й платформа svidomy.academy, — один з популярних фреймворків для створення сайтів. Він бере на себе багато технічних деталей (як швидко завантажується сторінка, як організовані файли), щоб не доводилось вирішувати їх щоразу заново.

Чи потрібно обирати фреймворк самостійно на старті: ні. Це рішення варто делегувати AI-помічнику або інструменту, з яким ведеться робота (Lovable, v0 та подібні вже мають фреймворк «за замовчуванням»). Достатньо знати, що це слово означає «набір готових конструкцій», а не привід для стресу.

Мінімальний шлях: ідея → живий сайт

Зберемо все докупи в один маршрут, яким справді можна пройти, маючи ідею і AI-помічника:

• Сформулювати ідею настільки чітко, наскільки можливо — для кого сайт, яка головна дія відвідувача.
• Попросити AI створити фронтенд — вигляд сторінки. На цьому етапі бекенд і база даних майже завжди не потрібні.
• Перевірити результат локально (тобто на власному комп'ютері, ще до публікації).
• Завантажити код у репозиторій (GitHub) — це займає кілька хвилин з допомогою AI.
• Підключити репозиторій до хостингу (наприклад, Vercel) — це і є деплой. Результат — робоче тимчасове посилання.
• Якщо потрібно щось «пам'ятати» (форми, користувачі, замовлення) — додати базу даних (наприклад, Supabase).
• Якщо проєкт переростає у справжній бренд — купити домен і підключити його до хостингу.

Що можна сміливо пропустити на старті: власний домен, базу даних (якщо форма просто надсилає лист), глибоке розуміння API, вибір фреймворка вручну. Ці кроки додаються тоді, коли з'являється реальна потреба, — не раніше.

Що далі

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

Якщо хочеться зробити це не навпомацки, а з супроводом і практикою на конкретному прикладі — на платформі svidomy.academy є уроки, які проводять саме через цей шлях: від першого промпту до опублікованого сайту, з поясненням кожного кроку простими словами.