# Frontend

The QuickDapp frontend is a React 19 application built with Vite, TypeScript, and TailwindCSS. Web3 integration through RainbowKit and Wagmi is optional—the same codebase works with or without blockchain features.

Vite handles development and production builds with hot module replacement. TailwindCSS v4 provides styling with a dark theme and custom utility classes. Radix UI supplies accessible primitives for dialogs, popovers, and tooltips.

For data fetching, React Query manages server state with caching and background refetching. The GraphQL client uses graphql-request with queries defined in the shared folder.

When Web3 is enabled, RainbowKit provides wallet connection UI and Wagmi supplies React hooks for blockchain interactions. Viem handles the underlying Ethereum operations.

src/client/
├── App.tsx              # Root with provider setup
├── components/          # UI components
├── contexts/            # AuthContext, SocketContext, CookieConsentContext
├── hooks/               # useForm, useTokens, useTokenActions, useNotifications
├── lib/                 # Socket client
├── config/              # Web3 configuration
├── pages/               # Page components
├── styles/              # Tailwind globals
└── utils/               # cn() helper

The App component conditionally wraps content with Web3 providers based on configuration:

// When WEB3_ENABLED=true
<WagmiProvider>
  <QueryClientProvider>
    <RainbowKitProvider>
      <AuthProvider>
        <SocketProvider>
          <ToastProvider>
            {/* routes */}
          </ToastProvider>
        </SocketProvider>
      </AuthProvider>
    </RainbowKitProvider>
  </QueryClientProvider>
</WagmiProvider>

// When WEB3_ENABLED=false
<QueryClientProvider>
  <AuthProvider>
    <SocketProvider>
      <ToastProvider>
        {/* routes */}
      </ToastProvider>
    </SocketProvider>
  </AuthProvider>
</QueryClientProvider>

Components work identically in either mode. The AuthContext switches between SIWE authentication and email/OAuth based on the Web3 flag.

State management uses React Context for global state (auth, sockets, toasts) and React Query for server data. There's no Redux or external state library.

Forms use a custom hook-based validation system in useForm.ts. It supports sync and async validation with debouncing, without external form libraries.

Styling combines TailwindCSS utilities with the cn() helper for conditional classes. CSS Modules handle component-specific styles where needed.

Configuration comes from clientConfig in the shared folder. The build process injects environment values so they're available at runtime.

• Components — UI component library
• Forms — Form handling and validation
• Global — Context providers and global state
• GraphQL — GraphQL client usage
• Static Assets — Serving static files (favicon, fonts, etc.)
• Web3 — Blockchain integration (optional)