Skip to main content

​
Project Structure

The Maybern frontend follows a feature-based organization pattern for scalability and maintainability.

​
Top-Level Structure

frontend/
├── src/
│   ├── app/              # Application shell
│   ├── features/         # Feature modules
│   ├── shared/           # Shared code
│   ├── gen/              # Generated code
│   ├── stories/          # Storybook stories
│   └── theme/            # Chakra theme
├── buildSrc/             # Code generators
├── public/               # Static assets
├── scripts/              # Build scripts
└── package.json

​
Application Shell (src/app/)

Core application setup: 
app/
├── App.tsx               # Root component
├── AppRoutes.tsx         # Top-level routing
├── AppProviders.tsx      # Provider composition
├── AppLayout.tsx         # Main layout
└── store/                # Global state

​
Features (src/features/)

Each feature is self-contained: 
features/
├── fund-family/          # Fund family management
│   ├── FundFamilyPage.tsx
│   ├── FundFamilyRoutes.tsx
│   ├── components/
│   ├── hooks/
│   └── schemas/
├── capital-activity/     # Capital calls, distributions
├── fees/                 # Fee management
├── investments/          # Investment tracking
├── closings/             # Fund closings
├── waterfalls/           # Distribution waterfalls
├── financial-reporting/  # Reports and metrics
├── settings/             # Fund configuration
├── auth/                 # Authentication
└── ...

​
Feature Module Pattern

feature-name/
├── FeatureNamePage.tsx         # Main page component
├── FeatureNameRoutes.tsx       # Route definitions
├── components/                 # Feature-specific components
│   ├── FeatureTable.tsx
│   └── FeatureModal.tsx
├── hooks/                      # Custom hooks
│   └── useFeatureData.ts
├── schemas/                    # Validation schemas
│   └── featureSchemas.ts
└── utils/                      # Utilities
    └── featureHelpers.ts

​
Shared Code (src/shared/)

Reusable across features: 
shared/
├── components/           # UI components
│   ├── forms/            # Form components
│   ├── tables/           # Table components
│   ├── layout/           # Layout components
│   └── inputs/           # Input components
├── hooks/                # Shared hooks
├── utils/                # Utility functions
├── api/                  # API layer setup
└── types/                # Shared TypeScript types

​
Generated Code (src/gen/)

Auto-generated, do not edit: 
gen/
├── api/                  # Orval-generated API clients
│   ├── models/           # TypeScript types
│   └── endpoints/        # API functions
├── formulas/             # MXL parser
│   ├── formulas.parser.ts
│   └── mxl-functions.ts
└── routes/               # Typesafe routes

​
Theme (src/theme/)

Chakra UI customization: 
theme/
├── index.ts              # Theme export
├── colors.ts             # Color palette
├── components/           # Component overrides
├── foundations/          # Base styles
└── tokens/               # Design tokens

​
Build Scripts (buildSrc/)

Code generation: 
buildSrc/
├── mxl-gen.ts                  # MXL parser generator
├── orval-loader-generator.ts   # API loader generation
├── orval-zod-client.ts         # Zod schema generation
└── typesafe-routes-gen.ts      # Route generation

​
Key Files

FilePurpose
vite.config.tsVite configuration
tsconfig.jsonTypeScript configuration
orval.config.tsAPI client generation
.nvmrcNode.js version
.envrcEnvironment variables

​
Import Aliases

Configured in tsconfig.json: 
import { Button } from "@/shared/components";
import { useFundFamily } from "@/features/fund-family";
import { FundFamilyApi } from "@/gen/api";

​
Best Practices

  • Keep related code together in features
  • Features should be self-contained
  • Minimize cross-feature imports
  • Use shared code for truly common utilities
  • One component per file
  • Co-locate styles with components (Chakra)
  • Export from index files for clean imports
  • Never edit src/gen/ files
  • Regenerate with pnpm gen after API changes
  • Check generated files into source control

Frontend Overview

General architecture.

Shared Components

Component library.