Продукти, які ви можете зрозуміти. Системи, на яких ми можемо будувати.

Що потрібно було вирішити

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

Що ми збудували

Next.js 14.2.35 (App Router) з React 18, TypeScript і Tailwind. Кожна позиція з медичної номенклатури стала окремим статичним маршрутом: 521 файл `page.tsx` у `src/app`, з яких 481 у `/servicii` — 184 фізіотерапія, 122 консультативні послуги, 61 періодичні медичні огляди, 27 гінекологія, 26 озонотерапія, 23 пакети лікування, 18 альтернативна медицина, 12 діагностика, решта по секціях. Sitemap у production перелічує 890 адрес. Сайт двомовний ro/ru. Редагований контент (лікарі, пакети, лікування, статті, налаштування, зображення) зберігається в локальній базі SQLite через `better-sqlite3`, з журналом WAL і активними зовнішніми ключами, керується з `/admin` через 20 API маршрутів; автентифікація використовує `jose` для сесії та `bcryptjs` для пароля, а зміна пароля анулює наявні сесії. Форми запису та контакту перевіряються через `zod` + `react-hook-form` і надсилають відформатоване повідомлення безпосередньо в Telegram через Bot API. Є також калькулятор цін на `calculator`.

Що потрібно було вирішити

Меню клубу часто змінюється, має ціни та обсяги, які мають бути точними, і його читають з телефона, у темряві, люди, які говорять трьома мовами. Відсканований PDF на QR-коді не вирішує нічого з цього: його не можна шукати, не можна перекласти, не можна оновити без повторного друку коду.

Що ми збудували

Цифрове меню без робочого середовища і без пакетів: реальні джерела — це чотири файли JSON, а Python-генератор на 402 рядки пише з них один `index.html`. 119 продуктів у 21 категорії, кожен із ціною, обсягом, складом і фотографією; 119 коротких текстів-презентацій, по одному на продукт; 119 наборів рекомендацій щодо поєднання («з чим підходить»), які відвідувач бачить на кожній картці. Меню має три мови: румунська є базою, а російська та англійська покривають не лише інтерфейс, а й категорії, обсяги, склади, 82 смакові мітки та всі 119 текстів-презентацій. Кошик, список обраного та поділ рахунку працюють у браузері, без облікового запису й без сервера. Шрифти розміщені на тому ж домені, не в Google. Перед кожною публікацією скрипт на 233 рядки виконує 16 перевірок — що не прослизнув жоден трекер, що нічого не запитується від стороннього домену, що JSON валідний і кожне фото існує, що меню повне всіма трьома мовами, що ціни зменшуються в кожній категорії і що структуровані дані на сторінці валідні. Публікація відбувається автоматично з GitHub Actions під час злиття в `main`, після того як workflow робить повну копію production і зберігає її 30 днів.

Що потрібно було вирішити

Примарія комуни повинна мати офіційну вебсторінку, що відповідає HG 728/2023 — із фіксованими розділами (прозорість ухвалення рішень, проєкти та рішення, оголошення, документи, контакти, бюджет) — і повинна мати змогу оновлювати її самостійно, без розробника для кожного оголошення. Без цього інформація, що становить суспільний інтерес, залишається на папері або в групі Facebook.

Що ми збудували

Додаток Laravel 12 на PHP 8.2 з MySQL 8, front-end Vite + Tailwind, упакований у два контейнери Docker (`japca_app` = nginx + PHP-FPM, `japca_db` = MySQL). Архітектура навмисно розділяє два типи контенту: редакційний, що змінюється рідко (географія, історія, установи, контакти, бюджет), зберігається в одному конфігураційному PHP-файлі на 1613 рядків, який безпосередньо читають шаблони Blade, а той, що змінюється часто (оголошення, фотогалерея, проєкти та рішення, документи, налаштування прозорості), зберігається в MySQL і редагується з панелі `/admin`. 40 шаблонів Blade, 32 маршрути, 10 міграцій бази даних. Вхід до панелі обмежений 5 запитами на хвилину з тієї самої адреси — шостий отримує 429 — а кожна адміністративна дія потрапляє до таблиці аудиту. Заголовки безпеки та sitemap покриті автоматичними тестами, що виконуються в CI.

Що потрібно було вирішити

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

Що ми збудували

Один-єдиний `index.html`, згенерований Python-скриптом на 377 рядків із JSON-файлів: 146 продуктів у 31 категорії, 143 короткі презентаційні тексти, плюс переклади російською та англійською для категорій, назв, обсягів, складів, міток і текстів. Кошик, список обраного та розподіл рахунку працюють у браузері. Сайт безпосередньо обслуговується Caddy 2, з автоматичним HTTPS. Цікава частина в тому, що невідстежуваність користувача — це не обіцянка, а правило, нав’язане безперервною інтеграцією: на кожен запит на злиття CI заново генерує `index.html` із джерел і відхиляє PR, якщо результат відрізняється від файла в repo (тобто опублікована сторінка завжди відповідає джерелам), після чого запускає 14 перевірок — без трекерів, без жодного ресурсу, що автоматично завантажується з домену третьої сторони, шрифти розміщені локально, без резервних файлів, що потрапили в repo, політика конфіденційності наявна і пов’язана з підвалу, повне меню трьома мовами, ціни у спадному порядку в кожній категорії, структуровані дані валідні — і перевіряє також, що з server config не зникли заголовки безпеки та маскування IP-адреси в журналах. Усі GitHub Actions, які використовуються, зафіксовані на сумі контролю коміту, а workflow запускається з `permissions: {}`.

Що потрібно було вирішити

неперевірено — ми не маємо джерел, тож я не можу описати робочу проблему, не вигадавши її.

Що ми збудували

React-застосунок, зібраний за допомогою Vite, статично обслуговується nginx, з російською версією на `/ru/`. 181 адреса в production sitemap. Більше ззовні сказати не можна: джерел на цій машині немає, тож я не можу назвати бібліотеки, структуру чи інтеграції.

Що потрібно було вирішити

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

Що ми збудували

React 18 + TypeScript застосунок на Vite 6, із маршрутизацією `react-router-dom` — 22 екрани, від послуг і цін до невідкладної допомоги, ортодонтії, імплантів, педодонтії, прозорості та зворотного зв’язку. На бекенді — API Express 4, запущений під PM2; nginx обслуговує зібрані файли й передає далі лише `/api`. Публічні дані (послуги, команда) зберігаються у JSON-файлах, які читають і API, і безпосередньо front-end. Те, що ми додали, — це безпека: пароль більше не покидає server — `POST `login` перевіряє його там і повертає підписаний токен HMAC-SHA256, дійсний 12 годин, з лімітом 8 спроб на 15 хвилин на IP-адресу та порівняннями в сталий час; записи до `services` і `team` тепер вимагають токен; секрет підпису генерується сам у файлі з правами 0600, що зберігається поза repo; API слухає лише 127.0.0.1, тож nginx — єдиний публічний шлях; CORS обмежено власними доменами, а тіло JSON обмежено 1 MB. Окрім цього ми додали CI, який збирає, перевіряє типи й відхиляє пакет, якщо знаходить у ньому secret, плюс Dependabot із щотижневим ритмом для npm.

Що потрібно було вирішити

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

Що ми збудували

Дві половини в одному сховищі. Публічна частина — це статично скомпільований застосунок Vite + React Router — 50 екранів, серед яких чотири калькулятори (кредит, придатність, рефінансування, графік платежів), окремі сторінки за типом кредиту, блог, сторінки переддоговірної інформації та відповідності. Румунські маршрути залишаються без префікса, а російські йдуть на `/ru/…`, з канонічними та альтернативними мітками, згенерованими з мови активного маршруту. Бізнес-частина — це модульний backend Express на TypeScript із Prisma поверх PostgreSQL: 16 модулів — автентифікація, права за ролями, потік заявок, документи, платежі, сповіщення, заплановані завдання, блог, SEO, GDPR, клієнти, ліди, контакт, калькулятор, Google Ads, здоров'я — і 18 таблиць у схемі Prisma, серед яких `Contract`, `Payment`, `AuditLog`, `GdprRequest`, `UploadedDocument`, `DailyKpiSnapshot` та `CronJobRun`. Працює під PM2, із окремими скриптами для міграцій у production, перевірок перед запуском, генерації секретів, резервного копіювання та відновлення бази.

Що потрібно було вирішити

Автосервіс шукають у дуже специфічних комбінаціях — марка плюс операція плюс район («ремонт автоматичної коробки BMW Botanica»). Одна сторінка «Послуги» не може відповісти на це нічого. Технічна проблема в тому, що сайт — це односторінковий React-застосунок, тож те, що бачить пошуковий рушій, — це порожній `<div>`, якщо не зробити щось спеціально.

Що ми збудували

React 19 + TypeScript застосунок на Vite 6, з React Router, але пререндерений під час компіляції: кожен маршрут виходить із build як окремий HTML-файл, тож пошуковий рушій отримує контент, а не порожню сторінку. Структуру адрес було поетапно розширено з перевіркою в історії — від 206 індексованих сторінок до 316 через додавання комбінацій марка × категорія робіт, статей і сторінок за районами Кишинева. Маршрути мають мовні версії, окремий sitemap для зображень, Open Graph-зображення і розділений JavaScript-пакет для швидшого завантаження. Останній commit виправив деталь, що тихо псує індексацію: канонічна адреса, `hreflang` і адреси в sitemap тепер усі видають однакову форму з кінцевим слешем.