Tech Stack

Frameworks, libraries, and conventions used across the Qatar Exchange dashboard.

Modules10

API Endpoints133

Cross-Module Links19

Base URLmarketmaker-app.111dimtech.com

Next.js 16

App Router

React 19

Server Components

TypeScript 5

Strict mode

Tailwind CSS 4

Untitled UI tokens

Key Patterns

Path alias:@/* for all imports

Data fetching:React Query with polling

Toasts:import { toast } from 'sonner'

Class merge:clsx + tailwind-merge

Optimistic updates:onMutate/onError rollback

Design system:Untitled UI (8pt grid, Inter font)

Client components:"use client" for hooks/state

API client:apiFetch<T> with JWT auth

Icons:lucide-react with size prop

Animations:Framer Motion 12

Real-time:WebSocket + SSE for live data

Primary color:Qatar Maroon #8A1538

Framework & Language

Next.jsv16

App Router framework — pages, layouts, routing

Reactv19

UI component library

TypeScriptv5

Type-safe JavaScript

Data & Real-time

@tanstack/react-queryv5

Server state management: caching, polling, optimistic updates

EventSource (SSE)native

Live session streaming from backend

WebSocketnative

Real-time trading logs and market data

UI & Visualization

Tailwind CSSv4

Utility-first styling with custom design tokens

Rechartsv3.5

All chart rendering: P&L, inventory, latency, distribution

Framer Motionv12

Animations: modals, drawers, transitions, pipeline diagrams

Lucide Reactlatest

Icon library (200+ icons used throughout)

Sonnerlatest

Toast notifications for user feedback

react-day-pickerlatest

Calendar date picker component

Utilities

date-fnslatest

Date formatting and arithmetic helpers

clsx + tailwind-mergelatest

Class-name composition for component variants

zod (recommended)TBD

Runtime schema validation at network boundaries (R1 remediation)