# Project export: mendwell This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2024 - Tagline: Manage your health, one scan at a time. - Devpost: https://devpost.com/software/mendwell - GitHub: https://github.com/shirlsli/treehacks2024 - Demo: https://www.figma.com/file/pZ2YsUuyzX8RUujJalM3fM/TreeHacks-2024?type=design&node-id=2%3A6&mode=design&t=cVb0M5kASSwxPJ4N-1 - Team: 3 GitHub contributor(s) — Shirley Li (3 commits), Janani Pandurangan (2 commits), jananipands (1 commits) ## Devpost submission (written by the team) ### Inspiration Vaishnavi came up with the idea of creating a food nutrition app that would scan ingredient lists on product labels and return a summary of whether or not the user can eat that product based on their diet restrictions. Shirley added onto this idea by proposing the medical element of the app: checking whether or not that product contains ingredients that may negatively interact with their medication. Shirley came up with that idea due to her experience with taking antibiotics once. She had forgotten to ask the pharmacist if she could drink coffee while taking the antibiotic. We also wanted to target senior citizens as a demographic for app, going off our experiences with our grandparents and their difficulty in remembering food-drug interactions for their medication. We created a user friendly and intuitive app, keeping the target market in mind. ### What it does mendwell allows users to enter their medications upon account creation, which can later be modified in the user's dashboard. According to the user's medications, mendwell can indicate whether a food item is safe or unsafe to consume on the basis of food-drug interactions. For instance, if a user is prescribed atorvastatin for their elevated blood pressure, they would need to avoid certain food items, such as grapefruit, to ensure the efficacy of the medication and prevent side effects. If a user is unsure of whether a food item may conflict with their medication, all they would have to do is scan the food label or item with your camera, and mendwell will analyze whether the item is safe to eat or not. Once the analysis is done, mendwell will provide a comprehensive summary of the food-drug interactions by showing a list of the ingredients and medications that conflict. It will also provide more information about the medication upon the user’s request. ### How we built it We built mendwell using React Native, Tesseract OCR, Node.js, and the native libraries for iOS. In addition to these technologies, we used Figma for creating detailed workflows in the planning process of our application. ### Challenges we ran into We ran into so many challenges while building this application. One of our biggest challenges was figuring out React Native and the iOS build process. Since we are beginners to native applications and have a stronger base in web applications, configuring React Native to build the application on our phones was the hardest part. In addition, we learned that one of the APIs we planned to use for food-drug interaction is not a public API, even though it seemed like one. We did not have enough time to contact the API provider for the key, thus we needed to pivot quickly. Another challenge we faced was configuring the Tesseract OCR for our React Native application. Tesseract OCR does have wrapper code for JavaScript and after thorough research, we had seen that it worked for others using React Native. However, we severely underestimated how much our lack of React Native knowledge will interfere with the Tesseract OCR, and unfortunately, we were not able to set it up in time. ### Accomplishments we're proud of Despite not having a fully working project, we hit many great milestones throughout the project. Not only were we able to complete all of the screens for our UI, but we were also able to get the built-in camera working for our application, which is a great accomplishment based on how much time we’ve spent to make it work. Overall, we are very proud of our idea and the effort we’ve put through the last 36 hours, and we believe that our application has full potential to scale! ### What we learned Throughout this project, we faced a lot of challenges and as a result, we learned how to pivot quickly to avoid wasting time. For example, when we learned that the DrugBank API we were planning to use did not provide public API key, we pivoted quickly to generating mock data using ChatGPT in order to simulate various food-drug interactions for specific medications. Had we spent more time trying to figure out this issue, we would have not been able to finish building our UI screens and our Tesseract OCR connection. Another important thing that we learned is to always check whether the open-source applications we are using are up-to-date. We faced a lot of compatibility issues in the Expo client in our React Native app as well the tamagui React-Native framework. If we used containerization to deal with the discrepancies in our tools’ versions, the building process may have been a little easier for us. ### What's next We plan to build and release our application for the Android and iOS App Store. Once that is done, we are hoping to build a startup focusing on this application and potentially partner with hospitals to not only gather the user’s medication information, but also to have them outsource their patients to mendwell. In addition, we would like to integrate mendwell with existing nutrition and allergy applications, such as fig, which will help us build a customer base that we can eventually launch to market with. ## README (from the GitHub repository) # hackpack-react-native ### Overview In this hackpack we will go over the basics of React Native and Expo to build a simple mobile application. React Native is a framework that allows you to build native mobile applications using JavaScript and React. Expo is a toolchain built around React Native that allows you to easily build, run, and deploy React Native applications. Expo also provides a number of APIs that allow you to access native device functionality such as the camera, accelerometer, and location. ### Setup 1. Install Node.js and npm - Node.js is a JavaScript runtime that allows you to run JavaScript outside of the browser. npm is a package manager for JavaScript that allows you to easily install and manage JavaScript libraries. - You can download Node.js and npm [here](https://nodejs.org/en/download/). - To check if you have Node.js and npm installed, run the following commands in your terminal: ``` node -v npm -v ``` - For this hackpack, we will be using Node.js version 16.19.1 and npm version 9.6.7.
2. Install Expo CLI - Expo CLI is a command line tool that allows you to easily build, run, and deploy React Native applications. - To install Expo CLI, run the following command in your terminal: ``` npm install -g expo-cli ``` - To install Expo SDK, which is a collection of libraries that provide access to native device functionality, run the following command in your terminal (we'll be using version 48 for this hackpack) ``` npm install expo@48 -g ``` Note: You may find that newer packages may have less support across the community libraries and may not be compatible with the latest version of Node.js. If you run into any issues, try using an older version. ### Creating a New Project 1. To create a new project, run the following command in your terminal: ``` npx create-expo-app my-app ``` This will create a new directory called my-project with all the files you need to get started. 2. To run the application, run the following command in your terminal: ``` cd my-app npm start ``` With Expo, you can directly run your application on your phone. To do so, download the Expo app on your phone. Once you have the Expo app, you can scan the QR code that appears in your terminal. Alternatively, you can press 'a' in your terminal to run the application in an Android emulator ([instructions](https://docs.expo.dev/workflow/android-studio-emulator/)) or 'i' to run the application in an iOS simulator ([instructions](https://docs.expo.dev/workflow/ios-simulator/)). Notes: There will be several additional files in the my-project directory that tell Expo how to build and run your application. You can ignore these files for now. ### Hello World 1. Open the App.js file in your text editor of choice. You should see the following code: ```jsx import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Open up App.js to start working on your app! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ``` 2. Replace the Text component with the following: ``` Hello World! ``` 3. You should see the text "Hello World!" appear in the Expo app on your phone or emulator through live reloading. ![](/hackpack-assets/hello_world.png) ### Styling It's a little bland right now. Let's add some styling to make it look a little nicer. 1. First, let's take a look at the following code: ```jsx const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ``` The styles object contains a number of properties that describe how a component should be styled. Each property contains a number of key-value pairs. The key is the name of the style property aka the class, and the value is the value of the style property. For example, the backgroundColor property sets the background color of the component. The value of the backgroundColor property is '#fff', which is a hex code that represents white. Notice how these properties are camelCased versions of CSS properties. 2. Let's change the background color of the container to blue. Change the backgroundColor property to '#0000ff'. You should see the background color of the container change to blue. Notes: Flexbox is a layout system that allows you to easily position elements in a container. The flex property specifies how much space an element should take up relative to other elements in the container. The alignItems property specifies how to align elements along the cross axis. The justifyContent property specifies how to align elements along the main axis. Here is a [guide](https://reactnative.dev/docs/flexbox) that goes over the basics of flexbox. ### Components 1. Now let's create a component in a new `components/` folder named `button.component.jsx`. These are like lego blocks that you can use to build your application. Let's create a button component. ```jsx import { TouchableOpacity, Text } from 'react-native'; const Button = () => { return ( console.log('Button Pressed!')}> Click Me! ); }; export default Button; ``` 2. Export the Button component from App.js and import it into App.js. You should see the button appear in the Expo app on your phone or emulator. ```jsx export default function App() { return ( Hello world!