{"id":26060002,"url":"https://github.com/lucasdants/reactnative-cryptoportfolio","last_synced_at":"2026-04-13T20:32:51.316Z","repository":{"id":281039996,"uuid":"941175194","full_name":"LucasDants/ReactNative-CryptoPortfolio","owner":"LucasDants","description":"Crypto Portfolio helps users to manager their coins","archived":false,"fork":false,"pushed_at":"2025-03-06T17:15:00.000Z","size":66967,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T17:36:15.564Z","etag":null,"topics":["react-hook-form","react-native","react-native-gifted-charts","react-native-unistyles","realm","zod"],"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/LucasDants.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-01T17:07:30.000Z","updated_at":"2025-03-06T17:11:38.000Z","dependencies_parsed_at":"2025-03-06T17:47:24.060Z","dependency_job_id":null,"html_url":"https://github.com/LucasDants/ReactNative-CryptoPortfolio","commit_stats":null,"previous_names":["lucasdants/reactnative-cryptoportfolio"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LucasDants%2FReactNative-CryptoPortfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LucasDants%2FReactNative-CryptoPortfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LucasDants%2FReactNative-CryptoPortfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LucasDants%2FReactNative-CryptoPortfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LucasDants","download_url":"https://codeload.github.com/LucasDants/ReactNative-CryptoPortfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242559203,"owners_count":20149326,"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":["react-hook-form","react-native","react-native-gifted-charts","react-native-unistyles","realm","zod"],"created_at":"2025-03-08T13:48:58.262Z","updated_at":"2026-04-13T20:32:51.266Z","avatar_url":"https://github.com/LucasDants.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](./documentation/images/Banner.png)\n# Getting Started\n\nHey guys \u003cimg src=\"https://raw.githubusercontent.com/iampavangandhi/iampavangandhi/master/gifs/Hi.gif\" width=\"18\" height=\"18\" /\u003e! This project it is a small crypto portfolio made in a bare **React Native v0.76.7**.\n\n## ⭐ Features\n- ✅ **Portfolio Overview Screen**\n   - Display a distribution overview of the portfolio by cryptocurrency\n   - List of Coins:** Below the overview, display a list of cryptocurrencies currently held in the portfolio.\n- ✅ **Coin Purchases Screen**\n   - Display all transactions\n   - Each transaction entry should detail the date, type (buy/sell), quantity, and price per coin at the time of the transaction.\n- ✅ **Add Transaction Screen**\n   - Provide a form for entering new transaction details for a selected cryptocurrency, specifying the transaction type (buy/sell), quantity, and price per coin.\n   - Implement input validation to prevent erroneous data entry.\n- ✅ **Performance and Persistence of Transactions**\n   - Be aware of possible performance issues, since you are dealing with historic data that tends to increase with time.\n   - You can use the JSON included in our slack channel\n- ✅ **Pre-fixed List of Cryptocurrencies**\n   - Incorporate a pre-defined list of popular cryptocurrencies for users to choose from when adding or editing transactions, simplifying the app's scope by not requiring live data.\n- ✅ **Portfolio Value Over Time Chart (Optional)**\n- ✅ **Edit Transaction Feature (Optional)**\n\n### 💯 Extra features\n- ✅ **Delete Transaction Feature**\n- ✅ **Splash Screen, App Icon and Fonts**\n- ✅ **Responsiveness**\n- ✅ **Transaction Date Picker**\n- ✅ **Toasts to give the user feedback**\n\n# 🛠️ Technologies \u0026 Tools\n\n##  State Management\nWhy I decided to go with [Realm DB](https://www.mongodb.com/docs/atlas/device-sdks/sdk/react-native/) to persist and show data to user.\n- Realm DB its fast and has a low latency;\n- With [@realm/react](https://www.npmjs.com/package/@realm/react) the interface its simplex and easy to use;\n- We use the reference from the database itself, this helps to [save memory and increase speed](https://www.mongodb.com/docs/realm-sdks/java/10.0.1/io/realm/RealmResults.html)\n- Realm only \"uses\" what needs to be used;\n- There is a good company behind Realm, MongoDB, and since you guys used Mongo in your tech stack its awesome;\n\nOther good option it is [WatermelonDB](https://github.com/Nozbe/WatermelonDB)\n\n## Styling\nI was [using react-native-unistyles v2](https://v2.unistyl.es/start/introduction/) in some personal projects, and I really like the concept of styling like a normal Stylesheet and using the c++ as the \"core\". I used in this project the [react-native-unistyles v3](https://www.unistyl.es) that is still in **BETA**. The others factors that I chose to use it was to show Felipe this awesome library and because I also would like to test it to see the power of V3 and the usage of breakpoints. ~~This guy is crazy to use a beta on a test project 🤣~~\n\n## Charts\nI like to use [React Native Directory](https://reactnative.directory) to find some libraries. I was looking to the charts options and the [react-native-gifted-charts](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts) appears to be a good choice. Since the popular library (react-native-chart-kit) it is not being updated for 3 years. the gifted-charts already supports the new archicture and its being actively maintaned.\n\nI also like to search to see if I did a good choice 😅, I found a cool library that uses Skia graphics render behind:\n- [Victory Native](https://commerce.nearform.com/open-source/victory-native/docs) uses react-native-skia graphics render combined with react-native-gesture-handler and react-native-reanimated. \n\n## Forms\nI used [react-hook-form](https://react-hook-form.com) combined with [zod validator](https://zod.dev) to deal with the transaction form to create a better user experience with less code.\n\n### Select\nI like to use [react-native-bottom-sheet](https://gorhom.dev/react-native-bottom-sheet/) to create selectors on mobile in a customized way.\n\n### Date Picker\nI used the [react-native-date-picker](https://github.com/henninghall/react-native-date-picker) to provide a platform experience while selecting the date.\n\n## List\nI stayed with the default flatList with some optimizations techniques, but we also can use [react-native-flashlist][https://shopify.github.io/flash-list/] that has more performance than the default flatList. \n\n## Patterns\nI pattern that I am liking and I would like to share the implementation it's the Composition pattern that basically involves composing multiple components to create more complex components. I used in the List Item, so we can create different list items with the same base.\n\n## Structure\nI like to structure the app in modules, since this app its small the screen itself become the module, I have a src/* with shared components/fuctions that\ncan be used by all the modules, and inside of each module I create related files to that module like (components, screens, utils).\nIn this app we can see a small example on Home and Coin, if we think them as a module they have the components folder that has specific UI for this \"module\". \n\n# 🚀 Run Project\n\u003e**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till \"Creating a new application\" step, before proceeding.\n## Step 1: Start the Metro Server\n\nFirst, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.\n\nTo start Metro, run the following command from the _root_ of your React Native project:\n\n```bash\nnpm start\n```\n\n## Step 2: Start your Application\n\nLet Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:\n\n### For Android\n\n```bash\nnpm run android\n```\n\n### For iOS\n\n```bash\nnpm run ios\n```\n\nIf everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.\n\nThis is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.\n\n# ⚙️ Troubleshooting\n\nSince I decided to go with react-native-unistyles v3 that is in beta we can have some issues in **Android** to build. It seems more related to the android studio not handling well the cache. The issue its: \n- Android Builds :react-native-unistyles:buildCMakeDebug[arm64-v8a]\n- [Issue 568](https://github.com/jpudysz/react-native-unistyles/issues/568)\n- [Issue 587](https://github.com/jpudysz/react-native-unistyles/issues/587)\n\nBasically to fix you need to reinstall the react-native-unistyles deps and rebuild the project.\n\n```shell\nnpm uninstall react-native-unistyles react-native-nitro-modules react-native-edge-to-edge \n\nnpm install react-native-unistyles react-native-nitro-modules react-native-edge-to-edge \n\ncd android\n./gradlew clean\n\nnpm run android\n```\n\nIf you still run with problems do not hesitate to contact me.\n\n# 🎨 UI/UX\nI tried to follow the **Nilsen Heuristic** to a good user experience. I wil list some actions I add to follow these standards:\n1. **Visibility of System Status:** I added a toast feedback when the user create/update/delete the transaction to know the action was done with success\n2. **Match between system and the real world:** The app does not use difficult words specific to crypto world.\n3. **User Control and Freedom:** I added a delete option to transaction in case he adds a wrong transaction.\n4. **Consistency and standards:** I created a ListItem to follow the same design in the app and have utils functions to format numbers.\n5. **Error Prevention:** I give the user a pop-up before deleting the transaction to not delete by accident.\n6. **Flexibility and Efficiency of Use:** The user can quickly add transactions from the same coin if they start on the Coin Page.\n7. **Aesthetic and minimalist design:** The app only show relevant information to the user.\n8. **Help users recognize, diagnose and recover from errors:** In the form screen the user can has validations that clears after the input blur or the coin is selected.\n9. **Help and Documentation:** At the beginning without transactions the user has some instruction on how to make the app starts to work properly.\n\nI used the breakpoints from react-native-unistyles to achieve the responsiveness, I get the iOS common devices width and used as a parameter to build the breakpoints.\n\n## 🎥 Videos\n\nhttps://github.com/user-attachments/assets/7c93ac90-dc94-4a61-b51c-b54ac281116e\n\nhttps://github.com/user-attachments/assets/cda3fc66-53e0-4aca-aa0e-bae34cb46bc3\n\n## 📷 Images\n![image](./documentation/images/HomeEmpty.png)\n![image](./documentation/images/Home.png)\n![image](./documentation/images/Transaction.png)\n![image](./documentation/images/TransactionForm.png)\n![image](./documentation/images/TransactionFormEdit.png)\n![image](./documentation/images/CoinSelector.png)\n\n#  What's next?\n\nI hope hearing back from you guys! \n\nMade with ❤️ by Lucas Dantas 👋🏽\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasdants%2Freactnative-cryptoportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucasdants%2Freactnative-cryptoportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasdants%2Freactnative-cryptoportfolio/lists"}