This is an expo-managed React Native mobile app with a Google Firebase backend that lets a user create and save recipes. Nutrition information for ingredients can be inputted manually, or populated automatically by scanning a barcode, which then is the input to an FDC API query.
This app is published at https://expo.dev/@yanag/NutritionApp. Scanning the QR code using the Expo Go app will download it and run it on your phone. The app gets re-published at that link with every push to main, using GitHub Actions.
Note: This app was only tested on an expo-managed workflow (ie through the Expo Go app) on an Android phone
Note: The video was recorded from Yana's personal Android phone, while the screencaps were taken from an Android emulator, which is why some of the UI components look different.
(Unmute for sound!)
20210917_120319.mp4
Login Screen: Displays a button which lets the user sign in with their google account.
Home screen: Displays the user's google icon in the top right and the user's name in the center. Has a logout button in the bottom left, and a "new recipe" in the bottom right, which opens a model. Allows the user to select between existing recipes and to go to them.
New Recipe Modal: Allows the user to specify the name of their new recipe.
Recipe Screen: Displays the name of the recipe at the top, and a table with all of the ingredients of the recipe. Each ingrient has a name, a number of servings, and calories per serving specified. Each ingredient can also be deleted. The total calories for the recipe is displayed near the bottom left. The recipe can be saved (which updates the data in the firestore database) or deleted. New ingredients can be added via the "add ingredients" button at the bottom right, which opens a modal.
New Ingredient Modal: Allows the user to manually input info for their new ingredient, OR lets the fields get auto-populated using data from the FDC database, after taking a photo of the barcode.