Rocket Bank is a finance mobile app built for XP Mobile Challenge.

Rocket Bank is a mobile application made with React Native. You can track your portfolio performance, make deposits and withdrawals, and buy and sell stocks.

View Live · Report Bug · Request Feature

How it was made

Rocket Bank was my second attempt at building a mobile application, my first was Uber Clone.

• Used GitHub projects to build an automated Kanban board, by creating issues/TODOs

  • requirements
  • design
  • components
  • screens
  • logic
  • issues/bugs

  Link to the Kanban Project Board

Then the cards were moved to the next stage soon as I opened the Pull Request and then moved to the next stage when the Pull Request was merged into the main branch.

• The standardization of the project was done with:
  • Commitlint to check the commit message following Angular's style.
  • lint-staged to ensure that no ESlint or TypeScript errors we're committed.
  • Prettier to format the code following the ESlint config.

(back to top)

Built With

• 🎯 Typescript
• 📲 React Native
• 💅 Styled-components
• 🧩 Expo
• ⛵️ React Navigation
• 🦙 Alpaca Market Data

(back to top)

Difficulties

• Learn and understand react navigation lib and how to work with nested screens and routes and correctly type them.

• Typescript types and Eslint rules and configuration

• Styled-components: was difficult to know that some styles didn't work on native that I was used on web development, like gap and different implementations of flex.

• Work with native components like, FlatList and ScrollView, KeyboardAvoidingView, as the project was becoming more complex, and nesting components generated errors, like ScrollView inside a ScrollView.

• Debugging: was difficult to understand how to debug the app styles and state and set up flipper to work with Expo.

(back to top)

Getting Started

Expo Snack - Test the app on web or on your phone.

Click Here to run the app on Expo Snack

• You can run on the Web emulator of Expo Snack only on iOS or Android (Web doesn't work yet for this project) or on your device by reading the QR code and run on Expo Go App.

ATENTION Although this app is multiplatform, it was only tested on iOS, so some functionalities may not work correctly

Prerequisites

This project use yarn as package manager, you can still use others managers as npm.

To enable yarn follow this steps.

corepack enable

You also need to install the expo-cli

yarn global add expo-cli

Installation

1. Clone the repo

   git clone https://github.com/rafae2k/rocketbank-mobile.git

2. Install NPM packages

   yarn install

3. start expo

   expo start

4. Running on your phone

   press c on the terminal and read the QR code with the Expo GO app installed or press i to run on the iOS emulator (only available on macOS) or a to run on the Android emulator

5. Login

   This app doesn't have a real authentication check in addition to Hardware Biometrics Authentication, but some business logic we're added, so the first time you open the app, you need to enter a valid email and a password with at least 8 characters, after that, every time you open the app you'll be automatically logged in with Hardware Biometrics (Face ID/Fingerprint).

Know Issues

• Links on Home don't work at first. You need to manually navigate to account (Conta) and market (Bolsa) screens via the bottom tabs to deposit, withdraw and stocks cards buttons correctly navigate to its screens.

• Back button on the header of BottonTab's (Navbar) screens navigate to the login page, others nested screens (Stacks) work correctly keeping navigation history and with the back button returning to the last page that user navigated.

(back to top)

Roadmap

• Create Figma prototype
• Create Navigation Tabs with React Navigation
• Implement screens for login, register, home, buy/sell, portfolio, market, and deposit/withdraw
• Add autocomplete search for stocks
• Add real stock data from Alpaca Market Data
• Add auth with Face Id and biometrics and save user data to secure storage
• Sign up and Integration with firebase auth
• Fix styles bug's
• Add animations to screens
• Add micro interactivity to screens (haptics)
• Tests (E2E and Unit)

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

• Email [email protected]

• Linkedin Rafael Feitoza

(back to top)