Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rafae2k/rocketbank-mobile
Rocket Bank is a finance mobile app built for XP Mobile Challenge.
https://github.com/rafae2k/rocketbank-mobile
expo react-native react-navigation styled-components typescript
Last synced: 16 days ago
JSON representation
Rocket Bank is a finance mobile app built for XP Mobile Challenge.
- Host: GitHub
- URL: https://github.com/rafae2k/rocketbank-mobile
- Owner: rafae2k
- Created: 2022-07-17T14:07:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-24T21:41:49.000Z (almost 2 years ago)
- Last Synced: 2024-02-27T12:36:43.629Z (4 months ago)
- Topics: expo, react-native, react-navigation, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 18.1 MB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Lists
- my-awesome-stars - rafae2k/rocketbank-mobile - Rocket Bank is a finance mobile app built for XP Mobile Challenge. (TypeScript)
README
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![MIT License][license-shield]][license-url]
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
## How it was made
Rocket Bank was my second attempt at building a mobile application, my first was [Uber Clone](https://github.com/rafae2k/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](https://github.com/users/rafae2k/projects/2)
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.
### Built With
- 🎯 [Typescript](https://www.typescriptlang.org/)
- 📲 [React Native](https://reactnative.dev/)
- 💅 [Styled-components](https://tailwindcss.com/)
- 🧩 [Expo](https://www.expo.dev)
- ⛵️ [React Navigation](https://reactnavigation.org/)
- 🦙 [Alpaca Market Data](https://https://alpaca.markets//)
### 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.
## Getting Started
Expo Snack - Test the app on web or on your phone.
[Click Here to run the app on Expo Snack](https://snack.expo.dev/@rafae2k/694e1f)
- 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.
```sh
corepack enable
```
You also need to install the `expo-cli`
```sh
yarn global add expo-cli
```
### Installation
1. Clone the repo
```sh
git clone https://github.com/rafae2k/rocketbank-mobile.git
```
2. Install NPM packages
```sh
yarn install
```
3. start expo
```sh
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.
## Roadmap
- [x] Create Figma prototype
- [x] Create Navigation Tabs with React Navigation
- [x] Implement screens for login, register, home, buy/sell, portfolio, market, and deposit/withdraw
- [x] Add autocomplete search for stocks
- [x] Add real stock data from Alpaca Market Data
- [x] 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)
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
- Email [email protected]
- Linkedin [Rafael Feitoza](https://www.linkedin.com/in/eurafo/)
[forks-shield]: https://img.shields.io/github/forks/rafae2k/rocketbank-mobile.svg?style=for-the-badge
[forks-url]: https://github.com/rafae2k/rocketbank-mobile/fork
[stars-shield]: https://img.shields.io/github/stars/rafae2k/rocketbank-mobile.svg?style=for-the-badge
[stars-url]: https://github.com/rafae2k/rocketbank-mobile/stargazers
[issues-shield]: https://img.shields.io/github/issues/rafae2k/rocketbank-mobile.svg?style=for-the-badge
[issues-url]: https://github.com/rafae2k/rocketbank-mobile/issues
[license-shield]: https://img.shields.io/github/license/rafae2k/rocketbank-mobile.svg?style=for-the-badge
[license-url]: https://github.com/rafae2k/rocketbank-mobile/blob/main/LICENSE.txt
[product-screenshot]: docs/assets/app-gif.gif