From Scratch: A Real-Time Banking App Simulation with Firebase (No Frameworks)

etoBLISS — Sat, 21 Mar 2026 08:17:39 +0000

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.

DEV Community: etoBLISS