This is a submission for Weekend Challenge: Earth Day Edition
What I Built
The Solana Green Dashboard is a data visualization web app that tells the environmental
story of the Solana blockchain. Instead of just showing numbers, it presents Solana's
energy efficiency as a visual narrative — comparing it against Ethereum and Bitcoin in
a way that's easy to understand for anyone, not just crypto people.
The dashboard pulls live transaction data directly from the Solana mainnet and displays
it alongside static environmental benchmarks sourced from the Solana Foundation and the
Cambridge Bitcoin Electricity Consumption Index. The goal was simple: show that not all
blockchains are created equal when it comes to their impact on the planet.
It covers four key areas. First, live network performance showing real transactions per
second updating every 10 seconds. Second, energy consumption comparing how much power
each blockchain uses per transaction. Third, carbon footprint showing CO₂ emissions
across Solana, Ethereum and Bitcoin. Fourth, a CO₂ saved counter showing the estimated
carbon saved per million transactions compared to Bitcoin.
Demo
🌍 Live Site: https://solana-green-dashboard.onrender.com
Code
How I Built It
The entire project is built with pure HTML, CSS and vanilla JavaScript — no frameworks,
no build tools, no npm. Just files you can open directly in a browser.
The frontend uses Playfair Display for headings to give it an editorial magazine feel,
mixed with Inter for body text. The layout is a single scrollable page where charts and
text alternate section by section, rather than cramming everything into one grid. The
color palette is warm — beige, brown and forest green — intentionally chosen to feel
earthy and grounded.
For the Solana integration, I used the Helius RPC endpoint to call
getRecentPerformanceSamples via a standard JSON-RPC POST request. This returns the last
10 performance samples from the Solana mainnet. Each sample contains numTransactions and
samplePeriodSecs, so TPS is calculated as numTransactions divided by samplePeriodSecs.
The chart refreshes every 10 seconds with the latest data. If the RPC call ever fails,
the dashboard falls back to realistic mock data so the page never breaks.
Charts are powered by Chart.js loaded via CDN. The energy comparison uses a logarithmic
scale because the difference between Solana and Bitcoin is so large that a normal scale
would make Solana's bar invisible. That design decision alone tells the environmental
story better than any paragraph could.
One interesting challenge was CORS. The default public Solana RPC endpoint blocks browser
fetch requests, so I had to switch to Helius which supports browser-based calls. This is
something worth knowing if you are building any frontend Solana app.
The scroll animations use the Intersection Observer API — sections fade in as you scroll
down, which makes the page feel like you are reading through a story rather than landing
on a static dashboard.
Prize Categories
Best Use of Solana — The project uses the Solana mainnet RPC to fetch live network
performance data directly in the browser using vanilla JavaScript. The getRecentPerformanceSamples
method is called every 10 seconds and the results are parsed and visualized in a live
updating line chart, making Solana data the core of the entire dashboard experience.
Top comments (0)