Your tasty app!
This app is a comprehensive CRUD (Create, Read, Update, Delete) application that allows users to get recipes in 4 ways, browse them, and create and manage their own collection of recipes.
The "Recipe Book App" offers a vast collection of mouthwatering recipes from all corners of the world. It provides an extensive array of recipes, including popular dishes, user favorites, and even a space to create and manage your very own recipes.
The app utilizes the TastyAPI to fetch and present the wide array of recipes.
The "Recipe Book App" is a true lifesaver for passionate home cooks like my mom who may have a chaotic collection of cherished recipes. With the ability to store all her favorite recipes in one place, she can bid farewell to the days of hunting through browser bookmarks, sifting through books, and searching for handwritten notes. Now, users like her can effortlessly save recipes they love, as well as her cherished handwritten recipes, all within the app. The app streamlines their culinary process, for organizing and experimenting with their treasured dishes in one convenient location.
(So this app could have been for my mom but she is still not good with computers 😅)
https://katherinakulinich.github.io/Recipe-Book-App/#/
This page introduces its features and functionality, giving you an overview of what it offers.
This page includes 12 static categories, each brimming with a variety of recipes. Simply click on a category card to access recipes within that specific culinary category.
Discover the most popular and highly rated recipes in this section.
Authenticated users can save recipes they love to their "Favorites" for easy access. You can also remove recipes from your favorites in this section
Authenticated users can store and manage their own recipes. Here, you can create, edit, or delete your unique culinary creations.
The Recipe Description Page is a comprehensive resource that allows users to dive into the heart of a recipe, providing a holistic understanding of the dish, from its ingredients to the cooking process. It caters to users seeking both visual and textual guidance, ensuring that every culinary adventure is accessible and enjoyable.
- Recipe Name
- Recipe rating
- Recipe Photo: The user has the option to zoom in for a closer look. If the recipe boasts multiple photos, you can explore them using a carousel feature.
- Tags: Located just below the recipe photo, you'll discover a comprehensive set of tags that provide insights into the recipe's ingredients, cuisine, and more.
- Nutritional Information: This includes details on calories, proteins, fat, and carbohydrates.
- Creation Date
- Ingredients and Description
- Cooking Process Steps
- Recipe's Video: If the recipe includes a video, users can watch the cooking process. For recipes without a specific video, the app offers a random cooking video.
Select recipe from a wide range of categories
Explore the most loved recipes by the app's community.
Utilize the search function in the header for quick access to specific recipes. It's a speedy way to find what you're looking for.
Each recipe comes with tags (3 tags on the recipe card and full set of tags on the recipe description page). By selecting a tag under a recipe, you can discover other recipes that include that tag.
The authentication process includes options for Google and GitHub authentication, as well as standard registration. Offering multiple authentication methods gives users the flexibility to choose the option that best suits their preferences and security concerns.
Users can choose to log in using their existing Google account. By clicking the Google authentication button, the app securely connects with their Google account, and they are granted access to the app.
Similar to the Google option, users have the alternative of logging in using their GitHub account. By selecting the GitHub authentication button, the app establishes a secure connection with their GitHub account, providing them with access.
For users who prefer not to use their Google or GitHub accounts, the app offers a standard registration process. Users can sign up by providing their email address and creating a password.
Those who chose standard registration can simply enter their registered email and password to access their account.
If a user attempts to register or authenticate with an email address through both Google and GitHub, the app will detect the email duplication. An error message will be displayed, informing the user that the chosen email address is already associated with another authentication method.
On the "Favorites" page, the user will find a list of recipes they've marked as favorites.
Each recipe card within the app features a special flag under the recipe's photo. When a recipe is not in the user's list of favorites, this flag is displayed in a transparent state. To add a recipe to their list of favorites, the user can tap on this flag. Once selected, the flag transitions to a vibrant, full-color state, indicating that the recipe has been successfully added to their favorites.
To remove a recipe from the list of favorites, the user can do so exclusively on the "Favorites" page. To unsave a recipe, the user can tap on the flag under the recipe photo they wish to remove from their favorites. When a user taps the flag under a recipe that is already in their favorites on any page except the page with favorites recipes, the app displays a message indicating that the recipe has been added to favorites before.
Let's delve into the details of how users can create and manage their own recipes
On the "My Recipes" page users will notice a button with a "plus" icon. When a user taps the "plus" button, a form for creating a new recipe will appear.
- Recipe Name: Users can start by giving their recipe a name.
- Recipe Photos: Users have the option to upload up to three photos to showcase their culinary creations, making the recipe visually appealing.
- Recipe Category: A list of predefined categories is available, from which users can select the most relevant one for their recipe.
- Tags: Users can add descriptive tags to their recipes.
- Ingredients: The recipe should include a minimum of two ingredients.
- Cooking Steps: A minimum of three cooking steps should be provided, detailing the process of preparing the recipe.
- Recipe Description: A text input field is available for users to provide a brief description of the recipe or share additional insights or tips.
- Nutritional Information: Users can specify the nutritional content of the recipe, including calories, proteins, fat, and carbohydrates.
Each of the user's own recipes is presented in a card format. At the bottom of the card, there is an "EDIT" button. When the user clicks the "EDIT" button, a popup with editing form appears, displaying the existing data for the recipe. Users have the ability to change the recipe's details, such as the recipe description, ingredients and cooking steps. After making the desired edits, users can choose to resave the recipe with the updated information.
Near to the "EDIT" button on the recipe card, there is a "DELETE" button. If a user decides to delete a recipe, clicking the "DELETE" button triggers a confirmation message to ensure that the user intends to delete the recipe.
The app provides a user-friendly filtering feature that allows users to refine their recipe searches.
🔹 On every page that displays recipes, users can easily access the filter feature through a round button with a filter icon. The filter feature offers three primary sorting options to cater to user preferences:
- From latest recipes to old
- From oldest to new
- From high rated to less rated
🔹 On the "My Recipes" page, in addition to the universal sorting options, users can filter their own recipes based on categories. This empowers them to categorize and organize their personal recipes.
Pagination is a feature that enhances the user's ability to navigate through the collection of recipes efficiently.
The app dynamically retrieves recipes from the server, and the number of recipes received can vary due to server responses. Some objects returned from the API contain individual recipe data, while others may include an arbitrary set of recipes. This behavior is a result of server-side operations and may lead to an inconsistent number of recipes on each page.
Users have the option to switch between a light and dark theme, allowing them to tailor the app's appearance to their preferences and needs.
Thank you for taking the time to explore the details of the "Recipe Book App." I hope you'll give it a try, and that you find it a good and useful app. If you have offers or wishes you can write me on LinkedIn or email. Links are in the footer. Happy cooking! 🍽️📱👨🍳