Architecture Overview

exchange-web/
├── apps/
│   └── web/              # Main trading application
├── packages/
│   ├── ui/               # Shared UI components
│   ├── eslint-config/    # Shared ESLint configuration
│   └── typescript-config/ # Shared TypeScript configuration
└── turbo.json            # Turborepo configuration

{
  "react": "^18.3.1",
  "react-router-dom": "^6.26.2",
  "lightweight-charts": "^4.2.1",
  "axios": "^1.7.7",
  "sonner": "^1.5.0"
}

apps/web/src/
├── components/           # React components
│   ├── SwapInterface.tsx
│   ├── TradeInterface.tsx
│   ├── Depth.tsx
│   ├── MarketBar.tsx
│   ├── NetBar.tsx
│   ├── depth/
│   └── trade_interface/
├── pages/               # Page components
│   └── Trade.tsx
├── state/               # State management
│   └── TradesProvider.tsx
├── utils/               # Utilities
│   ├── ws_manager.ts    # WebSocket manager
│   ├── chart_manager.ts # Chart management
│   ├── requests.ts      # API requests
│   └── types.ts         # TypeScript types
├── App.tsx              # Root component
└── main.tsx             # Application entry

<div className="grid grid-cols-1 lg:grid-cols-[4fr_1fr] gap-2 mt-5 lg:mt-0">
  <div className="order-2 lg:order-1">
    <TradeInterface market={market as string} />
  </div>
  <div className="order-1 lg:order-2">
    <SwapInterface market={market as string} />
  </div>
</div>

<Routes>
  <Route path="/trade/:market" element={<Trade />} />
  <Route path="*" element={<Navigate to="/trade/SOL_USDC" />} />
</Routes>