{"id":16498051,"url":"https://github.com/nagariahussain/idea-wallet","last_synced_at":"2025-10-07T23:14:44.221Z","repository":{"id":113688936,"uuid":"526872497","full_name":"NagariaHussain/idea-wallet","owner":"NagariaHussain","description":"React Native Mobile App for recording your ideas.","archived":false,"fork":false,"pushed_at":"2022-12-25T07:03:26.000Z","size":10945,"stargazers_count":18,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-08T01:04:29.404Z","etag":null,"topics":["expo","fusejs","react-native","react-navigation-v6","reactjs","rean","reanimated2","styled-components"],"latest_commit_sha":null,"homepage":"https://hussain.codes","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NagariaHussain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2022-08-20T08:46:03.000Z","updated_at":"2025-01-27T16:39:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"ec9903cd-6766-43c9-99ca-6895c8b034b9","html_url":"https://github.com/NagariaHussain/idea-wallet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NagariaHussain/idea-wallet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fidea-wallet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fidea-wallet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fidea-wallet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fidea-wallet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NagariaHussain","download_url":"https://codeload.github.com/NagariaHussain/idea-wallet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fidea-wallet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278861060,"owners_count":26058637,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","fusejs","react-native","react-navigation-v6","reactjs","rean","reanimated2","styled-components"],"created_at":"2024-10-11T14:47:04.573Z","updated_at":"2025-10-07T23:14:44.208Z","avatar_url":"https://github.com/NagariaHussain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](.github/images/hero.png)\n\n## Introduction\n\nIntroducing the **Idea Wallet** app. Built with React Native (expo).\n\nThis report covers my approach and experience in designing and building this product from scratch and end-to-end. Basically, I got too carried away and no longer considered this as a college project but as an app for real users and for publishing to the app stores.\n\n## Features\n\n✅ Offline data storage\n\n✅ Emoji Picker\n\n✅ Custom Bottom Bar\n\n✅ Animated Floating Actions\n\n✅ Audio Player with progress\n\n✅ Voice recorder\n\n✅ Use of Clipboard API\n\n✅ Nested Navigation using React Navigation\n\n✅ Custom Fonts\n\n✅ Image Picker \u0026 View\n\n✅ Styled components with Theming\n\n\n## Running the app locally\n\n```\ngit clone https://github.com/NagariaHussain/idea-wallet\ncd idea-wallet\nyarn # install dependencies\nnpx expo start\n```\n\n[iOS Recommended] Either use the QR code to run the app on your phone (using Expo Go app) Or press `i` to launch the app on iOS simulator (assuming if you have that installed)\n\n## Ideation\n\nFirst of all, thank you for making it an open-ended project! This made it a very interesting project to work on. I started by asking my colleagues for suggestions. I got some pretty good ideas from them. Here are a few of them:\n\n* A Better ToDo list application\n\n* A Better weather application\n\n* An app to help people decide what to cook today intelligently\n\n* An app / platform to connect volunteers with elderly to help them with chores\n\nBut either the ideas seemed very general or huge in scope. Last month, while reading this amazing book titled \"Creative Confidence\" by the **Kelly** brothers, I came across this idea of keeping an idea wallet. Basically, the authors suggest to always have something (like a diary or a \"whiteboard in the shower\" 😂) to note down ideas, since ideas can strike you anywhere, anytime.\n\nSo, then I thought, why not create an \"Idea Wallet\" in the form of an app!\n\n### The Problems\n\nThe core problems I am trying to solve with this app:\n\n* Ideas getting lost before we can write them down or act on them\n\n* The written record itself gets lost\n\n* The written pieces are not always in hand\n\n* Categorize the ideas\n\nIdea Wallet app tries to solve the above mentioned problems along with providing features that are not possible with written records:\n\n* Voice Notes\n\n* Accessible storing of links\n\n* Image / Screenshot attachments\n\n### The Users\n\nMe! I designed and built this app so that I can use it as my idea wallet. Eventually, I want to publish it to the app stores (both iOS and Android) for anyone to download and use.\n\n## Design\n\nEverything related to the design and prototype of the app can be found in this Figma file: \u003chttps://www.figma.com/file/mABEJmd0j52tGisoPglDiY/IdeaWalletApp?node-id=58%3A4928\u003e. Basically, the product design cycle consisted of the below 4 phases/deliverables:\n\n1. User Flow Diagram\n2. Hand Sketches\n3. Lo-Fi Wireframes (Grayscale / Made in Figma)\n4. Hi-Fi Wireframes / Visual Design (Make it beautiful!)\n\nBelieve me, I have spent as much time, if not more, in designing the app as it took me to develop it to the current point. But having every screen designed and ready, accelerated the development speed.\n\n### User Flow Diagram\n\nHere, I have mapped almost all the core actions that I want the user to be able to do in the app. For instance, creating a new idea, deleting a idea, searching for an idea and more.\n\n![User Flow Diagram](.github/images/User-Flow-Diagram.jpg)\n\n### Hand Sketches\n\nEverything starts ugly. Period.\n\n![](.github/images/hand-sketches.png)\n\n## Lo-fi Wireframes\n\nI placed my hand sketches into the figma file and started to create a lo-fi wireframe corresponding to them one by one. This phase was all about deciding what element would go where. In this phase, I didn't worry about fonts, colors, spacing etc. Those were done in the visual design phase.\n\n![](.github/images/Lo-fi-wireframes.png)\n\n### Hi-fi Wireframes / Visual Design\n\n![](.github/images/Hi-fi-wireframes.png)\n\nThis is my favorite part of the Product Design process. In my opinion, it is all about iteration, iteration and iteration! I created a mood board with all kinds of app design inspiration from all over Dribble.\n\nThis phase involved choosing colors, fonts, sizes etc. This is what makes the app look polished and visually pleasing.\n\n### The Core Figma Components\n\nI have extensively used Figma's component feature to create reusable components that are used through out the app screen designs. This also helped a lot while developing the app, as I started by directly building these components as React components which, though initially a slow process, paid of a lot at later stages.\n\n![](.github/images/Components.png)\n\n## Development\n\n### The Project Structure\n\n![](.github/images/Project-Structure.png)\n\nAll the source code files (except the main `App.js` file) are located in the `src` folder and nested in appropriate subdirectories. Except the `src/infra` folder, other folders are pretty self-explanatory. The core **infra**structure of the app has two parts:\n\n1. theme\n1. navigation\n\nBoth of these will be explained in detail in the coming sections.\n\n### Styled Components: A different approach to styling\n\nIn the course, we were taught how to style the components by passing `StyleSheet` objects as props (the `style` named prop). But I came across a very interesting approach to styling components: [styled components](https://styled-components.com/). This library lets us write CSS-in-JS! As a web developer, I am very accustomed in writing CSS, so this immediately felt more intuitive and better. Behind the scenes, it converts the CSS we write into stylesheet objects and passes it as props.\n\nHere is a simple example showing the difference between the two approaches:\n\n* Before `styled-components`\n\n```js\nimport { View, StyleSheet } from \"react-native\";\n\n\nexport const MyComponent = () =\u003e {\n  return (\n    \u003cView style={styles.container}\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"white\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n```\n\n* After `styled-components`\n\n```js\nimport styled from \"styled-components\";\n\nconst Container = styled.View`\n    flex: 1;\n    background-color: white;\n    align-items: center;\n    justify-content: center;\n`\n\nexport const MyComponent = () =\u003e {\n  return \u003cContainer /\u003e;\n};\n```\n\nI find this more readable and succinct than using JS objects to store style key-value pairs.\n\n### Theme-ing with styled components\n\nIt is now time to talk about the `infra/theme` part. This directory basically stores all the \"design tokens\" for building the app. This directory has four files:\n\n1. `index.js`: Basically exports a `theme` object with contents from the other three folders.\n2. `colors.js`: Stores and exports the colors (primary, stroke, typography colors, etc.)\n3. `fonts.js`: Stores and exports the font tokens: font family, font sizes and font weights.\n4. `sizes.js`: Presently it only stores sizes for border radius.\n\nWe then provide this `theme` object (exported from `infra/theme/index.js`) to the `ThemeProvider` (this too comes from the `styled-components` library) rendered in the `App.js` file.\n\nOne of the biggest benefits of styled-components is this! Once you have wrapped your root component with the `ThemeProvider`, you can access your design tokens anywhere down the component tree. You can get access to your theme object inside styled components like this:\n\n```js\nconst PageTitle = styled.Text`\n  color: ${({ theme }) =\u003e theme.colors.typography.pageTitle};\n  font-family: ${({ theme }) =\u003e theme.fonts.pageHeading};\n  font-size: ${({ theme }) =\u003e theme.fontSizes.lg};\n  font-weight: ${({ theme }) =\u003e theme.fontWeights.extraBold};\n  text-align: left;\n`;\n```\n\nBiggest benefit of using theme object values: you need to change a value (for instance, your primary color) only at one place and it gets reflected on all parts of your app where that particular design token was used.\n\nOne can also access the theme context in any react component by using the `useTheme` hook provided:\n\n```js\nimport { useTheme } from \"styled-components\";\n// ...\n    {\n        const theme = useTheme();\n        const primaryColor = theme.colors.primary.main;\n        // ...\n    }\n```\n\nIsn't the `styled-components` approach too awesome?!\n\n### Where is the data stored?\n\nAll the data is stored locally on the user's phone. This is made possible by the `@react-native-async-storage/async-storage` package. Check out the `src/lib/storage.js` for all the utility function related managing data on the phone storage.\n\nThe data is initially loaded by the `IdeaProvider` (`src/provider/idea.js`) and it is available in all the screens of the `HomeNavigator`\n\n### Entry Points: App.js\n\nThis is exactly what is returned by the `App` component:\n\n```js\n\u003cThemeProvider theme={theme}\u003e\n    \u003cAuthProvider\u003e\n        \u003cSafeAreaView style={{ flex: 1 }}\u003e\n            \u003cNavigation /\u003e\n        \u003c/SafeAreaView\u003e\n    \u003c/AuthProvider\u003e\n    \u003cAlertMessage position=\"top\" /\u003e\n\u003c/ThemeProvider\u003e\n```\n\nThere are two main providers: `ThemeProvider` (which comes from `styled-components`) and `AuthProvider` (which I have implemented to provide authentication state for Supabase Auth). As you can see, a `Navigation` component is rendered at root. The Navigation component then manages all the screens using React Navigation, as discussed more in the next section.\n\n### Navigation\n\nThe entry point for Navigation is located at `src/infra/navigation/index.js`. Basically it is a wrapper around React Navigation's `NavigationContainer` and renders either the `HomeNavigator` or `AuthNavigator` based on the authentication status. Currently, the authentication is useless, so I am just rendering the home navigator.\n\nThere is a lot of nesting of Navigators (Stack, Tab etc.) going on here, a diagram will give us a much better idea:\n\n![](.github/images/Navigation-Arch.jpg)\n\nAs you see in the diagram, to achieve the desired navigation flow, I have used many advanced features provided by React Navigation like nested navigators support, Tab Navigator, Stack Navigator, Navigation groups, Modal pages (which slide in from bottom and can be swiped down to close, like the New Idea Input Screen). Now, let's talk about that lit bottom tab bar!\n\n### Bottom Tab Bar\n\nI spent a whole day on this one 😅. While designing I didn't knew it would be a \"little\" hard to implement, but it turned out to be fun and awesome!\n\n![](.github/images/Idea-Dashboard.png)\n\nIt is always present on the screen, except for the modal screens like new idea and category input. This is a standalone React component that I created, code can be found at `src/components/BottomNavigationBar.js`.\n\n## Some cool components\n\nI will not be able to cover each and every component in this report, since there are a lot (a lot!) of them. I tried to refactor and extract reusable components as much as possible. None the less, here are some of the \"complex\" components that I find cool and which were fun and non-trial to implement.\n\n### The Emoji Picker\n\nThis is one of my favorite components. It uses the below 3 libraries to work:\n\n1. `gemoji`: List of emojis (with descriptions) used by GitHub.\n1. `react-native-popover-view`: For shown the popover\n1. `@shopify/flash-list`: For rendering the list of emojis to the popover view.\n\n![](.github/images/Emoji-Picker.png)\n\nI had to use `flash-list` because the normal scroll view/flat list were rendering very slow given the large number of emojis (~2000) and I wanted to make it snappy!\n\n### The `FloatingActions` component: Animated, Reanimated\n\nThey float above the keyboard when it is opened. Used in New Idea Input Screen, New Category Screen and Link Attachment screens. Better seen on video demo.\n\n![](.github/images/Floating-Actions.png)\n\nWe were taught about animations using `Animated` from react native. I came across this advanced (and popular) animation library for react native called `Reanimated`. I have used Reanimated to **animate the floating actions container** based on the visibility of the keyboard. It is a spring-y animation.\n\nBased on: \u003chttps://snack.expo.dev/@andypandy/animated-button-above-keyboard?platform=ios\u003e\n\n### The Voice Note player\n\nI designed and developed a voice note / sound player component basically from scratch. It takes a sound URI and offers play/pause controls along with a progress bar!\n\n![](.github/images/Voice-Note-Player.png)\n\n### Category Select Dropdown\n\nThis component is used to select a category for an idea:\n\n![](.github/images/Category-Select-Menu.png)\n\nThis uses `react-native-element-dropdown` component as a starting point.\n\n### The Link Attachment / Click to Copy\n\n![](.github/images/Link-Attachment.png)\n\nThe user can click on the copy button on the left side to **copy the link to the clipboard**. I was not able to implement the delete functionality before deadline.\n\n## The Backend\n\nI did setup a [supabase](https://supabase.com) backend and integrated idea wallet for authenticating. But then I decided to **build an offline-first app**. So, no authentication is required until the user wants to sync their ideas to the cloud, a feature I plan to implement in the second version of this app.\n\n## What went sideways?\n\nThe Scope. I spent so much time designing the app and aiming for a lot of features. But, I was not able to implement all of it before the deadline. Here are the things that I was not able to implement while submission:\n\n1. Settings Screen (themes)\n2. Update an existing idea and its attachments\n3. Sync to Cloud\n4. Search Feature\n\n## Further Improvement\n\nI plan to continue working on this app even after submitting this assignment. Here are a few thing that can be improved / introduced in the idea wallet app before publishing it to the app stores:\n\n* Customized Splash Screen\n* A Neat App Icon\n* Emoji Picker enhancements: search by keyword and scroll to the currently picked emoji.\n* UX for recording voice Notes, currently if we record a voice note and then again tap the mic button, the previous recording is overwritten :(.\n* Color Theme Preference in settings\n* Search and filter\n* Create a new idea directly for a category from category details screen\n\n## Conclusion\n\nAll in all, I learned a lot about developing mobile apps in this module. After doing this project, I am now very confident that I will be able to build much more complex mobile apps. My skills in this area have sky-rocketed, literally.\n\nContact me if you want to buy this app 🤑.\n\nJust kidding. Have a nice year ahead!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagariahussain%2Fidea-wallet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnagariahussain%2Fidea-wallet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagariahussain%2Fidea-wallet/lists"}