Next.js · Firebase · CoinGecko API

Crypto Crossing

Market
Tracker

A personal crypto dashboard built for fun: track your portfolio, browse a live market overview similar to CoinGecko or CoinMarketCap, and stay up to date with a curated crypto newsfeed, all powered by the CoinGecko API and Firebase.

RoleSolo Dev Project
StackNext.js · Firebase · CoinGecko API
StatusPersonal Project
Portfolio · Overview live
Total Value $24,831.06
+$1,204.22 (5.1%)
Holdings
Bitcoin 0.2341 BTC
$14,280.10 +3.2%
Ξ
Ethereum 2.81 ETH
$7,612.44 +8.7%
Solana 18.5 SOL
$2,938.52 −1.4%
7d portfolio trend
Scroll
Portfolio.tsx · Holdings
Search coin…
+ Add
Coin Amount Value 24h
BTC
0.2341 $14,280 +3.2%
ETH
2.81 $7,612 +8.7%
SOL
18.5 $2,938 −1.4%
LINK
45.0 $0 +2.1%
Total $24,831.06 +5.1% today
01
Portfolio · Firebase · CoinGecko

Track holdings
in real time.

Add coins to your portfolio and watch the value update. Each holding lives in Firebase: the CoinGecko API fills in current price and 24h/7d/30d change, synced automatically on load and again with one tap of the refresh icon.

Each holding shows an allocation bar for its share of the total. Totals, gains/losses, and per-coin allocation percentages are all derived client-side from the live price feed, then written back to Firestore.

Firebase Each user's coins live in a Firestore subcollection (profiles/[uid]/coins): one document per coin with amount and current value. Firebase Auth (email/password or anonymous guest) gates access to a user's own data.
Live prices CoinGecko's /coins/markets endpoint pulls the full top-500 list; held coins are matched against it and written back to Firestore. Sync runs once automatically on load, then on demand via the refresh icon, with no background polling.
Allocation bars Each holding renders a percentage bar for its share of total portfolio value, computed live as that coin's value over the portfolio total.
Client math All totals, gains/losses, and allocation percentages are calculated in the browser from the raw price + amount data. Keeps the data layer simple.
02
Newsfeed · Firestore · Next.js

Crypto news,
no noise.

A curated newsfeed of hand-picked articles lives in Firestore, split into three collections: general, Bitcoin, and alt coins. Each entry shows a thumbnail, title, source, and short excerpt, linking out to the original article.

The three categories are split into tabs (Bitcoin, General, Alt Coins) using Headless UI, so it's easy to jump straight to Bitcoin-specific or alt-coin news without wading through everything else.

Firestore-backed Articles are curated documents in Firestore (news/general, news/bitcoin, news/alts), fetched client-side with getDocs, with no external news API or scraping involved.
Article cards Each entry displays a thumbnail, headline, source name, and short excerpt. Click through to read the full piece on the original site.
Categories Three Firestore collections (general, bitcoin, and alts) power three tabs you can switch between instantly, each with its own loading and empty state.
Sources Source name is shown next to each headline. Clicking the thumbnail or title opens the original article in a new tab.
Newsfeed.tsx
Bitcoin General Alt Coins
CoinDesk Bitcoin

Bitcoin Breaks $70K Resistance as ETF Inflows Hit Monthly High

Spot Bitcoin ETFs recorded $842M in net inflows yesterday, pushing BTC past a key technical level for the first time in six weeks.

The Block Alt Coins

Uniswap v4 Hooks Draw Record Developer Activity in First Month

Over 200 hook contracts have been deployed since the v4 launch, with liquidity managers and MEV protection hooks leading usage.

Decrypt General

SEC Delays Decision on Ethereum Staking ETF Applications Again

Market.tsx · Top 500
Market Cap $2.41T
24h Vol $94.2B
BTC Dom 54.1%
# Name Price 24h Mkt Cap
1
Bitcoin BTC
$61,024 +3.2% $1.21T
2
Ethereum ETH
$2,709 +8.7% $325B
3
BNB BNB
$538 −0.8% $78B
4
Solana SOL
$158.8 −1.4% $73B
03
Markets · Top 500 · CoinGecko

Follow the market
like CoinGecko.

A market table listing the top 500 coins by market cap (rank, price, and 24h/7d/30d percent change), paginated across two 250-coin pages pulled from CoinGecko's /coins/markets endpoint. A "Trending Up" carousel above the table surfaces the biggest 30-day gainers.

Rows are color-coded green or red per timeframe so gainers and losers are obvious at a glance. Price precision adapts to magnitude (more decimal places for sub-cent tokens), so both BTC and tiny-cap coins read cleanly in the same table.

Top 500 table CoinGecko's /coins/markets endpoint is called twice (250 coins per page) with a 1-second delay between requests to stay under the free-tier rate limit. A toggle swaps between the two pages.
Adaptive pricing Price formatting scales with magnitude (2 decimals above $1, 3 below $1, more for sub-cent coins), so both BTC and tiny-cap tokens display sensibly.
Trending coins Computed client-side, not from a dedicated endpoint: coins with strong 7d/30d gains are filtered out of the market data and shown in a horizontal carousel.
Page toggle A simple 1–250 / 251–500 toggle swaps the displayed dataset between the two fetched pages without an extra network request.
04
Technical decisions

What I actually
had to figure out.

This was a fun side project built to understand how crypto data platforms work. A few things required more thought than expected.

CoinGecko rate limits

The free CoinGecko API has strict rate limits, and fetching the second page of the top-500 market list would occasionally 429. The fix was simple rather than clever: a hard-coded 1-second delay between the two page requests, plus explicit error logging so a failed second page fails loudly instead of silently blanking the table.

Firebase auth + per-user data

Firebase Auth handles email/password sign-up plus anonymous sign-in for guests who want to try the app without creating an account. Each user's coins live in a profiles/[uid]/coins subcollection, and Firestore security rules enforce that only the authenticated user can read or write their own holdings. No backend, no custom server auth: Firestore rules do all the authorization work.

Keeping price data fresh without hammering the API

Rather than polling in the background, prices sync once automatically the moment both the portfolio and market data have loaded, then again on demand whenever the user taps the refresh icon. That avoids firing unnecessary CoinGecko requests (and rate-limit risk) from a tab that's just sitting open.

crypto-crossing.vercel.app / home
Crypto Crossing home page