Homework 11 - mobile app interactivity
Overview of FlavorQuest
FlavorQuest is a comprehensive recipe-sharing and meal planning app designed to streamline the cooking experience for users of all skill levels. With a user-friendly interface and innovative features such as ingredient listings, estimated pricing, and store information, FlavorQuest empowers users to discover, create, and share delicious recipes effortlessly. Through gamified experiences like Recipe Roulette and a vibrant community of cooks, FlavorQuest offers a unique and engaging platform for culinary exploration and inspiration.
Key features
Recipe-Sharing Platform: FlavorQuest serves as a comprehensive recipe-sharing platform where users can discover, share, and explore a diverse range of culinary creations from a vibrant community of cooks.Gamified Cooking Experience (Recipe Roulette): A unique feature of FlavorQuest is Recipe Roulette, a gamified cooking experience where users can create dishes based on random ingredients in various game modes and challenging topics. This feature adds an element of excitement and creativity to the cooking process, encouraging users to experiment with new flavors and techniques.
Individual Screen details
The following section documents the individual screens of the application, the elements on each screen, and how the user is expected to interact with the screen.
**NOTE: the following sections should be repeated for each of your screens, that is 2nd level screen name followed by a wireframe example and an as-built screen shot.
Open screen
The Open screen serves as the introduction to the starting application, all users are greeted to this screen when launching the application
Interactivity on this screen
Upon launching the application, users will encounter a button allowing them to navigate to the dashboard or home screen of the app with a simple interaction.
Wireframe design
Below is my wireframe image.Opening Screen: Upon launching the application, users are greeted with an opening screen prompting them to initiate by pressing the start button.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Home screen
The Home screen serves as the central node for this application. All other screens return to this screen.
Interactivity on this screen
Users will have the ability to search for available recipes and click on the recipe card to access the Recipe Screen. Additionally, they can utilize the bottom navigation system to navigate to other screens such as the game screen, meal planner screen, and settings screen.
Wireframe design
Below is my wireframe image.
Home Screen: After starting, users arrive at the Home Screen. Here, they have various options: navigating to different screens via the bottom navigation bar, accessing different widgets, or interacting with recipe pictures with Star ratings to preview recipes and ingredients.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Game screen
The Game screen serves as the Gamified dashboard experience for this application. This is where users can play various recipe gamemodes and manage or summon different types of unique/low or high tier quality ingredients to use for their recipes in different gamemodes
Interactivity on this screen
Users will exclusively be able to customize the creation image for the game screen by selecting a custom image they wish to display. Additionally, they can utilize the bottom navigation system to navigate to other screens such as the game screen, meal planner screen, and settings screen.
Wireframe design
Below is my wireframe image.
Recipe Roulette: Clicking on the game controller icon within the Home Screen leads users to Recipe Roulette dashboard, a custom feature where they can discover recipes randomly or through a playful, gamified experience.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
MealPlanner screen
The MealPlanner screen serves as the Meal Planner for this application. This is where users can select the days they would like to plan their meals for future preparation, having an overview of what meals/recipes to create during a specific day
Interactivity on this screen
Users can input a recipe or dish they wish to plan for the future. Clicking “Save” will store the information, while “Clear” will delete it and remove it from storage. Additionally, clicking on the navigation headers arrow will take users back to the home screen. The calendar icon enables users to preview the calendar and select a specific date, while the navigation arrows to the right of calendar icon allow for browsing through previous or next dates.
Wireframe design
Below is my wireframe image.
Meal Planner: Lastly, by clicking on the calendar icon within the Home Screen, users are directed to the Meal Planner feature. Here, they can plan their meals, organize recipes, and manage their culinary schedules effectively.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Recipe screen
The Recipe Screen serves as the central node for this application. This is where users can use Interactive Ingredient Listings, Estimated Pricing, Store information, and other features for a selected recipe and also view the procedure, switching to display ‘Ingredients’ or ‘Procedure’ when clicking on the buttons
Interactivity on this screen
Users can access the ingredients and procedures/instructions of the chosen recipe by clicking on the respective buttons labeled “Ingredients” or “Procedures”. Moreover, they can utilize the navigation header arrow to return to the home screen.
Wireframe design
Below is my wireframe image.
RecipeScreen: Upon selecting a recipe from the Home Screen, users are directed to the Recipe Screen. Here, they encounter a preview interface presenting two options: Ingredients or Procedure. These options provide interactive features such as Ingredient Listings and step-by-step directions. The Ingredient Listings feature enables users to explore alternative ingredients, locate stores selling specific items, and estimate prices. Additionally, users have the convenience of ordering ingredients for delivery to their desired location directly from the interface.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Setting screen
The Setting screen serves as the Settings for this application. The users would be able to select or toggle different settings off or on depending of preferences, along with adjusting different elements for personalization during the use of the application
Interactivity on this screen
Users can toggle the dark mode theme on or off by clicking a dedicated button, which will switch the background to dark and the text to a lighter shade, applicable only within this screen (still fixing on other screens). Additionally, users can click on the navigation header arrow to return to the home screen.
Wireframe design
Below is my wireframe image.
Setting Screen: By clicking on the gear icons located within the Home Screen, users are directed to the Setting Screen. Here, they can customize application preferences and adjust settings according to their preferences.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Snack code for this screen
(this is a level 1 section, provide a snack that contains your currently working app which includes your screens and a navigation system. )
Reflection
- Discuss your experience coding hooks in this assignment. Which hooks were hardest? Which easiest? What helped you figure them out?
UseEffect and UseContext were the most challenging hooks for me because I hadn’t used them extensively. However, I recognized their specific purposes; UseEffect for tasks like API calls and UseContext for implementing themes such as toggling dark mode. While I grasped the general concepts, like UseEffect for data fetching and dynamic DOM changes, and UseContext for passing data through the component tree, I still haven’t fully mastered them nor understood useContext the fullest.UseState, on the other hand, was the easiest because it was heavily utilized in my application and its basic structure was straightforward. Understanding how to get, set, and initialize variables with a single useState call was intuitive.What really helped me understand these hooks were the examples demonstrated in class, showcasing various use cases and functionalities. Additionally, I found that discussing them in Chat was an efficient way to gain a general understanding of their usage.
- How much time did you spend on this specific assignment (homework 11 - interactivity)?
Developing interactions across different screens took up the majority of the time, totaling approximately 8 to 10 hours. Much of this time was spent troubleshooting bugs and errors, particularly those that could have significant implications for the entire screen. Presently, there are still visual bugs on certain screens that may be challenging to rectify or have been overlooked.
- What was the easiest part of this specific assignment (hw11)?
Designing the structure and defining the purpose of the application using Figma and preparing the pitch were the most straightforward aspects of the assignment. Developing certain static screens became simpler with the assistance of Chat to address visual bugs or errors, all centered around refining the visual design of the screens using stylesheets.
- What is the hardest part of this specific assignment (hw11)?
Understanding the advanced features and syntax of React Native posed a significant challenge for me and required extensive research and seeking out examples for clarification. The code structure of the application I developed was particularly difficult to comprehend compared to the examples provided in class. I often found myself relying on Chat for assistance in resolving issues related to visual bugs or errors in the code. However, even with this support, I encountered difficulties in finding effective solutions and often needed to ask additional questions to fully address the issues. Overall, the most challenging aspects revolved around troubleshooting errors and grappling with the complexities of React Native code, which consumed a considerable amount of time despite the assistance from Chat.
- Discuss your overall experience using Snack and developing this mobile app.
Developing this mobile application was both challenging and incredibly rewarding. It felt particularly satisfying when a screen functioned exactly as intended and closely resembled the planned wireframe in terms of visual appeal. However, the process of developing the app proved to be quite time-consuming, encompassing both the visual design and functional aspects. I still encounter difficulty in pinpointing and resolving visual bugs within my program.My experience with using Snack on expo.dev was highly positive. It provided a convenient platform for developing universal apps and web applications without the need for local imports or additional setup, as everything was readily available on expo.dev. The preview feature was especially helpful for identifying potential visual issues or broken elements. Overall, I find Snack on expo.dev to be relatively easy to use, as it eliminates the need to download and configure additional tools, providing everything necessary for application development within the platform.