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.
The Tech Stack
- Smart Contract: Rust (Soroban)
- Frontend: React, TypeScript, Vite
- Wallet Integration: @stellar/freighter-api
- Styling: Vanilla CSS with Glassmorphism
How KlassPay Works
The core functionality relies on a custom Soroban smart contract. 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 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!
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. 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 the network fee!
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 the development process a breeze.
You can check out the live project here: https://klass-pay.vercel.app/
And view the open-source code on my GitHub: https://github.com/Markyy0411/klass-pay
Top comments (0)