Skip to main content

Frontend Architecture

The Beforehand frontend is a React application built with modern tools and patterns.

Tech Stack​

  • React 18.3: UI framework
  • TypeScript: Type safety
  • Vite: Build tool
  • TailwindCSS: Styling
  • shadcn/ui: Component library
  • React Query: Server state
  • React Router: Navigation
  • Privy: Wallet connection

Application Structure​

Pages​

  • Feed: Market listings
  • Market Detail: Individual market view
  • Create Market: Market creation flow
  • Profile: User profiles
  • Communities: Community pages
  • Admin: Admin panel

Components​

  • MarketCard: Market display
  • Trading interface: Buy YES/NO
  • Wallet integration: Privy components
  • Navigation: Desktop and mobile nav

Hooks​

  • useContract: Contract interactions
  • useWallet: Wallet state
  • useFeedMarkets: Market data
  • useUserCommunities: Community data

State Management​

  • React Query: Server state (markets, profiles, etc.)
  • React State: Local UI state
  • Privy: Authentication state
  • Contract State: Read from blockchain

Data Flow​

  1. User action (e.g., place trade)
  2. Frontend prepares transaction
  3. Privy wallet signs transaction
  4. Transaction sent to contract
  5. React Query refetches data
  6. UI updates with new state