Community Specific UI for Steem Communities .

in Steem Dev14 hours ago

I was looking into how to add more monetization in Steem communities and came up with a small development I am calling Community UI. The concept is that communities can have their own UI and have added monetization there which can be shared with content contributors and community members.

So I built a small UI that each community can use.

image.png

I built this one for World of Xpilar and will soon open source it in a following post after I fix a few bugs.

Please have a look at https://worldofxpilar.com/

It has Posts, Polls, and Forums — but all three are Steem posts, just shared differently.


What is Built

The site is a full community platform that talks directly to the Steem blockchain. No middleman, no custodial keys. Here is what is inside:

  • Posts Feed — Trending, Hot, Latest, and Payout tabs. All fetched live from the Steem blockchain using bridge.get_ranked_posts for the hive-185836 community.
  • Polls — Create a poll, it gets written to Supabase for fast reads and broadcast to Steem as a post at the same time. Votes are recorded in the database, indexed to the on-chain permlink.
  • Forums — Structured discussion threads, same dual-publish pattern. Threads are tagged wox_type: 'forum_thread' in json_metadata so they can be identified anywhere on the chain.
  • Community Chat — Real-time public channel and private DMs powered by Supabase Realtime, with moderation tools (mute, pin, delete).
  • Wallet — View STEEM and SBD balances.
  • Voting — Upvote with a weight slider (1–100%), downvote, or remove a vote. All signed and broadcast directly to the chain.

How the Blockchain Integration Works

Dual Authentication

There are two ways to log in and both reach the same place:

Steem Keychain — if you have the browser extension, the app never touches your private key. You sign a timestamped message through the extension popup. The signature is verified and a session JWT is issued.

Posting Key — you paste your WIF posting key directly. The key is verified locally against your account's public keys fetched from the chain. It is stored only in sessionStorage (cleared when you close the browser) and never sent to a server. Signing happens in the browser using the @noble/secp256k1 library.

Both methods call a Supabase Edge Function that issues a signed JWT for the session.

Transaction Signing

For votes, posts, polls, and forum threads the signing pipeline is:

  1. Fetch dynamic_global_properties from the chain (block reference + timestamp)
  2. Serialize the operation into Steem's binary format
  3. SHA-256 hash the serialized bytes with the chain ID prefix
  4. Sign with secp256k1 (lowS: true as required by Steem)
  5. Broadcast via condenser_api.broadcast_transaction_synchronous

If you use Keychain, steps 2–4 happen inside the extension instead.

RPC Racing

All RPC calls fire against multiple nodes at the same time using Promise.any. The first successful response wins. This means if one node is slow or down, the app does not wait — it just uses whichever node responds first. The nodes are configurable per deployment via environment variable, so any community using this can point it at their preferred nodes.

Post Type Detection

All three content types live on-chain as Steem comment operations. The UI tells them apart using json_metadata:

TypeIdentifier
Regular Postapp: 'worldofxpilar/1.0'
Pollpolls array present
Forum Threadwox_type: 'forum_thread'

This means content created here is readable by any other Steem front-end and is permanently on-chain.


Monetization

The monetization is the Steem reward pool + Goolge Advertisements nothing new invented there. What the Community UI adds on top:

The idea is that by having their own UI, communities get a place to configure and display these Ads.

SEO and Social Sharing

A Netlify Edge Function intercepts requests from social crawlers (Twitter, Discord, Telegram, LinkedIn, Facebook, etc.) and returns pre-rendered HTML with full Open Graph and Twitter Card meta tags. For regular users, the React SPA loads as normal. For bots, they get a static page with the post title, description, and cover image — so links to posts, polls, and forums look correct when shared.


Tech Stack (for the curious)

LayerTechnology
FrontendReact 18 + TypeScript + Vite
UITailwind CSS + Shadcn UI (Radix primitives)
StateZustand (auth) + TanStack Query (data)
Blockchain signing@noble/secp256k1 + @noble/hashes + bs58
Database / RealtimeSupabase (PostgreSQL + Realtime + Edge Functions)
Hosting / EdgeNetlify + Netlify Edge Functions
AnimationsFramer Motion

What is Next

I want to open source this so any Steem community can spin up their own version with their own branding, their own RPC nodes, and their own beneficiary configuration. The goal is to make it easy to deploy — change an environment variable for your community ID and you have a working community UI pointed at your community's posts.

I will post the repo link once I clean up a few things.

Would love feedback on:

Sort:  
 11 hours ago 

The Code once open sourced will Live on this Repo -> https://github.com/blazeapps007/SteemCommunityUI