Demo code open source with the authorization of Andrés F. Méndez, CEO of Ubanku Fintech.

UbankuApp

UbankuApp is a robust and scalable mobile application designed to provide a seamless banking experience. This demo showcases the frontend of a wallet bank system built using TypeScript and React Native. The complete system is a fullstack solution, including a backend built with NestJS, and is suitable for banks or enterprises.

The project adheres to the Atomic Design pattern to ensure a scalable and maintainable design system.

Contact for Complete Fullstack Wallet Banking System and Custom Enterprise Technology Solutions

For inquiries about purchasing the complete or a customized wallet system, please reach out to:

Andrés F Méndez (CEO of Ubanku):
Daniel Sandoval (Software Engineer, Founding Team):

Technologies

Frontend:
- React Native
- TypeScript
- JavaScript
- Styled Components
Backend:
- NestJS (private code)
- Testing:
- Jest

Atomic Design

This project follows the Atomic Design methodology to create a consistent and scalable design system. Atomic Design structures our components into five distinct levels:

Atoms: The smallest building blocks, such as buttons, inputs, and labels.
Molecules: Combinations of atoms that form simple UI components, like a search form.
Organisms: Complex UI components made up of molecules and/or atoms, like a header or a card.
Templates: Page-level components that place organisms in a layout and articulate the design’s underlying content structure.
Pages: Specific instances of templates that display real content.

By organizing our components in this manner, we achieve a more maintainable and scalable codebase, allowing for easier updates and consistency across the application.

Features Included in the Demo

Authentication Module:
- Step-by-step authentication
- 2FA (Two-Factor Authentication) via SMS
- User registration and login
- Password recovery
Home Module:
- Dashboard with user overview
- Navigation to other modules
User Module:
- User profile management
- View and edit personal details
- Referral system
Wallet Module:
- View wallet balance
- Add funds to the wallet
- Withdraw funds from the wallet
Movements Module:
- View transaction history
- Detailed view of individual transactions

Screenshots

To give you a better idea of the application’s interfaces, below are some key screenshots:

Authentication Module

Home Module

Home Dashboard

User Module

User Profile Referral System

Wallet Module

Wallet Balance

Add Funds

Movements Module

Transaction History Transaction Details

Project Structure

├── App.tsx
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
├── __tests__
│   └── App-test.tsx
├── android
│   ├── app
│   │   ├── build.gradle
│   │   ├── debug.keystore
│   │   ├── proguard-rules.pro
│   │   └── src
│   │       ├── debug
│   │       │   ├── AndroidManifest.xml
│   │       │   └── java
│   │       │       └── com
│   │       │           └── ubankuapp
│   │       │               └── ReactNativeFlipper.java
│   │       ├── main
│   │       │   ├── AndroidManifest.xml
│   │       │   ├── assets
│   │       │   ├── java
│   │       │   │   └── com
│   │       │   │       ├── MainActivity.java
│   │       │   │       └── MainApplication.java
│   │       │   └── res
│   │       └── release
│   │           └── java
│   │               └── com
│   │                   └── ubankuapp
│   │                       └── ReactNativeFlipper.java
│   ├── build.gradle
│   ├── gradle
│   │   └── wrapper
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── link-assets-manifest.json
│   └── settings.gradle
├── app.json
├── babel.config.js
├── index.js
├── ios
│   ├── Podfile
│   ├── Podfile.lock
│   ├── UbankuApp
│   │   ├── AppDelegate.h
│   │   ├── AppDelegate.mm
│   │   ├── Images.xcassets
│   │   ├── Info.plist
│   │   ├── LaunchScreen.storyboard
│   │   └── main.m
│   ├── UbankuApp.xcodeproj
│   ├── UbankuApp.xcworkspace
│   ├── UbankuAppTests
│   └── link-assets-manifest.json
├── metro.config.js
├── package-lock.json
├── package.json
├── react-native.config.js
├── src
│   ├── assets
│   ├── components
│   ├── contexts
│   ├── hooks
│   ├── interfaces
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── theme
│   ├── types
│   └── utils
├── tsconfig.json
└── yarn.lock

Installation

Clone the repository:

git clone https://github.com/RogelioRichmanAstronaut/Ubanku-wallet-bank-app.git
cd ubankuapp

Install dependencies:
```
yarn install
```
Install Pods for iOS:
```
cd ios
pod install
cd ..
```

Running the App

For iOS:
```
npx react-native run-ios
```
For Android:
```
npx react-native run-android
```
Testing

To run the tests:
```
yarn test
```

License

This project is licensed under the terms of the MIT license. See the LICENSE file for details.

For more detailed information, please refer to the project documentation or contact the project maintainers.

Developed by Daniel Sandoval.