Frontend Setup

Guide for setting up and running the QsnDEX Next.js frontend locally.

Prerequisites

• Node.js 20 or later

Installation

cd frontend
npm install

Development

Start the development server with hot reload:

npm run dev

The application is available at http://localhost:3000.

Production Build

npm run build
npm start

This creates an optimized production build and serves it on port 3000.

Linting

npm run lint

Key Configuration Files

File	Purpose
next.config.ts	Next.js configuration (rewrites, image domains, etc.)
tailwind.config.ts	TailwindCSS theme configuration
wagmi.ts	Wagmi chain and connector configuration
tsconfig.json	TypeScript compiler options

Theme

QsnDEX uses the Obsidian Gold dark theme as its default appearance. The design system features dark backgrounds with gold accent colors. An optional light theme is available and can be toggled by the user in the interface.

Key theme characteristics:

• Dark mode (default): Deep dark backgrounds (#0a0a0a, #111111) with gold accents (#d4a843, #f5d77a)
• Light mode (optional): Clean light backgrounds with adjusted contrast
• Typography: System font stack with monospace for numerical data
• Animations: Framer Motion for page transitions and micro-interactions

Connecting to the Backend

By default, the frontend proxies API requests to http://localhost:8080. This is configured in next.config.ts via rewrites. For production, update the API base URL to point to the deployed backend.

Environment Variables

Frontend environment variables are prefixed with NEXT_PUBLIC_:

Variable	Description
NEXT_PUBLIC_API_URL	Backend API base URL
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID	WalletConnect project ID for wallet connections