Frontend Overview¶

Tech Stack¶

Package	Version	Role
React	19	UI rendering
Vite	8	Dev server, bundler
TypeScript	6	Type checking
Tailwind CSS	4	Utility-first styles (Vite plugin)
Zustand	5	Client-side state stores
React Router	7	SPA routing
`@msgpack/msgpack`	3	Binary WebSocket frame decoding
`@tanstack/react-query`	5	Server state and caching

Decision: Tailwind CSS 4 integrates via the @tailwindcss/vite plugin, not a PostCSS pipeline — configuration is zero-file.

`src/` Directory Layout¶

src/
  components/   Reusable UI pieces (TopBar, BottomNav, modals, charts, cards)
  pages/        Route-level screens (one file per URL path)
  stores/       Zustand state slices (auth, prices, flags, ws, …)
  hooks/        Custom React hooks (useWebSocket, useGoogleAuth, useViewport)
  lib/          API client (api.ts), trade-window logic, theme
  tutorial/     TutorialOverlay and step definitions for the onboarding tour

Build Modes¶

Command	Vite mode	API base URL
`pnpm dev`	development	`/api` (proxied to `localhost:8080`)
`pnpm build:staging`	staging	`https://api.ftljeta.cloud/api`
`pnpm build`	production	`https://prd-api.ftljeta.cloud/api`

The mode constants are inlined at build time and dead branches are tree-shaken, so each bundle ships exactly one URL. See ftl-frontend/src/lib/api.ts for the constants.

Start Dev¶

pnpm install
pnpm dev

The dev server opens at http://localhost:5173.

Warning

The backend must be running before the frontend starts. The api-server must be on :8080 and the ws-server on :8081. pnpm dev proxies /api to :8080 and /ws to :8081 via ftl-frontend/vite.config.ts.

Entry Point¶

ftl-frontend/src/main.tsx renders <App /> inside <BrowserRouter> and <StrictMode>. ftl-frontend/src/App.tsx owns routing, bootstrap, and global modal state.