Build a simple dashboard in the browser

The Scenario

So far, you’ve been reading Solana data from the terminal. That’s useful for scripts and debugging, but most users interact with data through a browser. Today, you’re going to take what you built on Days 8 and 9 and move it into a web page.

In web2 terms, you’ve been running backend scripts. Now you’re building a frontend that calls the same API and renders the results in HTML.

The Challenge

Build a simple web dashboard that displays an address’s SOL balance and its 5 most recent transactions. The page should allow the user to enter any Solana devnet address and fetch data on demand.

What You’ll Need

Node.js
A terminal
A code editor

Steps

Create a new project using Vite (a lightweight dev server and build tool):

npm create vite@latest day-10-dashboard -- --template vanilla
cd day-10-dashboard
npm install
npm install @solana/kit

Replace the contents of index.html with what you find at this gist: https://gist.github.com/matthewrevell/718155afc2cf67a2ac04e983a0804488

Replace the contents of main.js with what you find in this gist: https://gist.github.com/matthewrevell/d0e77b79dc24317cec7c2760b9244ebb

Run It

Start the dev server:

npm run dev

Open the URL that Vite prints (usually http://localhost:5173). You should see a page with an input field pre-filled with the Token-2022 program address. Click “Fetch Data,” and the balance and recent transactions will appear on the page. Try pasting a different devnet address to see different results.

What Just Happened

You moved your Solana data fetching from a terminal script into a browser application. The RPC calls are the same ones you wrote on Days 8 and 9. The only difference is where the results end up: in a web page instead of console.log.

A few things to notice:

The same @solana/kit package works in both Node and the browser. Vite handles bundling it for you. The RPC calls, the address() helper, and the response shapes are all identical to what you used in your terminal scripts.

The dashboard accepts any valid Solana address. Try looking up addresses you find on Solana Explorer. Some will have balances and transactions, some won’t. That’s normal. Not every address has activity on devnet.

Error handling matters more in a browser context. In a terminal script, a crash prints a stack trace, and you move on. In a web app, you need to catch errors and show the user something useful. The try/catch around the fetch calls handles bad addresses and network errors gracefully.

Resources

Submission

Share a screenshot of your dashboard showing a balance and transaction list for any devnet address.