Web App

Overview

The web app is built with Next.js 16 and React 19, deployed to Cloudflare Pages. It provides the user-facing interface for posit. Books.

Tech Stack

Directory Structure

apps/web/
├── src/
│   ├── app/             # Next.js App Router pages
│   │   ├── layout.tsx   # Root layout
│   │   ├── page.tsx     # Home page
│   │   └── dashboard/   # Dashboard routes
│   ├── components/      # React components
│   │   ├── ui/          # Primitive UI components
│   │   └── features/    # Feature-specific components
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility functions
│   └── styles/          # Global styles
├── public/              # Static assets
└── next.config.ts       # Next.js configuration

Development

# Start development server
pnpm --filter @posit/web dev

# Build for production
pnpm --filter @posit/web build

# Type check
pnpm --filter @posit/web typecheck

Key Components

Dashboard

Main authenticated view showing positions, PnL, and transaction history.

WalletConnect

Sign-in-with-Solana flow using Privy. Handles wallet connection and authentication.

TransactionTable

Displays parsed transactions with drill-down to raw data.

PositionCard

Shows individual token positions with cost basis and unrealized PnL.

Design System

Follow the UX/UI Design Guide for all UI work:

• Calm density: No neon, no confetti
• Muted colors: Gain green (#2E7D52), Loss red (#A23B3B)
• Monospace numbers: Tabular, decimal-aligned
• Show the work: Every number drillable to source

Environment Variables

The web app uses NEXT_PUBLIC_ prefixed variables for client-side config:

NEXT_PUBLIC_PRIVY_APP_ID=...
NEXT_PUBLIC_SOLANA_RPC_URL=...
NEXT_PUBLIC_API_URL=...