When people think about building a banking app, they immediately jump to heavy frameworks and complex backend systems.
I wanted to try something different.
So I built Paybuntu, a premium demo banking app using just Vanilla JavaScript + Firebase.
No React. No backend server.
Just pure logic, structure, and real-time data.
What is Paybuntu?
Paybuntu is a demo banking application that simulates a real digital banking experience.
Users can:
- Manage a virtual wallet
- Transfer funds between accounts
- Pay bills (TV, electricity, data)
- Track transactions in real time
- Customize profiles
- Experience basic security features like PIN and 2FA (simulated)
The goal wasn’t just to “build something”…
It was to build something that feels real.
Tech Stack
- Frontend: HTML5, Vanilla CSS (Glassmorphism UI), Vanilla JavaScript
- Backend (Serverless): Firebase (Auth, Firestore, Hosting, Storage)
- Media: Cloudinary (profile uploads)
- Icons & Fonts: FontAwesome, Google Fonts
How It Works (Architecture)
Authentication Flow
Firebase Auth handles user sessions.
- Protected pages (dashboard/admin) check auth state
- Unauthenticated users are redirected to login
- Session persistence is handled via Firebase + sessionStorage
Real-Time State Management
Instead of manual refreshes, I used Firestore’s onSnapshot:
- Balances update instantly
- Transactions appear in real-time
- The app feels “live” without reloads
Global Control System
I implemented a central config document in Firestore:
- Toggle Maintenance Mode
- Display Broadcast Messages
This made it easy to control app-wide behavior from one place.
Security Flow (Simulated)
- Transaction PIN required before transfers
- Basic 2FA simulation (mock SMS flow)
- Login tracking (device, time, browser)
Key Features
- Virtual wallet with unique account numbers
- Peer-to-peer transfers (with simulated fees)
- Bill payment system (demo mode)
- Real-time transaction history
- Receipt generation + print support
- Admin dashboard for monitoring and control
- Profile avatar upload via Cloudinary
What Went Well
1. Performance
Using Vanilla JS made the app extremely lightweight and fast.
No unnecessary abstractions.
2. Real-Time Experience
Firestore made everything feel instant.
Seeing balances update live without refresh was a big win.
3. UI/UX
I focused heavily on design.
The glassmorphism + dark mode combo made the app feel premium.
4. Serverless Simplicity
No backend server to manage.
Firebase handled scaling and infrastructure.
What I’d Improve
1. Move Logic to Backend
Some critical logic (like transaction fees) is on the client side.
In a real system, this must be moved to Firebase Cloud Functions
2. Code Structure
Core logic is concentrated in large files like dashboard.js.
This will become hard to maintain as the app grows.
3. Firestore Security Rules
Current rules are too open:
js
request.auth != null
You don’t need a heavy stack to build something meaningful.
But…
The simpler your tools, the more disciplined your structure needs to be.
This project taught me more about:
- System thinking
- Real-world app behavior
- Trade-offs between speed and scalability …than most tutorials ever did.
Top comments (0)