Aurora Bank Mobile Experience

Aurora is a concept mobile banking app built as a PWA. The goal was to make browser-based interactions feel close to native.

Why We Built It

Banking products are unforgiving UX environments. We used this project to stress-test interaction, navigation, and app-state decisions.

• Native-like interactions in React + TypeScript
• Gesture-heavy overlays in a browser shell
• Stable state and persistence without heavy routing libraries

Experience Highlights

• Accounts overview with mock balances and spend summaries
• Card controls including lock, limits, and quick actions
• Payment flows for contacts, PayID, and BSB with receipts
• Gesture-driven sheets with drag thresholds and transitions
• Local demo admin for editing mock data

How It’s Built

Stack

• React 19 + TypeScript with Vite 6.
• vite-plugin-pwa handles the service worker, offline cache, and install flow.
• Utility CSS relies on custom properties rather than runtime Tailwind.

State & Data

• AppContext stores user/accounts/cards/transactions data.
• Dashboard totals are derived from transaction state.
• LocalStorage keeps demo sessions persistent.

Navigation & Interaction

• Custom hooks control navigation and overlay interactions.
• Shared gesture logic is reused across flows.
• Scroll locking keeps background screens stable under sheets.

Animation Basics

• Shared animation constants control blur, scale, and velocity.
• Thresholds adapt to viewport size.

Fictional by Design

• Aurora Bank is fictional; synthetic datasets live in data/mockData.ts.
• No real banking credentials, transactions, or customer information are used.
• Visual references nod to Commonwealth Bank but are not affiliated.
• The project exists as a frontend engineering and UX case study.

What We Took Away

• Native-feel browser UX is possible, but interaction details matter.
• PWA install/offline works well with disciplined caching.
• Mock-data-first development sped up modelling and testing.

TL;DR

Aurora is a concept fintech PWA that focuses on polished mobile interactions, realistic payment journeys, and safe mock-data workflows.