Community Specific UI for Steem Communities โ Now Open Source! ๐
A few days ago, I shared the concept of Community UI โ a way for Steem communities to have their own branded interface with enhanced monetization options that can be shared with contributors and members.
Read the original announcement here
Today, I'm excited to announce that Community UI is now live and open source!
๐ Live Demo: https://worldofxpilar.com
๐ Source Code: https://github.com/blazeapps007/SteemCommunityUI
โจ What's New Since Last Post
- Realtime Optimizations: Improved Supabase Realtime subscriptions for chat and notifications โ reduced latency and connection overhead.
- UI Polish: Fixed responsive layout issues, improved voting slider feedback, and refined dark mode consistency.
- Bug Fixes: Resolved edge cases in poll vote indexing and forum thread pagination.
- Open Source Release: The entire codebase is now publicly available under an MIT license, ready for any Steem community to fork and customize.
๐ Quick Recap: What Is Community UI?
Community UI is a full-featured, blockchain-native platform that lets any Steem community launch their own branded front-end โ no custodial keys, no middleman.
Core Features
| Feature | Description |
|---|---|
| Posts Feed | Trending, Hot, Latest, and Payout tabs powered by bridge.get_ranked_posts |
| Polls | Create polls that publish to Steem and Supabase for fast reads + on-chain permanence |
| Forums | Structured threads tagged via json_metadata (wox_type: 'forum_thread') |
| Community Chat | Real-time public channels + private DMs with moderation tools (mute, pin, delete) |
| Wallet | View STEEM/SBD balances directly from the chain |
| Voting | Upvote (1โ100%), downvote, or remove votes โ all signed and broadcast directly |
๐ Blockchain Integration Highlights
Dual Authentication
- Steem Keychain: Sign via browser extension โ private keys never leave your control.
- Posting Key (WIF): Paste your key locally; stored only in
sessionStorage, signed in-browser using@noble/secp256k1.
Both methods issue a session JWT via a Supabase Edge Function.
Transaction Signing Pipeline
1. Fetch dynamic_global_properties (block ref + timestamp)
2. Serialize operation to Steem binary format
3. SHA-256 hash with chain ID prefix
4. Sign with secp256k1 (lowS: true)
5. Broadcast via condenser_api.broadcast_transaction_synchronous
RPC Racing for Resilience
All RPC calls use Promise.any against multiple nodes. First successful response wins โ no waiting on slow or down nodes. Configurable via environment variables per deployment.
On-Chain Content, Multiple Views
All content lives as standard Steem comment operations. The UI differentiates types via json_metadata:
| Type | Identifier |
|---|---|
| Regular Post | app: 'worldofxpilar/1.0' |
| Poll | polls array present |
| Forum Thread | wox_type: 'forum_thread' |
โ Content created here is readable by any Steem front-end and permanently stored on-chain.
๐ฐ Monetization Model
The monetization leverages:
- Steem Reward Pool: Standard curation and author rewards.
- Google AdSense: Communities can configure and display ads within their own UI.
The Community UI layer adds:
- Custom ad placement controls
- Beneficiary configuration for reward sharing
- Community-specific branding for higher engagement โ higher revenue potential
๐ SEO & Social Sharing
A Netlify Edge Function intercepts social crawler requests (Twitter, Discord, Telegram, LinkedIn, Facebook, etc.) and serves pre-rendered HTML with full Open Graph and Twitter Card meta tags.
โ
Regular users: Load the React SPA as normal
โ
Bots: Receive static HTML with post title, description, and cover image
โ Links to posts, polls, and forums display correctly when shared anywhere.
๐ Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript + Vite |
| UI | Tailwind CSS + Shadcn UI (Radix primitives) |
| State | Zustand (auth) + TanStack Query (data) |
| Blockchain Signing | @noble/secp256k1 + @noble/hashes + bs58 |
| Database / Realtime | Supabase (PostgreSQL + Realtime + Edge Functions) |
| Hosting / Edge | Netlify + Netlify Edge Functions |
| Animations | Framer Motion |
๐งฉ How to Deploy Your Own Community UI
- Fork the repo: github.com/blazeapps007/SteemCommunityUI
- Configure environment variables:
VITE_COMMUNITY_ID=hive-185836 VITE_RPC_NODES=https://api.steemit.com,https://rpc.steemliberator.com VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key VITE_GOOGLE_AD_CLIENT=your_ad_client_id - Deploy to Netlify (or your preferred host)
- Customize branding: Update colors, logos, and metadata in
src/config/branding.ts
That's it โ your community now has its own Steem-native front-end.
๐ค Call for Feedback & Contributions
This is built for the Steem community, by the Steem community. I'd love your input on:
- โจ Features you'd like to see added (NFT galleries? Reputation badges? DAO voting?)
- ๐ก Monetization ideas beyond AdSense + rewards (sponsorships, premium tiers, token-gated content?)
- ๐ Bugs or UX issues at worldofxpilar.com
- ๐ง Code contributions, documentation improvements, or translations
Please open an issue or PR on the GitHub repo, or drop a comment below.
Let's empower every Steem community to own their experience.
Fork, customize, deploy โ and let me know what you build! ๐
Source: github.com/blazeapps007/SteemCommunityUI
If you think my contributions matter and you want to support further development for the STEEM ecosystem, please consider voting for my witness: blaze.apps
๐ณ๏ธ Vote Here:
Vote for blaze.apps Witness