Frontend Architecture - Next.js Monorepo

Overview

The MyTradeX frontend is built using a modern monorepo architecture with Next.js 14, TypeScript, and shared packages. This architecture enables code reuse, consistent development experience, and efficient builds across multiple platforms.

Monorepo Structure

mytradex-monorepo/
├── apps/                          # Applications
│   ├── customer-web/             # Web trading platform
│   ├── customer-mobile/          # React Native mobile app
│   ├── customer-desktop/         # Electron desktop app
│   └── admin-portal/             # Admin dashboard
├── packages/                     # Shared packages
│   ├── api/                      # API client and types
│   ├── hooks/                    # React hooks
│   ├── types/                    # TypeScript type definitions
│   └── ui/                       # Shared UI components
├── tools/                        # Development tools
└── root configuration files

Shared Packages Architecture

API Package (`@mytradex/api`)

Location: packages/api/

Purpose: Centralized API client, WebSocket integration, and OpenAPI types

Key Components:

ApiClient: Configurable HTTP client with interceptors
SocketClient: WebSocket management and event handling
OpenAPI generated types and endpoints

// Usage example
import { apiClient } from '@mytradex/api';

const user = await apiClient.get<User>('/users/me');

Features:

Automatic token injection
Request/response interceptors
Error handling and retry logic
Type-safe API calls

Types Package (`@mytradex/types`)

Location: packages/types/

Purpose: Centralized TypeScript type definitions

Type Categories:

User Types: User, Role, Authentication
Order Types: Order, CreateOrderRequest, OrderStatus
Trade Types: Trade, TradeHistory, Settlement
Market Data Types: Symbol, Price, OrderBook
Position Types: Portfolio, Position, P&L

// Type definitions example
export interface Order {
  id: string;
  userId: string;
  symbol: string;
  side: 'buy' | 'sell';
  quantity: number;
  price: number;
  status: OrderStatus;
  filledQuantity?: number;
  createdAt: string;
  updatedAt: string;
}

Hooks Package (`@mytradex/hooks`)

Location: packages/hooks/

Purpose: Reusable React hooks for common functionality

Available Hooks:

useAuth: Authentication state and methods
useOrders: Order management
useMarketData: Market data retrieval
usePositions: Portfolio and positions

// Usage example
import { useAuth } from '@mytradex/hooks';

function TradingDashboard() {
  const { user, isAuthenticated, login } = useAuth();
  // Component logic...
}

UI Package (`@mytradex/ui`)

Location: packages/ui/

Purpose: Design system and shared UI components

Component Library:

Basic Components: Button, Input, Card, Modal, Table
Layout Components: Grid, Flex, Container
Data Components: DataTable, Charts, Forms
Navigation: Tabs, Navigation, Breadcrumb

Design System Features:

Tailwind CSS: Utility-first styling
Variant System: Consistent component variants
Theme Support: Dark/light mode support
Responsive Design: Mobile-first approach
Accessibility: WCAG compliant components

// Component usage example
import { Button, Card } from '@mytradex/ui';

function OrderForm() {
  return (
    <Card title="Place Order">
      <form>
        <Button variant="primary" size="lg">
          Submit Order
        </Button>
      </form>
    </Card>
  );
}

Application Architecture

Customer Web App

Technology Stack:

Framework: Next.js 14 with App Router
Language: TypeScript
Styling: Tailwind CSS
State Management: TanStack React Query
Real-time: Socket.IO Client
Internationalization: next-intl

Architecture Patterns:

App Router Structure:

apps/customer-web/src/app/
├── (auth)/                     # Authenticated routes
│   ├── layout.tsx
│   └── page.tsx
├── (trader)/                   # Trading features
│   ├── layout.tsx
│   ├── dashboard/page.tsx
│   └── orders/page.tsx
├── (admin)/                    # Admin features
│   └── dashboard/page.tsx
├── layout.tsx                  # Root layout
└── providers.tsx               # Context providers

Component Architecture:

Page Components: Route-specific page layouts
Feature Components: Business logic components
UI Components: Reusable design system components
Layout Components: Shared layout structures

State Management:

React Query: Server state management
Local State: Component-level state
Context: Global state (theme, auth)

Customer Mobile App

Technology Stack:

Framework: React Native
Navigation: React Navigation (Stack + Tabs + Drawer)
Language: TypeScript
State Management: React Query
Themes: Context-based theming

Navigation Structure:

src/navigation/
├── AppNavigator.tsx            # Main app navigator
├── AuthNavigator.tsx           # Authentication flow
├── MainTabNavigator.tsx        # Bottom tabs
└── DrawerNavigator.tsx         # Side drawer

Screen Components:

LoginScreen: Authentication
DashboardScreen: Main trading overview
OrderFormScreen: Order placement
PortfolioScreen: Position management
MarketWatchScreen: Market data

Admin Portal

Technology Stack:

Framework: Next.js (Pages Router)
Authentication: Role-based access control
UI: Shared UI components
Data Management: React Query

Admin Features:

User Management: CRUD operations for users
Audit Logs: System activity monitoring
Risk Monitoring: Real-time risk alerts
Reporting: Generate trading reports

Development Workflow

Build System

Tools:

Package Manager: pnpm
Build System: Turbo (monorepo builds)
Bundler: Vite (for web), Metro (for mobile)
Testing: Jest, React Testing Library, Playwright

Turbo Configuration:

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", "build/**", ".next/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

Code Quality

Tools:

ESLint: Code linting
Prettier: Code formatting
TypeScript: Type checking
Husky: Git hooks

Shared Code Patterns

1. Component Design:

// Shared component pattern
interface ComponentProps {
  title: string;
  children: React.ReactNode;
}

export const Component: React.FC<ComponentProps> = ({ title, children }) => {
  return (
    <Card title={title}>
      {children}
    </Card>
  );
};

2. Hook Patterns:

// Custom hook pattern
export const useFeature = (params: FeatureParams) => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['feature', params],
    queryFn: () => featureAPI.getData(params)
  });

  return { data, isLoading, error };
};

3. API Integration:

// API integration pattern
export const featureAPI = {
  getData: (params: Params) =>
    apiClient.get<FeatureData>('/feature', { params }),
  
  createData: (data: CreateData) =>
    apiClient.post<FeatureData>('/feature', data),
  
  updateData: (id: string, data: UpdateData) =>
    apiClient.patch<FeatureData>(`/feature/${id}`, data)
};

Performance Optimization

Code Splitting

Route-based Splitting:

Next.js automatic code splitting per route
Dynamic imports for large components
Lazy loading for non-critical features

Component-based Splitting:

React.lazy for large components
Suspense boundaries
Bundle analysis for optimization

Caching Strategy

React Query Caching:

Intelligent cache invalidation
Background refetching
Optimistic updates
Offline support

Web Performance:

Image optimization (Next.js)
Font optimization
Bundle size optimization
Critical CSS inlining

Real-time Performance

WebSocket Optimization:

Connection pooling
Message batching
Automatic reconnection
Backpressure handling

Testing Strategy

Unit Testing

Testing Framework: Jest + React Testing Library Coverage Areas:

Component rendering
Hook functionality
Utility functions
API integration

Integration Testing

Tools: Playwright for E2E testing Test Scenarios:

User workflows
Cross-platform compatibility
Performance benchmarks
Accessibility testing

Deployment Architecture

Build Process

Web App:

# Build for production
pnpm build:web

# Output: .next/ directory

Mobile App:

# Build for iOS/Android
pnpm build:mobile

Package Publishing:

# Publish shared packages
pnpm publish:packages

Environment Configuration

Environment Variables:

# API Configuration
NEXT_PUBLIC_API_URL=https://api.mytradex.id/v1
NEXT_PUBLIC_WS_URL=wss://api.mytradex.id/ws

# Feature Flags
NEXT_PUBLIC_ENABLE_ANALYTICS=true
NEXT_PUBLIC_ENABLE_DEBUG=false

Next: Backend Architecture

Continue to Backend Architecture for detailed microservices documentation.

Overview​

Monorepo Structure​

Shared Packages Architecture​

API Package (@mytradex/api)​

Types Package (@mytradex/types)​

Hooks Package (@mytradex/hooks)​

UI Package (@mytradex/ui)​

Application Architecture​

Customer Web App​

Customer Mobile App​

Admin Portal​

Development Workflow​

Build System​

Code Quality​

Shared Code Patterns​

Performance Optimization​

Code Splitting​

Caching Strategy​

Real-time Performance​

Testing Strategy​

Unit Testing​

Integration Testing​

Deployment Architecture​

Build Process​

Environment Configuration​

Next: Backend Architecture​

Overview

Monorepo Structure

Shared Packages Architecture

API Package (`@mytradex/api`)

Types Package (`@mytradex/types`)

Hooks Package (`@mytradex/hooks`)

UI Package (`@mytradex/ui`)

Application Architecture

Customer Web App

Customer Mobile App

Admin Portal

Development Workflow

Build System

Code Quality

Shared Code Patterns

Performance Optimization

Code Splitting

Caching Strategy

Real-time Performance

Testing Strategy

Unit Testing

Integration Testing

Deployment Architecture

Build Process

Environment Configuration

Next: Backend Architecture