{"id":13624071,"url":"https://github.com/rafae2k/rocketbank-mobile","last_synced_at":"2025-04-15T20:33:21.370Z","repository":{"id":49806150,"uuid":"514860914","full_name":"rafae2k/rocketbank-mobile","owner":"rafae2k","description":"Rocket Bank is a finance mobile app built for XP Mobile Challenge.","archived":false,"fork":false,"pushed_at":"2022-07-24T21:41:49.000Z","size":19012,"stargazers_count":10,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-08T12:42:57.421Z","etag":null,"topics":["expo","react-native","react-navigation","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rafae2k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-17T14:07:28.000Z","updated_at":"2024-05-28T04:59:31.000Z","dependencies_parsed_at":"2022-09-24T11:00:25.842Z","dependency_job_id":null,"html_url":"https://github.com/rafae2k/rocketbank-mobile","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafae2k%2Frocketbank-mobile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafae2k%2Frocketbank-mobile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafae2k%2Frocketbank-mobile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafae2k%2Frocketbank-mobile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafae2k","download_url":"https://codeload.github.com/rafae2k/rocketbank-mobile/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249148332,"owners_count":21220517,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","react-native","react-navigation","styled-components","typescript"],"created_at":"2024-08-01T21:01:38.574Z","updated_at":"2025-04-15T20:33:21.359Z","avatar_url":"https://github.com/rafae2k.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![MIT License][license-shield]][license-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/rafae2k/rocketbank-mobile\"\u003e\n    \u003cimg src=\"docs/assets/app-logo.svg\" alt=\"Rocket Bank logo\" height=\"100\"\u003e\n  \u003c/a\u003e\n    \u003c/br\u003e\n    \u003c/br\u003e\n\n  \u003cp align=\"center\"\u003e\n    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.\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://snack.expo.dev/@rafae2k/694e1f\"\u003eView Live\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/rafae2k/rocketbank-mobile/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/rafae2k/rocketbank-mobile/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cp float=\"center\"\u003e\n  \u003cimg src=\"docs/assets/app-home.png\" width=\"200\" /\u003e\n  \u003cimg src=\"docs/assets/app-buy.png\" width=\"200\" /\u003e \n  \u003cimg src=\"docs/assets/app-withdraw.png\" width=\"200\" /\u003e\n  \u003cimg src=\"docs/assets/app-demo.gif\" width=\"185\" /\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#How-it-was-made\"\u003eHow it was made\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#difficulties\"\u003eDifficulties\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## How it was made\n\nRocket Bank was my second attempt at building a mobile application, my first was [Uber Clone](https://github.com/rafae2k/uber-clone).\n\n- Used GitHub projects to build an automated Kanban board, by creating issues/TODOs\n  - requirements\n  - design\n  - components\n  - screens\n  - logic\n  - issues/bugs\n  \n  [Link to the Kanban Project Board](https://github.com/users/rafae2k/projects/2)\n\n\u003cp float='center'\u003e\n  \u003cimg src=\"docs/assets/kanban.png\" width=\"600\" alt=\"Github Kanban Board\" /\u003e\n\u003c/p\u003e\n\nThen 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.\n\n- The standardization of the project was done with:\n  - **_Commitlint_** to check the commit message following Angular's style.\n  - **_lint-staged_** to ensure that no ESlint or TypeScript errors we're committed.\n  - **_Prettier_** to format the code following the **_ESlint_** config.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Built With\n\n- 🎯 [Typescript](https://www.typescriptlang.org/)\n- 📲 [React Native](https://reactnative.dev/)\n- 💅 [Styled-components](https://tailwindcss.com/)\n- 🧩 [Expo](https://www.expo.dev)\n- ⛵️ [React Navigation](https://reactnavigation.org/)\n- 🦙 [Alpaca Market Data](https://https://alpaca.markets//)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- PROBLEMS FACED --\u003e\n\n### Difficulties\n\n- Learn and understand **_react navigation_** lib and how to work with nested screens and routes and correctly type them.\n\n- **_Typescript types_** and **_Eslint_** rules and configuration\n\n- **_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`.\n\n- 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`.\n\n- **_Debugging:_** was difficult to understand how to debug the app styles and state and set up flipper to work with Expo.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\nExpo Snack - Test the app on web or on your phone.\n\n[Click Here to run the app on Expo Snack](https://snack.expo.dev/@rafae2k/694e1f)\n\n- 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.\n\n***ATENTION***\nAlthough this app is multiplatform, it was only tested on iOS, so some functionalities may not work correctly \n\n### Prerequisites\n\nThis project use `yarn` as package manager, you can still use others managers as `npm`.\n\nTo enable `yarn` follow this steps.\n\n```sh\ncorepack enable\n```\n\nYou also need to install the `expo-cli`\n\n```sh\nyarn global add expo-cli\n```\n\n### Installation\n\n1. Clone the repo\n\n   ```sh\n   git clone https://github.com/rafae2k/rocketbank-mobile.git\n   ```\n\n2. Install NPM packages\n   ```sh\n   yarn install\n   ```\n3. start expo\n   ```sh\n   expo start\n   ```\n4. Running on your phone\n\n   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\n   \n5. Login \n   \n   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).\n   \n   \n### Know Issues\n\n- 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.\n\n- 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.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ROADMAP --\u003e\n\n## Roadmap\n\n- [x] Create Figma prototype\n- [x] Create Navigation Tabs with React Navigation\n- [x] Implement screens for login, register, home, buy/sell, portfolio, market, and deposit/withdraw\n- [x] Add autocomplete search for stocks\n- [x] Add real stock data from Alpaca Market Data\n- [x] Add auth with Face Id and biometrics and save user data to secure storage\n- [ ] Sign up and Integration with firebase auth\n- [ ] Fix styles bug's\n- [ ] Add animations to screens\n- [ ] Add micro interactivity to screens (haptics)\n- [ ] Tests (E2E and Unit)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n\n## Contact\n\n- Email \u003ca href=\"mailto:hello@rafo.work\"\u003ehello@rafo.work\u003c/a\u003e\n\n- Linkedin [Rafael Feitoza](https://www.linkedin.com/in/eurafo/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[forks-shield]: https://img.shields.io/github/forks/rafae2k/rocketbank-mobile.svg?style=for-the-badge\n[forks-url]: https://github.com/rafae2k/rocketbank-mobile/fork\n[stars-shield]: https://img.shields.io/github/stars/rafae2k/rocketbank-mobile.svg?style=for-the-badge\n[stars-url]: https://github.com/rafae2k/rocketbank-mobile/stargazers\n[issues-shield]: https://img.shields.io/github/issues/rafae2k/rocketbank-mobile.svg?style=for-the-badge\n[issues-url]: https://github.com/rafae2k/rocketbank-mobile/issues\n[license-shield]: https://img.shields.io/github/license/rafae2k/rocketbank-mobile.svg?style=for-the-badge\n[license-url]: https://github.com/rafae2k/rocketbank-mobile/blob/main/LICENSE.txt\n[product-screenshot]: docs/assets/app-gif.gif\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafae2k%2Frocketbank-mobile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafae2k%2Frocketbank-mobile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafae2k%2Frocketbank-mobile/lists"}