До цього проєкту я вмів зібрати React-компонент. Вмів написати Express-роут. Вмів зробити запит до MongoDB. Окремо. Це було схоже на знання трьох мов, якими ти жодного разу не вів справжньої розмови. І я вирішив зібрати ecommerce-магазин на React, Node і MongoDB — повноцінний full stack застосунок, від початку до кінця, без туторіалу під рукою і без того, щоб хтось водив мене за руку.

Це рішення тихо перепрошило те, як я думаю про софт. Через роки саме через нього я став сильнішим DevOps-інженером. Розкажу, як було насправді.

Стек, і чому MERN тут доречний

Я взяв MERN, бо в кожного шматка була зрозуміла робота:

  • React — вітрина: сітка товарів, кошик, екрани checkout.
  • Redux — управління станом, бо кошик, сесія залогіненого користувача й набір фільтрів мають в один момент часу бути узгоджені між собою.
  • Node.js з Express — REST API, кожен роут, який смикає фронт.
  • MongoDB — каталог товарів і історія замовлень.

На папері все чисто. Чотири шари, кожен говорить із наступним. На практиці першого ж дня не розмовляло взагалі ніщо.

Перший день: ніщо не розмовляло ні з чим

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

Я витратив більше часу на дебаг зазорів між шарами, ніж на написання самих шарів. І саме в цьому виявився весь сенс.

Коли збираєш одну штуку в ізоляції, стики сховані. Ти мокаєш API. Захардкоджуєш користувача. Віриш, що база віддасть рівно те, що ти попросив. А збери все сам — і ховатися ніде: баг ніколи не сидить усередині одного шару, він у рукостисканні між двома.

Фічі, які змусили мене вирости

Це було не демо з трьома несправжніми товарами. Я зібрав усе по-справжньому:

  • Каталог товарів із пошуком і фільтрацією.
  • Кошик з управлінням кількістю — додати, прибрати, змінити число, тримати все в синхроні.
  • Повний checkout-флоу, а не фейкова кнопка «купити».
  • JWT-авторизація — реєстрація, вхід, захищені роути.
  • Адмін-панель для створення й управління товарами.

Кожна з цих фіч зачіпала всі шари. Візьмімо «Додати в кошик». Звучить тривіально. Але простеж шлях: клік прокочується по Redux-стану, смикає запит до API, потрапляє в базу й повертається зміненим — а UI має відобразити нову правду без повного перезавантаження. Одна кнопка, чотири шари й десяток дрібних способів усе зламати.

Авторизація стала головним уроком. Раніше я думав про auth як про фічу — сторінку логіну, яку прикручуєш збоку. Це не так. Це флоу, що пронизує все. Кожен захищений роут, кожна дія в адмінці, кожен кошик, прив'язаний до живого користувача. Трохи не так повівся з токеном в одному місці — і вся система десь в іншому місці втрачає довіру.

Від розуміння шматків — до розуміння систем

Зсув вміщається в одну фразу: до цього проєкту я розумів шматки, а після — зрозумів системи.

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

Такого знання туторіал не дає. Туторіали показують щасливий шлях. Вони не показують токен, що протухає посеред checkout, або запит-фільтр, що віддає не ті 40 товарів. Точкам інтеграції вчишся лише, поживши всередині них.

Чому це зробило мене сильнішим у DevOps

Через роки я пішов в інфраструктуру та DevOps — і full stack мозок переїхав разом зі мною. Бо інфраструктура — це просто ще один шар. Балансувальник, база, service mesh, deploy pipeline — та сама історія, що й з магазином, лише рівнем нижче. Запити течуть наскрізь, стан має лишатися узгодженим, а збої майже завжди живуть у швах між компонентами, а не всередині окремої коробки.

Якщо ти вже сам зібрав усі шари застосунку, ти нутром відчуваєш, де що ламається й навіщо потрібен кожен шар. Перестаєш ставитися до системи як до магії й починаєш бачити набір рукостискань, про які можна міркувати.

Збери одну річ цілком

Моя чесна порада: кожному інженеру варто хоча б раз зібрати одну цілісну річ. Не щоб зашипити. Не щоб покласти в портфоліо. А щоб перепрошити собі мислення.

Візьми щось зі справжніми шарами — магазин, сервіс бронювання, будь-що — і збери все сам: фронт, API, базу, авторизацію. Більшу частину часу ти проведеш у брудних зазорах між шарами, і саме там ховається зростання. Full stack змінює те, як ти бачиш софт. Це варто зробити хоча б раз.

А який проєкт змусив тебе перестати бачити шматки й почати бачити системи?