Get started fast
This quickstart guide will have you running Exchange Web locally in just a few steps.
Clone the repository
Clone the Exchange Web repository to your local machine:git clone https://github.com/jogeshwar01/exchange-web.git
cd exchange-web
Install dependencies
Install all required dependencies using your preferred package manager:The project uses Yarn workspaces by default (packageManager: "[email protected]"), but any package manager will work. Start the development server
Launch the dev server with hot module replacement:This runs Turbo’s dev command, which starts the Vite dev server for the web app. Open in your browser
Navigate to the local development URL:You’ll be automatically redirected to /trade/SOL_USDC where you can see the full trading interface. What you’ll see
Once running, you’ll see the Exchange Web trading interface with:
- Market bar - Current price, 24h change, and market stats
- Trading chart - Interactive candlestick chart with timeframe selection
- Order book - Real-time bids and asks with depth visualization
- Swap interface - Form to place buy/sell orders (limit or market)
- Recent trades - Live feed of executed trades
Understanding the trading interface
The main trading page composits several key components:
// From apps/web/src/pages/Trade.tsx:32-48
return (
<div className="bg-main-bg">
<div className="grid grid-rows-[60px_1fr] p-4 sm:p-5 min-h-screen gap-2">
<div className="grid grid-cols-1 lg:grid-cols-[4fr_1fr] gap-2">
<MarketBar market={market as string} />
<NetBar />
</div>
<div className="grid grid-cols-1 lg:grid-cols-[4fr_1fr] gap-2 mt-5 lg:mt-0">
<div className="order-2 lg:order-1">
<TradeInterface market={market as string} />
</div>
<div className="order-1 lg:order-2">
<SwapInterface market={market as string} />
</div>
</div>
</div>
</div>
);
Placing your first order
The swap interface allows you to create orders with real-time calculations:
// From apps/web/src/components/SwapInterface.tsx:29-62
const handleCreateOrder = async () => {
const quantity = Number(size);
if (!quantity || quantity <= 0) {
toast.error("Please enter a valid size greater than zero.");
return;
}
if (orderType === "Limit" && (limitPrice <= 0 || isNaN(limitPrice))) {
toast.error("Please enter a valid limit price.");
return;
}
const side = isBuyMode ? "BUY" : "SELL";
const orderPrice = orderType === "Market" ? currentPrice : limitPrice;
const order: CreateOrder = {
market,
side,
quantity,
price: orderPrice,
userId: localStorage.getItem("user_id") ?? "test_user",
};
try {
const response = await createOrder(order);
console.log("Order created:", response);
toast.success("Order created successfully!");
} catch (error) {
console.error("Error creating order:", error);
toast.error("Error creating order!");
}
};
The app automatically creates a test user on first load and stores the user ID in localStorage.
Next steps
Installation guide
Learn about detailed setup, prerequisites, and troubleshooting
View the source
Explore the full source code on GitHub
