Recipe Shopper

##Functional characteristics - ** Recipe management **: Create, view, and delete recipes, supporting ingredients, portions, preparation time, and cooking steps - ** Ingredients library management **: Independent ingredient library, supporting new creation, editing, and deletion; automatic completion when adding recipes - ** Shopping cart **: Add the required recipes to the shopping cart and plan meals with one click - ** Smart shopping list **: Automatically aggregate ingredients from all shopping cart recipes, and combine the quantities of the same ingredients (such as 2 cups of flour + 1 cup of flour = 3 cups of flour) - ** Import/Export **: Supports backup and recovery of recipe data in JSON format ###Manage the ingredient warehouse Go to the **Ingredients** page to create commonly used ingredients in advance, and will be automatically completed when you add recipes later. | 1 |Click on top navigation **Ingredients**| - |Enter the ingredient management page| | 2 |Enter the name of the ingredient in the input box and click **Add**| Enter `flour`| Ingredients appear in the grid list below| | 3 |Add a few more ingredients| `White sugar`,`butter`,`egg`| The list shows 4 ingredient cards| | 4 |Click the **Edit** button on an ingredient card| Change 'flour' to 'low-gluten flour'| Click **Save** and the name is updated| | 5 |Click the **Delete** button on an ingredient card and confirm| Delete `white sugar`| Ingredients disappear from the list| --- ###Create a recipe Click on the top navigation **Add Recipe** to create a complete recipe. | 1 |Click **Add Recipe**| - |Enter the recipe creation form| | 2 |Fill in the recipe name| `Chocolate cake`| Name field filled in| | 3 |Fill in the serving amount and preparation time| Servings: `8`, Prep Time: `45` |Optional fields filled in| | 4 |Enter the first ingredient name| `Low-gluten flour`| The Auto Complete drop-down appears and select existing ingredients| | 5 |Fill in the first ingredient quantity and unit| Qty: `2`, Unit: `Cup`| Table rows are complete| | 6 |Click **+ Add Ingredient** to add more ingredients| `Butter` / `0.5` / `cup`;`egg` / `3` / `pieces`| A total of 3 rows of ingredients| | 7 |Enter a new ingredient name (not in the library)|`Cocoa powder`| Drop-down displays **+ Add "Cocoa Powder"**, click Create| | 8 |Fill in cooking steps (optional)|`Mix all ingredients and bake at 175°C for 30 minutes`| Text area filled in| | 9 |Click **Save Recipe**| - |Jump to the recipe list and display the newly created card| > An auto-complete drop-down box will appear when entering an ingredient name, and select an existing ingredient or enter a new name to automatically create it.💡 --- ###Create a second recipe (test the aggregation feature) Repeat the above process to create another recipe that uses the same ingredients. | 1 |Click **Add Recipe**| - |Enter the creation form| | 2 |fill in the name| `Banana bread`| - | | 3 |Add ingredients| `Low-gluten flour` / `1.5` / `cup`| Sharing ingredients with chocolate cake| | 4 |Add the second ingredient| `Egg` / `2` / `pieces`| - | | 5 |save| - |List shows 2 recipes| --- ###Shopping cart and smart shopping list | 1 |Click **Add to Cart** in the recipe list| Click the 'Chocolate Cake' button| Top Cart button badge number changes to `1`| | 2 |Add another recipe to your shopping cart| Click the button for Banana Bread| Badge number becomes `2`| | 3 |Click on the top **Cart** to view your shopping cart| - |Display 2 recipe cards| | 4 |Click on the top **Shopping List**| - |Display aggregated shopping list| | 5 |Verify ingredient aggregation| - |`Low-gluten flour` displays `3.5 cups`(2 + 1.5),`egg` displays `5 cups`(3 + 2)| | 6 |Check the purchased ingredients| Check `Low-gluten flour`| Text appears strikethrough effect| >This is the core function: the same ingredients (same name + same unit) will automatically merge the quantities. --- ###View recipe details and deletion | 1 |Click the **View** button in the recipe list| Click on `Chocolate Cake`| Pop-up window displays complete recipe information (name, ingredients, steps)| | 2 |Click the **Delete** button and confirm| Delete `Banana Bread`| Recipes disappear from list| --- ###Import/Export Function | 1 |Click on top **Export/Import**| - |Enter the Import and Export page| | 2 |Click on **Export Recipes**| - |Browser download the `recipes-export-xx-xx-xx.json` file| | 3 |Select import mode **Add to existing**| - |Select the Add radio button| | 4 |Upload the just-exported JSON file| Select files to download| **Import Recipes** button becomes clickable| | 5 |Click on **Import Recipes**| - |Display the "Import completed" prompt to skip duplicate items|