Задача

Money Vault вирішує прикладну задачу: Money-Vault — це надійний додаток на базі Next.js, призначене для безпечного управління фінансовими даними з використанням передових технологій, таких як AWS S3 для зберігання та Google Cloud Vision для аналізу даних. Воно пропонує динамічний і зручний інтерфейс, заснований на React і Radix UI, для покращення користувацького досвіду.

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

Кейс демонструє підхід до завдань у сфері «Full-stack веб-додатків та дашбордів»: від постановки до здачі з зрозумілою структурою модулів.

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

Рішення

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

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

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

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

UI та клієнт: @radix-ui/react-alert-dialog, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-label, @radix-ui/react-select, @radix-ui/react-separator, @radix-ui/react-slot, @radix-ui/react-toast, lucide-react, react, react-dom, react-hook-form, tailwind-merge, tailwindcss-animate.

Інфраструктура та утиліти: @auth/prisma-adapter, @aws-sdk/client-s3, @aws-sdk/s3-request-presigner, @google-cloud/vision, @hookform/resolvers, @next-auth/prisma-adapter, @prisma/client, antd, class-variance-authority, clsx, countries-list, next, next-auth, openai, shadcn-ui, zod.

Розподіл мов у репозиторії: TypeScript (97.4%), JavaScript (1.7%), CSS (0.9%).

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

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

• @auth/prisma-adapter — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.
• @aws-sdk/client-s3 — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.
• @aws-sdk/s3-request-presigner — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.
• @google-cloud/vision — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.
• @hookform/resolvers — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.
• @next-auth/prisma-adapter — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.
• @prisma/client — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.
• @radix-ui/react-alert-dialog — використано в продуктовій логіці: знижує кількість самописного коду і прискорює додавання нових екранів.

Додатково:

• Інтеграція та використання @auth/prisma-adapter в продуктовій логіці та інтерфейсі.
• Інтеграція та використання @aws-sdk/client-s3 в продуктовій логіці та інтерфейсі.
• Інтеграція та використання @aws-sdk/s3-request-presigner в продуктовій логіці та інтерфейсі.

Результат

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

Код закрито за вимогами замовника; архітектурні рішення та стек описані на цій сторінці для прозорості експертизи та SEO.

Що б покращив

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