How to Build a Multi-Chain Crypto Portfolio Tracker in 1 Weekend (No Backend Needed)
Tired of checking five different wallets and block explorers? Here's how you can build your own unified crypto dashboard using only frontend tools and free APIs. A hands-on tutorial with Next.js, free blockchain APIs, and Tailwind CSS.
I have tokens on Ethereum. Some on Arbitrum. A few NFTs on Polygon. Every morning I open four different block explorers just to see what I actually own. It's tedious. It's error-prone. And it's completely unnecessary.
Last weekend I built a unified portfolio tracker that pulls balances from multiple chains, calculates total USD value, and displays everything in one clean dashboard. No backend server. No database. Just a Next.js app hitting free APIs, deployed to Vercel for zero cost.
The whole thing took about 12 hours spread across Saturday and Sunday. If you can write basic React, you can do this too.
This tutorial walks through exactly how I built it. Not the sanitized version where everything works perfectly. The real version, with the API quirks I discovered, the rate limit gotchas, and the architecture decisions that actually matter.
There are dozens of portfolio trackers already. Zerion, Zapper, DeBank. They're good. I use them. But they have limitations that drove me to build my own.
First, privacy. Every time you connect your wallet to a third-party tracker, you're trusting them with your complete financial profile. They know exactly what you hold, when you bought it, and what it's worth. Some of these services monetize that data.
Second, customization. I wanted specific features that didn't exist. Real-time alerts when a position drops below a threshold. Custom grouping of assets by strategy. Integration with my own trading signals. No existing tool offered exactly what I needed.
Third, learning. Building something yourself teaches you more than any tutorial. You discover edge cases, understand API limitations, and develop intuition for blockchain data that you can't get from reading documentation.
The tracker I built runs entirely in the browser. Your wallet addresses never touch my server because there is no server. Everything happens client-side, with API keys stored in environment variables that Vercel injects at build time.
After trying several combinations, here's what worked best.
Next.js 14 with the App Router. Server components let you fetch data without exposing API keys to the client. The built-in caching handles rate limits gracefully. And Vercel deployment is literally one click.
Tailwind CSS for styling. No time to waste on CSS architecture for a weekend project. Tailwind lets you move fast and the result looks professional.
Covalent API for multi-chain balance queries. This was the key discovery. Covalent provides a unified API that works across 100+ chains. One API call returns all token balances for an address on a specific chain. The free tier gives you 100,000 credits per month, which is plenty for personal use.
CoinGecko API for price data. Free tier, no API key required for basic endpoints. Rate limited to 10-30 calls per minute depending on endpoint, but that's enough for a portfolio tracker that refreshes every few minutes.
React Query for data fetching and caching. Handles loading states, error states, and background refetching automatically. One less thing to build from scratch.
The architecture has three layers. A chain configuration that defines supported networks. A balance fetcher that queries Covalent. And a price aggregator that enriches balances with USD values from CoinGecko.
Here's the chain configuration. This file defines everything the app needs to know about each supported chain.
The balance fetcher is a server action that queries Covalent. Server actions are perfect here because they run on the server, keeping your API key hidden.
Notice the Promise.allSettled instead of Promise.all. If one chain's API call fails, we still get results from the others. This matters more than you'd think. Blockchain APIs are flaky. Individual chain endpoints go down randomly. Your app should handle partial failures gracefully.
The next: { revalidate: 60 } option tells Next.js to cache responses for 60 seconds. This prevents hammering the API when users refresh repeatedly.
The dashboard component is where everything comes together. It takes the aggregated balance data and renders it in a way that's actually useful.
// components/portfolio-dashboard.tsx
The component uses React Query's staleTime and refetchInterval to balance freshness against API usage. Data is considered fresh for 60 seconds, and automatically refetches every 5 minutes in the background.
Deployment is the easy part. Push your code to GitHub, then connect the repository to Vercel.
The only configuration needed is setting your environment variables in the Vercel dashboard. Add COVALENT_API_KEY with your key. Vercel injects these at build time, so they're never exposed to the client.
The basic tracker works, but there's room for improvement. Here are features I added in the following weeks.
ENS Resolution lets users enter names instead of addresses. The viem library handles this elegantly.
import { createPublicClient, http } from 'viem';import { mainnet } from 'viem/chains';const client = createPublicClient({ chain: mainnet, transport: http()});async function
Portfolio History tracks value over time. Store snapshots in localStorage or IndexedDB, then render a chart with a library like Recharts.
Price Alerts notify you when positions cross thresholds. This requires some kind of persistence and a notification mechanism. The Web Push API works for browser notifications, or you could integrate with Telegram or Discord webhooks.
DeFi Position Tracking is trickier. Protocols like Aave, Compound, and Uniswap have custom ABIs. You need to query their contracts directly to get accurate position data. Moralis and DeBank APIs provide this, but the free tiers are limited.
A portfolio tracker tells you what you own. But in crypto, what you don't own yet often matters more. The coins pumping right now, the tokens accumulating unusual volume, the smart money movements happening before price moves.
This is where dedicated scanning tools come in. EKX.AI's Pre-Pump Scanner monitors on-chain activity patterns across multiple chains simultaneously. It detects unusual wallet behavior, liquidity shifts, and accumulation patterns that historically precede significant price movements.
The scanner won't tell you what to buy. But it surfaces signals that you'd never catch manually scrolling through block explorers. Early signals compound over time. A pattern spotted on Monday might inform a position you take on Wednesday.
Building your own portfolio tracker is the first step toward understanding blockchain data. The next step is knowing what to look for. Automated signal detection tools complement manual tracking by surfacing opportunities you'd otherwise miss.
After building this and sharing it with others, certain issues came up repeatedly.
Rate Limiting hits harder than you expect. CoinGecko's free tier allows maybe 30 requests per minute. If your dashboard queries prices for 50 tokens on load, you'll get throttled. The fix is aggressive caching and batch requests where possible.
Stale Prices confuse users. Covalent's price data can lag by hours. For accurate values, fetch prices separately from CoinGecko and match by contract address. This adds complexity but gives better results.
Missing Tokens happen when new or obscure tokens aren't in Covalent's database. They'll show balances but no price data. Consider falling back to contract calls for token metadata when the API returns incomplete data.
Chain Reorgs can cause temporary inconsistencies. A transaction shows up, then disappears, then reappears. There's not much you can do about this at the application level. Just be aware it happens and don't panic when balances flicker.
The most valuable lesson wasn't technical. It was understanding how blockchain data actually flows through the infrastructure stack.
When you query Covalent for balances, they're not querying the blockchain in real time. They run indexers that process blocks and store the data in traditional databases. Your API call hits their database. This is why data can lag and why different providers show different values for the same address.
Understanding this changes how you think about building crypto applications. You're not reading from a single source of truth. You're reading from someone's interpretation of blockchain state. Multiple data sources help triangulate accuracy.
The weekend project turned into something I use daily. More importantly, it gave me intuition for blockchain data that I couldn't have gotten any other way.
If you build things, you understand things. If you just use tools other people built, you're always dependent on their choices and limitations. This tracker taught me more about multi-chain crypto infrastructure than months of documentation reading.
Build your own tracker. Discover your own edge cases. That's where the real learning happens.
