As a university student, nothing is more frustrating than trying to collect money for a group project or an event. People forget, funds get mixed up, and transparency is zero. I wanted to solve this by building KlassPay, a decentralized split-payment application powered by the Stellar network and Soroban smart contracts.
In this post, I’ll walk you through how I built KlassPay, from the Rust smart contract to a sleek, modern React frontend, and how we recently launched it live onto Stellar Mainnet! 🚀
✨ The Tech Stack
🦀 Smart Contract: Rust (Soroban SDK)
⚛️ Frontend: React, TypeScript, Vite
👛 Wallet Integration: @stellar/freighter-api
☁️ Backend Relayer: Supabase Edge Functions
🎨 Styling: Vanilla CSS with Glassmorphism (Dark & Light Themes)
💡 How KlassPay Works
The core functionality relies on a custom Soroban smart contract live on Mainnet. An organizer creates a new "Bill" with a specific XLM target. The app generates a shareable link that the organizer can send to their classmates.
When a classmate opens the link, they are greeted by a sleek, gamified quest UI showing the total goal and how much has been funded so far. They connect their Freighter Wallet and pay their share directly into the smart contract. Once the goal is reached, the funds are released to the organizer! Even holding just 1 XLM in your wallet is completely enough to join in and try out the live contract! 🔥
🛡️ Leveling Up: Implementing Gasless Transactions
One of the biggest hurdles for web3 adoption is requiring users to hold native tokens just to pay for network gas fees. I didn't want my classmates to worry about that.
To achieve a "Black Belt" standard of user experience, I implemented Fee Sponsorship using Stellar's FeeBumpTransaction powered by Supabase. When a user submits a payment, the transaction is wrapped and signed by a background "Sponsor Wallet." This means the user pays exactly their share of the bill, and the sponsor wallet automatically handles 100% of the network gas fee!
🌟 What's New: Level 7 Master Track Features
Since our initial launch, we listened to early user feedback and rolled out several exciting updates to make collecting funds even easier:
🎮 Gamified Player Guide: Added an interactive 3-step mission walkthrough right on the homepage so brand-new users know exactly how to use the app without feeling overwhelmed.
📊 One-Click CSV Export: Class treasurers can now download a complete spreadsheet of everyone who contributed to easily track who paid offline.
🇵🇭 GCash Offramp UI: Designed an automated settlement screen that bridges completed contract balances to local Philippine e-wallets like GCash for real-world usability.
🌓 Dark & Light Theme Switcher: Added a toggle switch so students can check class funds comfortably day or night.
🏁 Conclusion
Building KlassPay on Stellar has been an incredible learning experience. Soroban is incredibly fast, and building a polished frontend with React and Vite made deploying to the live Mainnet a breeze.
You can check out the live project here: https://klass-pay.vercel.app/ And view the open-source code on my updated GitHub repo: https://github.com/MarkAngelGuevarra/klass-pay
Top comments (0)