NFTBubbles

Inspiration

Tracking NFT trends across Base felt too abstract for casual users, so we turned the data into a playful visual—bubbles that capture the day’s market mood at a glance.

What it does

NFT Bubbles charts 24‑hour floor‑price changes for Base collections. Each collection is a bubble whose size reflects the magnitude of the move and whose color (green/red) shows direction, letting users instantly spot winners and losers. The app doubles as a Farcaster mini‑app, so it launches directly inside the social feed.

How we built it

We used Next.js (App Router, TypeScript) for the frontend and D3 to simulate bubble physics and positioning. Base MiniKit provides Farcaster integration and chain configuration, while mock data in filtered_collections.csv powers the initial demo (ready to swap for a real API). The layout is fully responsive, with MiniKitProvider handling Farcaster frame readiness and manifest routing.

Challenges we ran into

• Getting D3 bubbles to center consistently on different screen sizes required tuning forces and clamping logic.
• Farcaster mini‑app metadata and manifest routes had to be configured precisely to show the “Launch” button in‑feed.
• Managing environment variables for both local and deployed environments added extra setup steps.

Accomplishments that we're proud of

• A smooth bubble chart that feels lively and intuitive on any device.
• One‑click Farcaster mini‑app deployment via Base MiniKit.

What we learned

• Best practices for mixing D3’s imperative style with React/Next’s declarative components.
• How Farcaster frames, manifests, and Base MiniKit tie together for mini‑app experiences.
• Fine‑tuning responsive visuals using ResizeObserver and custom layout logic.

What’s next for NFT Bubbles?

• Connect backend functionalities of fetching data from opensea api to replace mock data with live NFT metrics and add time‑series comparisons.
• Expand beyond floor prices to volume and holder stats.
• Share the mini‑app in Farcaster communities for real‑world feedback.

Built With

Next.js • TypeScript • D3 • Base MiniKit / OnchainKit • Python

Try it out

Farcaster mini‑app: Farcaster app

GitHub: GitHub

Team members:
Danila Novik GitHub Telegram

Heorhi Shtsivel GitHub Telegram

Bounties

• Base Mini Apps Track

Wallet for payouts: EVM 0xC3906d753067918dc75857468d83884c54155259