Задача

Pamyatay Pro вирішує прикладну задачу: Pamyatay-pro — це додаток з бекендом на Express з використанням бази даних Postgres і фронтендом на Next.js і React. Також активно використовуються API різних LLM для генерації інформації різного виду, починаючи від текстової і закінчуючи аудіо- та відеогенерацією. Додаток знаходиться в процесі розробки, підтримується і вдосконалюється в частині актуальності модулів і функціональності.

Проект відноситься до комерційної розробки і в активній розробці. Пов'язаний з послугами: Маркетингові та корпоративні сайти.

Кейс демонструє підхід до задач у сфері «Маркетингові та корпоративні сайти»: від постановки до здачі з зрозумілою структурою модулів.

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

Рішення

Зібрано робочий прототип/продукт з зрозумілою навігацією та передбачуваною поведінкою форм і списків. Демо доступне за посиланням на сторінці.

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

Окрему увагу — статуси завантаження та порожні списки: skeleton/spinner там, де дані приходять асинхронно, і зрозумілі empty-state тексти замість порожньої таблиці.

Архітектура і стек

UI і клієнт: react, react-hook-form, tailwindcss.

Сервер і дані: express.

Інфраструктура і утиліти: prisma, bcrypt, cors, dotenv, jsonwebtoken, multer, openai, pg, next, swiper, zustand, eslint.

Розподіл мов у репозиторії: HTML (57.3%), TypeScript (35.2%), CSS (3.5%), JavaScript (2.7%), Shell (1.1%), MDX (0.2%), Dockerfile (0.1%).

Шари розділені так, щоб UI не знав деталей транспорту: адаптери API/сховища, доменні типи, компоненти представлення. Це спрощує заміну бекенду та точкові UX-правки.

Ключові функції

• prisma — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.
• bcrypt — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.
• cors — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.
• dotenv — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.
• express — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.
• jsonwebtoken — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.
• multer — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.
• openai — використано в продуктовій логіці: зменшує кількість самописного коду та пришвидшує додавання нових екранів.

Додатково:

• Інтеграція та використання prisma в продуктовій логіці та інтерфейсі.
• Інтеграція та використання bcrypt в продуктовій логіці та інтерфейсі.
• Інтеграція та використання cors в продуктовій логіці та інтерфейсі.

Результат

MVP вже покриває ключовий сценарій; далі — розширення звітності, тестів та моніторингу.

Вихідний код відкритий: https://github.com/astropsy999/pamyatay-pro — можна оцінити структуру модулів і стиль комітів.

Інтерактивне демо доступне за посиланням вище — можна перевірити UX без розгортання локально.

Що б покращив

Наступний крок — observability (логи/метрики), автотести на регрес та документація API для інтеграторів. Для high-load сценаріїв — профілювання вузьких місць та кешування довідників.