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
Table of Contents
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
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.
-
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 offlex
. -
Work with native components like,
FlatList
andScrollView
,KeyboardAvoidingView
, as the project was becoming more complex, and nesting components generated errors, likeScrollView
inside aScrollView
. -
Debugging: was difficult to understand how to debug the app styles and state and set up flipper to work with Expo.
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
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
-
Clone the repo
git clone https://github.com/rafae2k/rocketbank-mobile.git
-
Install NPM packages
yarn install
-
start expo
expo start
-
Running on your phone
press
c
on the terminal and read the QR code with the Expo GO app installed or pressi
to run on the iOS emulator (only available on macOS) ora
to run on the Android emulator -
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).
-
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 nestedscreens (Stacks)
work correctly keeping navigation history and with the back button returning to the last page that user navigated.
- 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)
Distributed under the MIT License. See LICENSE.txt
for more information.
-
Email hello@rafo.work
-
Linkedin Rafael Feitoza