Project Description & Details

Задача

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 сценариев — профилирование узких мест и кеширование справочников.