A Mobile Financial Service (MFS) demo web app built with HTML, Tailwind CSS, DaisyUI, and vanilla JavaScript. Payoo simulates a digital wallet — add money, cash out, transfer funds, redeem bonus coupons, pay bills, and view transaction history — all in a clean, mobile-first interface.
🔗 Live Demo: https://mdboniamin.github.io/Payoo-MFS/ 📁 Repository: https://github.com/Mdboniamin/Payoo-MFS
| Login | Dashboard | Add Money |
|---|---|---|
| Mobile number & PIN login | Balance overview & quick actions | Bank selection & deposit |
| Cash Out | Transfer Money | Pay Bill |
|---|---|---|
| Agent-based withdrawal | Peer-to-peer transfer | Utility bill payments |
- 🔐 Login — Mock authentication using a hardcoded mobile number and 4-digit PIN (for demo purposes only — no real backend or session handling)
- 💰 Add Money — Deposit funds by selecting a bank and entering account number, amount, and PIN
- 💸 Cash Out — Withdraw money via agent number, amount, and PIN, with an insufficient-balance check
- 📤 Transfer Money — Send money to another account number, amount, and PIN
- 🎁 Get Bonus — Redeem a bonus coupon code (
newyear) to add a fixed bonus to your balance - 🧾 Pay Bill — Pay a bill by selecting a billing bank/biller, account number, amount, and PIN
- 📋 Transaction History — Logs each action (Add Money, Withdraw Money, Transfer Money, Pay Bill, Get Bonus) with a timestamp, shown most-recent-first
- 🚪 Log Out — Log out button is present in the UI (not yet wired to functionality)
All balances and transactions live only in memory for the current browser session — refreshing or closing the tab resets everything, since there's no backend or persistent storage.
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | Tailwind CSS |
| UI Components | DaisyUI |
| Logic | JavaScript (Vanilla) |
| Deployment | GitHub Pages |
No build tools or dependencies required — Tailwind CSS and DaisyUI are loaded via CDN.
# Clone the repository
git clone https://github.com/Mdboniamin/Payoo-MFS.git
# Navigate into the project folder
cd Payoo-MFS
# Open in your browser
open index.html
# or just double-click index.html in your file explorerTo log in or authorize any transaction, use:
- Mobile Number:
12345678910 - PIN:
1234
To redeem a bonus, use coupon code: newyear
Payoo-MFS/
├── index.html # Login page
├── home.html # Main dashboard & feature screens
├── payoo.png # App logo
├── assets/ # Icons and images
│ ├── bg.png
│ ├── bonus1.png
│ ├── Group.png
│ ├── money1.png
│ ├── purse1.png
│ ├── send1.png
│ ├── transaction1.png
│ └── wallet1.png
├── js/
│ ├── home.js # Dashboard logic (add money, cash out, transfer, bonus, pay bill, transaction history)
│ └── script.js # Login logic
└── styles/
└── style.css # Custom styles (alongside Tailwind & DaisyUI)
Login (Mobile + PIN)
│
▼
Dashboard
┌────────────────────────────────────────┐
│ Add Money │ Cash Out │ Transfer Money │
│ Get Bonus │ Pay Bill │ Transactions │
└────────────────────────────────────────┘
│
▼
Transaction History (session-only)
- Real backend / API integration
- User registration flow
- Persistent transaction storage (currently resets on page reload)
- Working "Log Out" and "View All" actions
- Input validation for non-numeric / empty fields
- Transaction receipts & PDF export
- Dark mode
- Multi-language support
Contributions, issues, and feature requests are welcome!
- Fork the repository
- Create your feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add your feature' - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
Md Boniamin
- GitHub: @Mdboniamin
This project is open source and available under the MIT License.
⚠️ Disclaimer: Payoo MFS is a demo/educational project built for practicing frontend fundamentals. It does not process real financial transactions, has no backend, and stores no data persistently.