Building Vesta: A Frontend Engineer's Journey from A to Z

1. Understanding the Problem

Before writing a single line of code, I asked myself:

• What are the core user needs?
• How can the frontend make complex investment data digestible?
• Which interactions will make the app feel intuitive and reliable?

From this, I identified key modules:

• Portfolio Dashboard: Displays NAV, YTD returns, and idle cash (dry powder)
• Investments: Explore opportunities, simulate ROI, and view investment details
• Wallet: Deposits, withdrawals, and activity logs
• KYC & User Settings: Streamlined onboarding and configuration

Understanding the problem upfront allowed me to design the UI and data flow in a way that scales.

2. Designing the Architecture

I wanted Vesta's frontend to be modular, reusable, and maintainable. Here's how I structured it:

• Next.js (App Router + TypeScript): Server-side rendering where appropriate, client-side for dynamic interactions
• TailwindCSS + shadcn/ui: For rapid, consistent styling with a clean design system
• React Query: For stateful data fetching, caching, and async updates
• Recharts: For interactive, high-performance charts

I divided the app into features and components:

/features
  /portfolio
    /components
    /hooks
    /services
  /investments
  /wallet
  /kyc
/components
/hooks
/lib/utils

This modular approach made it easy to reuse components across dashboards, apply theme changes globally, and integrate new features.

3. Building the Core Components

Portfolio Dashboard Cards

Each metric (NAV, YTD returns, dry powder) is represented by a card. Considerations:

• Cards are clickable → navigate to a detailed page
• Animations for count-up metrics
• Responsive layout for mobile and desktop
• Light/dark theme support with proper tokenization

Investment Simulations

For projected ROI, I implemented interactive sliders and charts:

• User can adjust deposit amounts and duration
• Charts update in real-time to reflect new projections
• Compounding frequency selection with visual feedback
• Optimistic UI ensures a smooth experience

This required careful state management and efficient rendering.

Wallet & Transaction Logs

• Table with filtering, sorting, and pagination
• Skeleton loaders for asynchronous data
• Responsive, accessible design

KYC & Settings

• Multi-step KYC forms with validation using Zod
• Dynamic status pages (Pending / Approved / Rejected)
• Settings pages with toggles for notifications, appearance, and security

4. Reusable Utilities

To reduce repetition, I built utilities for common tasks:

• Currency formatter: Consistent number formatting across the app
• ROI calculator: Client-side investment projections
• Date formatter: User-friendly dates in tables and charts
• Masked inputs & input sanitizers: Secure and validated user input

These utilities ensured clean, DRY code and better maintainability.

5. Navigation & UX Considerations

• Root pages (Dashboard, Portfolio, Wallet) do not have back buttons
• Detail pages (NAV details, ROI analytics, investment details) include an intuitive back button using Next.js router.back()
• Multi-step navigation respects browser history and fallback routes
• Light/dark theme toggle with proper color contrast and chart adjustments

6. Testing and Iteration

Even as a solo developer, I treated Vesta as a production-grade frontend:

• Tested all components across breakpoints
• Verified data flow and async fetching with mock APIs
• Iterated on charts, filters, and user interactions to optimize UX

7. Lessons Learned

• Modular architecture is king: Breaking features into hooks, services, and components saved time
• UX is as important as data: Even small animations or micro-interactions make the dashboard feel premium
• Theme management matters: Dark mode is easy; light mode needs careful attention to colors and charts
• Frontend-first thinking: Designing the UI to handle real-time, complex data prepares for backend integration

8. Conclusion

Building Vesta from A to Z was a deep dive into modern frontend engineering. From designing reusable components to implementing complex charts, interactive simulations, and theme-aware styling, every decision was driven by performance, usability, and maintainability.

Vesta demonstrates that frontend engineering is not just about coding, it's about thinking through user needs, data flow, and visual storytelling.