Task

Money Vault addresses a practical problem: Money-Vault is a reliable Next.js application designed for the secure management of financial data using advanced technologies such as AWS S3 for storage and Google Cloud Vision for data analysis. It offers a dynamic and user-friendly interface based on React and Radix UI to enhance the user experience.

The project is part of commercial development and is actively being worked on. It is related to services: Full-stack web applications and dashboards.

The case demonstrates the approach to tasks in the area of "Full-stack web applications and dashboards": from setting objectives to delivery with a clear module structure.

Before starting, we established readiness criteria: a clear first screen, predictable form errors, and the ability to make improvements without rewriting half of the codebase.

Solution

A closed commercial tool has been implemented: the interface and logic are tailored to everyday user scenarios, without unnecessary screens.

The scenarios are designed so that the main actions fit within one or two screens: fewer switches, fewer input errors. Navigation and field labels are aligned with familiar patterns—users do not need to "learn the interface".

Particular attention is paid to loading states and empty lists: skeleton/spinner where data is fetched asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: @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.

Infrastructure and utilities: @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.

The distribution of languages in the repository: TypeScript (97.4%), JavaScript (1.7%), CSS (0.9%).

The layers are separated so that the UI is unaware of transport details: API/storage adapters, domain types, presentation components. This simplifies backend replacement and targeted UX adjustments.

Key features

• @auth/prisma-adapter — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @aws-sdk/client-s3 — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @aws-sdk/s3-request-presigner — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @google-cloud/vision — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @hookform/resolvers — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @next-auth/prisma-adapter — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @prisma/client — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• @radix-ui/react-alert-dialog — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of @auth/prisma-adapter in product logic and interface.
• Integration and use of @aws-sdk/client-s3 in product logic and interface.
• Integration and use of @aws-sdk/s3-request-presigner in product logic and interface.

Result

The MVP already covers the key scenario; next steps include expanding reporting, testing, and monitoring.

The code is closed per client requirements; architectural decisions and stack are described on this page for transparency of expertise and SEO.

What I would improve

The next step is observability (logs/metrics), automated regression tests, and API documentation for integrators. For high-load scenarios—profiling bottlenecks and caching reference data.