Mobile banking app
Klyro
A mobile banking app for Android, with its own API and database: sign in, check your balance, send money, track spending and manage a virtual card. It is a simulator, so no real money is ever involved.
Scan to installPoint your Android phone’s camera here
01The challenge
Banking apps have to feel instant and trustworthy while the server does careful work behind every tap. Klyro had to show that full journey honestly: a balance you can rely on, transfers that can never be sent twice, and an app that still works when the network is slow or the server is waking up.
02Our approach
We built the backend first: a Django REST API with an append-only ledger, so every balance comes from recorded transactions, and idempotent transfers, so a repeated request can never move money twice. The React Native app sits on top, with short-lived sign-in tokens that refresh themselves, cached data for weak connections, and light and dark themes.
03What we built
- 01Android app built with React Native, Expo and TypeScript
- 02Django REST API with one consistent response and error format
- 03Append-only ledger: balances are calculated from transactions, never edited
- 04Transfers protected against double-sending, with row locking on the server
- 05Secure sign-in with short-lived tokens that refresh automatically
- 06Spending insights by week and month, with top categories
- 07Virtual card with freeze, limit and online-payment controls
- 08Profile photo upload, light and dark mode, and accessibility support
- 09Hosted API (Render) and PostgreSQL database (Neon), with over-the-air app updates
●Screens
Explore the screens
10 screens from the Klyro Android app, in light and dark mode. Select any screen to see it full size, then step through the rest.
-
Welcome Mobile
-
Sign in Mobile
-
Home Mobile
-
Activity Mobile
-
Send money Mobile
-
Transfer receipt Mobile
-
Cards Mobile
-
Insights Mobile
-
Profile & settings Mobile
-
Home in light mode Mobile
●Pages & features
Inside the Klyro app
9 screens, grouped by what you do in them. Each card says what the screen is for and what it does.
-
01
Welcome
First screen: what Klyro is, with a clear way in for new and returning users.
- Animated card, payment and chart illustration
- ‘Get started’ and ‘I already have an account’
- States clearly that no real money is used
-
02
Sign in
Signs people in securely and explains any wait while the server wakes up.
- Email and password with inline validation
- Short-lived tokens stored in the phone’s secure storage
- ‘Waking up the server’ message on slow first sign-in
-
03
Home
The dashboard: balance, this month’s money in and out, quick actions and recent spending.
- Balance card with a hide/show toggle
- Money in and out for the month
- Send, Top up, Cards and Insights shortcuts
- 7-day spending chart and recent activity
- Pull to refresh
-
04
Activity
Every transaction, grouped by day, loading more as you scroll.
- Search by name, note or reference
- Filters for money in, money out and cards
- Infinite scroll, 20 transactions at a time
-
05
Send money
Pick a recipient, enter an amount and add a note.
- Recipient by Klyro tag or account number
- Amount keypad with the available balance
- Confirmation step before money moves
-
06
Transfer receipt
Confirms the transfer with a reference number.
- Amount, recipient, note, reference and date
- ‘Send another’ shortcut
- Safe to retry: a repeated request never sends twice
-
07
Cards
A virtual card the user controls.
- Freeze and unfreeze
- Monthly limit with progress
- Online payments on or off
-
08
Insights
Where the money went, by week or month.
- Total spent with change versus the last period
- Category breakdown chart
- Top categories with payment counts
-
09
Profile & settings
Personal details, security and app preferences.
- Profile photo upload
- System, light or dark theme
- Hide balance on launch, notifications and haptics
- Log out
How it fits together
- React Native
- Expo
- TypeScript
- Django REST Framework
- PostgreSQL
- TanStack Query
- 01Sign in
The app signs in through the API and keeps short-lived tokens in secure storage.
- 02Load the dashboard
Balance, activity and insights load from the API and are cached for weak connections.
- 03Send money
Each transfer carries a unique key, so the server records it once even if the request is repeated.
- 04Record in the ledger
The server locks both accounts, writes the ledger entries and returns the new balance.
