Splitting bills with friends on Solana has never been easier.
About • Key Features • Tech Stack • Getting Started • Roadmap • Team
-
Name: Adaobi Ruphina
-
X handle: @Phinnybelle_
-
Github Username: Phinnybelle
-
Name: Faithy Raymond
-
X handle: @Faithy_Raymond
-
Github Username: Rayeberechi
-
Name: Jemimah Ekong
-
X handle: @Keot_jem
-
Github Username: JemimahEkon
Our key innovations for this prototype include:
- Trustless Payments: Instead of one person collecting money, all payments are directed to a central, neutral platform wallet.
- Seamless Web3 UX: Users enter amounts in USD, and the app automatically converts to the correct SOL amount for payment using a live price feed.
- Effortless Payments: Payments are made using Solana Pay QR codes and clickable Phantom Universal Links, which can be used by any Solana wallet.
This repository contains the feature-rich frontend prototype developed for our hackathon demo.
- React.js: For the user interface.
- Tailwind CSS: For styling and a responsive design.
- @solana/web3.js: For Solana address validation.
- Recharts: For creating dynamic spending charts.
- axios: For making API calls to the mock AI server.
- qrcode.react: For generating Solana Pay QR codes.
- Simple Onboarding: A familiar username/password registration and login system.
- Functional Dashboard: A central hub showing real-time balances for "You Owe" and "Total Owed to SolSplit," plus a feed of recent transactions with "Pending" or "Completed" status.
- Full Group Management:
- Create groups with custom names and categories.
- Add or remove members from a group at any time.
- Includes robust Solana wallet address validation to prevent errors and duplicates.
- Complete Bill Splitting Flow:
- Add a bill in USD.
- Split the amount using interactive sliders.
- Confirm the split to view USD and calculated SOL amounts for each member.
- Solana Pay Integration (Devnet):
- Generate unique QR codes for each person's debt.
- Includes clickable "Open in Wallet" and "Copy URL" options using Phantom Universal Links for a seamless experience on both mobile and desktop.
- Transaction Management:
- Click any past transaction to view its details.
- Manually "Mark as Paid" to keep the ledger accurate for off-chain payments.
- Insightful Statistics Page:
- A dynamic bar chart visualizing spending habits.
- Toggle between Daily, Weekly, and Monthly views.
- A scrollable "Full History" of all transactions.
- Mock AI Chat:
- A chat interface that provides "AI" insights based on your actual transaction data.
- Can answer questions like "what is my highest expense?" or "give me a breakdown by group."
Follow these steps to get the project running locally.
- Clone the repository:
git clone https://github.com/Phinnybelle/SolSplit.git
- Navigate to the project directory:
cd SolSplit - Install all the necessary packages:
npm install
- Start the development server:
npm start
Live Demo: https://solsplit-three.vercel.app
Hackathon Submission Link: https://www.hackquest.io/project/eDWkUcdb/invite?user=Faith
- Backend & Database: Integrate a proper backend (e.g., Node.js/Express) with a database (e.g., MongoDB) to persist all user, group, and transaction data.
- On-Chain Transaction Confirmation: Automatically mark payments as "Paid" by listening for confirmed transactions on the Solana blockchain.
- Smart Contract Integration: Move the core logic for groups and ledgers to a Solana Program (smart contract) for full decentralization.
- User Notifications: Implement real-time notifications for payment requests and confirmations.
This project is a collaborative effort by three dedicated developers:
- Phinnybelle: Registration, Login, Navbar, AI Insights Pages
- Faithy: Dashboard, Add Group Modal, Group Details Modal, Profile Modal, Transaction Modal, Confirm Split Pages
- Jemmy: Add Bill, Statistics, Split Bill Pages