Liquid Terminal
The data platform for the HyperLiquid ecosystem: real-time markets, blockchain explorer, analytics, wiki, and community features in one place.
Stack
Next.js 16 (App Router) | React 19 | TypeScript (strict) | Tailwind CSS + shadcn/ui | Zustand | Privy (auth)
Charts use TradingView Lightweight Charts and Recharts, animations use Framer Motion, and data fetching goes through Axios with custom hooks.
Features
- Real-time market data: spot, perps, order books, and price feeds
- Blockchain explorer for transactions, addresses, and liquidations
- Personal dashboard with portfolio and trading history
- Wiki and educational resources
- Web3 authentication via Privy
Getting started
Prerequisites
- Node.js 22+ and pnpm
- The backend API running locally, or a deployed endpoint
Setup
git clone https://github.com/Yaugourt/liquidterminal_front.git
cd liquidterminal_front
pnpm install
cp env.example .env # then fill in the values
pnpm run dev
Open http://localhost:3000.
Scripts
| Command | Description |
|---|
pnpm run dev | Development server (Turbopack, 127.0.0.1:3000) |
pnpm run build | Production build |
pnpm run start | Start the production build |
pnpm run lint | ESLint |
pnpm run visual-check <route> | Screenshot a route at 3 breakpoints and fail on clipping or overflow |
Run both pnpm run build and pnpm run lint before merging: a build can pass while lint fails.
Deploy
Deploy the backend first, then the front: the front calls backend routes that older backends don't have and has no fallback for them. Routes added since the last release: /hyperfolio/* (wallet analytics and /hyperfolio/yield; the backend needs HYPERFOLIO_API_KEY), /market/token-details/:tokenId, /market/holders/:token, /market/twap, /market/revenue/af-buybacks, /defillama/fee-rank, /liquidations/historical/top, the outcome_id filter of /indexer/hip4/markets-enriched, and the quote / bridgeReserve fields of /market/spot rows.
Configuration
Copy env.example to .env:
| Variable | Purpose |
|---|
NEXT_PUBLIC_API | Backend API URL (e.g. http://localhost:3002) |
JWKS_URL, NEXT_PUBLIC_PRIVY_AUDIENCE | Privy authentication |
NEXT_PUBLIC_ENVIRONMENT | development or production |
Architecture
src/
├── app/ # App Router pages (dashboard, explorer, market, wiki...)
├── components/ # Domain-organized components (ui/ = shadcn base)
├── services/ # 4-layer API pattern per domain
├── hooks/ # Custom React hooks
├── store/ # Zustand stores
└── lib/ # Formatting and helpers
Each API service follows a four-layer pattern: api.ts (HTTP calls) -> types.ts (interfaces) -> hooks/ (data fetching) -> components. All calls go through the centralized Axios helpers and the useDataFetching hook.
Documentation
Links
License
MIT. See LICENSE.
