/11

Node Dashboard

web3 infrastructure operability interface

Overview

a private dashboard built for people running Huddle01s media nodes. it lets operators log in with their crypto wallets, delegate resources, view their node stats, and see an interactive world map showing node locations. i spent a lot of time making sure Web3 interactions felt snappy and didnt leave users staring at blank loading screens.

Why this existed

running nodes should not feel like reading blockchain logs all day.

How I approached it

i used Wagmi and Viem to build a stable wallet auth flow, adding loading states to each individual action so users knew exactly what was happening. i integrated a 3D dithered world map to show node coordinates geographically, and used React Query to cache and coordinate data coming from both our databases and the blockchain.

What changed

we launched the dashboard for node operators, and the world map became the go-to way for people to see the networks health. i ended up owning large parts of the wallet integrations and dashboard features, helping node operators manage their setup without getting lost.

Year2024

RoleFrontend Engineer · API Contributor

Network3,000+ Nodes

Active Keys1,381+

What I actually owned

·all wallet authentication and session state logic
·wagmi smart contract integration for delegation flows
·dithered world node map visualization
·isolated loading states and error handling for Web3 actions
·next.js routing and server-side fetching setup

What became difficult

·things got messy quickly.
·• wallets disconnect randomly
·• users switch chains
·• blockchain requests are slow
·• loading states mattered a lot

What I learned

web3 users are incredibly sensitive to loading states. if a button doesnt immediately show its doing something after a wallet click, they will click it five more times.

What surprised me

i learned that people panic very quickly when money or wallets are involved.

Before → After

Before

·confusing wallet interactions
·weak loading feedback

After

·cleaner auth flow
·clearer states
·easier onboarding

Small opinion

web3 usually becomes easier once you stop showing users Web3 things.

What I would improve now

i would implement a local indexer or cache for our blockchain queries. fetching directly from public RPC nodes is too unpredictable. i would also make the world node map responsive for mobile devices, even though most node operators use desktop screens.

Random things I remember

·i probably clicked Connect Wallet and signed test messages thousands of times while debugging our login hook.
·we had a bug where the map would spin infinitely if a users browser had hardware acceleration disabled. took us a week to find that out.

What this project says about me

im good at taking confusing Web3 concepts and wrapping them in standard, reliable dashboard UX.

Built with

Next.js

React

TypeScript

Wagmi

React Query

PostgreSQL

Node.js

Domains

Web3 Systems

Infrastructure Visualization

Delegation

Dashboard Design

Project archive: systems engineering case studies

Node Dashboard: project facts

Node Dashboard