Building a Custom Dashboard with LiquidView Data

Why Build Your Own Dashboard?

LiquidView's hosted dashboard gives you instant access to DEX execution cost comparisons across all major perpetual exchanges. But many professional traders and teams eventually reach a point where they want more — custom metrics derived from the raw data, integration with their own portfolio systems, proprietary filtering logic, or a layout tuned to their exact workflow. Building a custom dashboard on top of the LiquidView API is the solution.

A custom dashboard also gives you full control over data freshness and caching. You can tune how often cost data is refreshed to match your trading cadence. If you are a long-term position trader checking costs once per day, you can build a lightweight dashboard that refreshes infrequently and costs almost nothing to run. If you are a high-frequency operator who needs costs updated every few seconds, you can build that too — the API supports it.

This guide walks through three different technical approaches for building a custom LiquidView dashboard: a React/Next.js web application for browser-based monitoring, a Python Streamlit app for internal tooling and analysis, and a terminal-based approach for minimal-overhead monitoring. We cover the architecture, key components, and deployment options for each.

Choosing Your Tech Stack

The right tech stack depends on who will use the dashboard and how. Each option has a different time-to-build, maintenance overhead, and suitability for different audiences.

• React + Next.js (recommended for team dashboards): Best choice when the dashboard needs to be accessed by multiple people via a browser, or when you want to deploy publicly. Next.js provides server-side rendering (which allows you to call LiquidView from the server to avoid CORS issues and hide your API key), built-in API routes, and easy deployment to Vercel. Build time: 2–4 hours for a functional dashboard. Ideal for teams with JavaScript experience.
• Python + Streamlit (recommended for solo analysts): Streamlit turns a Python data analysis script into an interactive web application with almost no additional code. You write normal Python that fetches and processes data, and Streamlit handles the UI rendering, automatic refresh, and hosting. Best for data-centric use cases where you want to incorporate pandas analysis directly. Build time: 1–2 hours. No JavaScript required.
• Python terminal dashboard (recommended for server monitoring): Libraries like rich and curses let you build a structured, color-coded terminal dashboard that refreshes in-place. This is the lightest-weight option — no web server needed, runs over SSH on any server, and has essentially zero resource overhead. Build time: 1 hour. Best for monitoring bots or automated systems where you want a quick status view.

For the remainder of this guide, we focus primarily on the React/Next.js approach since it is the most broadly applicable. The API integration patterns translate directly to Streamlit or any other stack.

Connecting to the LiquidView API Securely

In a browser-based application, you must never expose your LiquidView API key to the client. API keys sent to the browser are visible to anyone who opens developer tools. The correct architecture routes all LiquidView API calls through your own server — Next.js API routes are ideal for this.

• // pages/api/costs.js (Next.js API route)
• export default async function handler(req, res) {
• const { token, size } = req.query;
• const response = await fetch(
• `https://api.liquidview.io/v1/token/${token}?size=${size}`,
• { headers: { Authorization: `Bearer ${process.env.LIQUIDVIEW_API_KEY}` } }
• );
• if (!response.ok) {
• return res.status(response.status).json({ error: "Upstream API error" });
• }
• const data = await response.json();
• res.setHeader("Cache-Control", "s-maxage=10, stale-while-revalidate=30");
• res.status(200).json(data);
• }

This API route acts as a secure proxy. Your LIQUIDVIEW_API_KEY lives in a server-side environment variable (in Vercel: Settings > Environment Variables), never in the browser bundle. The Cache-Control header allows the edge network to cache responses for 10 seconds, reducing both your API usage and dashboard load times.

Building the Core Dashboard Components

A useful DEX execution dashboard needs three core UI components: a token selector, an exchange comparison table, and a cost chart. Each is straightforward to build in React and can be styled to match your preferred aesthetic.

• Token selector: A dropdown or set of buttons that lets you switch between tracked tokens (BTC, ETH, SOL, etc.). On selection, it triggers a new API call to update the comparison table and chart. Implement using React state: const [token, setToken] = useState("BTC").
• Order size input: A numeric input or slider that controls the order size used for cost calculations. Connect it to state and include it as a parameter in your API call. Consider pre-set buttons for common sizes ($5K, $25K, $100K) for faster switching.
• Exchange comparison table: Displays each exchange with columns for fee (bps), spread (bps), price impact (bps), and total all-in cost (bps). Sort by total cost by default. Color-code the lowest row in green and the highest in red for instant visual ranking. Use a sorted array derived from the API response and render with a standard HTML table or a library like TanStack Table.
• Cost bar chart: A horizontal bar chart showing total_cost_bps for each exchange, sorted ascending. This makes relative differences immediately visible in a way a table cannot. Use Chart.js (via react-chartjs-2) or Recharts for easy React integration without heavy dependencies.

• // Minimal exchange comparison table component
• function ExchangeTable({ data }) {
• const sorted = [...data].sort((a, b) => a.total_cost_bps - b.total_cost_bps);
• return (
• <table>
• <thead>
• <tr><th>Exchange</th><th>Fee</th><th>Spread</th><th>Impact</th><th>Total</th></tr>
• </thead>
• <tbody>
• {sorted.map((ex, i) => (
• <tr key={ex.name} style={{ background: i === 0 ? "#d4f7d4" : "white" }}>
• <td>{ex.name}</td>
• <td>{ex.fee_bps.toFixed(2)}</td>
• <td>{ex.spread_bps.toFixed(2)}</td>
• <td>{ex.impact_bps.toFixed(2)}</td>
• <td><strong>{ex.total_cost_bps.toFixed(2)}</strong></td>
• </tr>
• ))}
• </tbody>
• </table>
• );
• }

Implementing Real-Time Updates

For a dashboard that stays current without manual page refreshes, implement automatic polling using React's useEffect and setInterval. The key is to balance freshness with API rate limits and user experience — an update every 10–30 seconds is sufficient for most trading contexts and keeps the interface feeling live without hammering the server.

• useEffect(() => {
• const fetchCosts = async () => {
• const res = await fetch(`/api/costs?token=${token}&size=${size}`);
• const data = await res.json();
• setExchanges(data.exchanges);
• setLastUpdated(new Date());
• };
• fetchCosts(); // Initial fetch on mount or dependency change
• const interval = setInterval(fetchCosts, 15000); // Refresh every 15 seconds
• return () => clearInterval(interval); // Cleanup on unmount
• }, [token, size]); // Re-run when token or size changes

Display the last update time prominently in the dashboard header. This gives users confidence that the data is current and provides a quick diagnostic when something seems stale. A simple "Updated 5 seconds ago" indicator built from the lastUpdated state variable is sufficient.

Deployment Options

Once your dashboard is built, you have several deployment options depending on who needs to access it and what your infrastructure preferences are.

• Vercel (recommended for Next.js): Deploy with a single command — npx vercel. Your Next.js API routes become serverless functions, environment variables are managed in the Vercel dashboard, and the free tier is more than sufficient for a personal trading dashboard with moderate traffic. Custom domains are supported on the free tier.
• Self-hosted on a VPS: For complete control, deploy to any Linux VPS using a Node.js process manager (pm2) and an nginx reverse proxy. This option requires more setup but has no vendor lock-in and allows you to run additional services (like a bot) on the same machine.
• Internal tooling (Streamlit Cloud): If you built with Streamlit, Streamlit Cloud offers free deployment of public apps and simple authentication for private apps. Connect your GitHub repo and it deploys automatically on each push.
• Local development server: For a personal dashboard you only access from your own machine, running npm run dev or streamlit run and accessing localhost:3000 is entirely sufficient. No deployment needed, zero cost, maximum control.

For a trading team with multiple members, Vercel with environment variables set per-deployment is the lowest-friction option. For a solo operator who values simplicity and cost, a locally-running Next.js or Streamlit app accessed on localhost is perfectly functional. The dashboard does not need to be publicly accessible to be useful.