Skip to main content

​
Frontend Overview

The Maybern frontend is a React/TypeScript application that provides the user interface for fund administration and accounting.

​
Tech Stack

TechnologyPurpose
React 18UI framework
TypeScriptType safety
ViteBuild tool
Chakra UIComponent library
TanStack QueryServer state management
React Router v6Routing
React Hook FormForm handling
AG-GridData tables
StytchAuthentication

​
Project Structure

frontend/
├── src/
│   ├── app/          # App initialization, routing, providers
│   ├── features/     # Feature-based modules
│   ├── shared/       # Reusable components, hooks, utilities
│   ├── gen/          # Auto-generated API clients
│   ├── stories/      # Storybook stories
│   └── theme/        # Chakra UI theme
├── buildSrc/         # Code generation scripts
└── public/           # Static assets

​
Feature-Based Organization

Each feature in src/features/ is self-contained: 
features/
├── fund-family/
│   ├── pages/          # Page components
│   ├── components/     # Feature-specific components
│   ├── hooks/          # Custom hooks
│   ├── schemas/        # Form validation
│   └── routes.tsx      # Route definitions
├── capital-activity/
├── fees/
├── investments/
└── ...

​
Common Commands

# Development
pnpm start                # Start dev server
pnpm start:subdomains     # Start with HTTPS + subdomains

# Testing
pnpm test                 # Run tests
pnpm test:watch           # Watch mode
pnpm typecheck            # Type checking

# Code Generation
pnpm gen                  # Generate all (API + parser)
pnpm gen:api              # Generate API clients

# Quality
pnpm lint                 # Run linting
pnpm lint:fix             # Auto-fix issues

# Storybook
pnpm storybook            # Start Storybook

​
Key Features

API Integration

Auto-generated type-safe API clients from OpenAPI spec using Orval.

Data Tables

Complex data tables with AG-Grid for filtering, sorting, export.

Forms

React Hook Form with Yup/Zod validation and consistent patterns.

Theming

Chakra UI with custom theme for consistent styling.

​
Development Workflow

  1. Start the backend services
  2. Run pnpm gen if API has changed
  3. Start frontend with pnpm start or pnpm start:subdomains
  4. Access at http://localhost:3000 or https://app.maybern.test:3000

Frontend Setup

Set up the frontend for development.

Project Structure

Detailed directory structure.

API Integration

Working with generated API clients.

Components

Shared component library.