The ingredient display doesn't look right, some items should have a space between the quantity and the unit, while others should not.

Find a way to resolve this.

Make the necessary changes to ensure this app can be used as a progressive web app, enabling a user to install it onto their device from the browser.

Add a system for deleting a single recipe, it should be available from the menu on the top right of the recipe. There should be a warning message before deleting and a toast notification to confirm.

Create a system for editing recipes. It should be available from the menu inside the recipe.

A view recipe page should load when the user selects a recipe. The page should be passed the ID of the recipe selected and make a call to the database requesting all the data relevant to that recipe.

Add a section at the bottom of the recipe view page that allows a user to see when a recipe was created.

A Material UI theme should be selected and applied to the project.

Set up the express API server that will be used to provide communication between the database and the web app.

A simple test request to pull all the recipes from the recipe table should be part of this.

Make an experience that will ask users a series of questions about what they might like to eat, and then using the results it will recommend a recipe for them.

Add a tag system which will allow key words or tags to be attached to a recipe. These will later be used for searching and reccomendation alogirthems.

It will require a tag table, with the columns key word ID, key word and recipe ID, linked to the recipe. As a result a new route on the API will be needed for adding key words. Tags can be multiple words, but will be capped at 30 cahracters.

Replace the favorites page with a categories page, the favorites page should move into settings under the account section as a sublink.

The categories page should have large picture buttons for each of the categories with the text laid over the top, upon clicking on it should open a page showing:

• At the top 4 picture recipes picked from random, titled recommended (2 by 2 grid)
• A list (same as the browse page) showing all the recipes in that category

Enable ingredients to be marked as optional, which will then be seen as a chip in the ingredients list. This will require changes to the database and API to accommodate the feature

Add a chip to the country page, when clicked it will open a browser recipes page, showing recipes from the selected country. The title of the page should show the country.

Add the following columns to the recipe database:

• recipe country ID (including a new table for countries) can be null (examples - British, French)
• recipe region ID (including a new table for regions) can be null (examples - Mediterranean, Asian)
• recipe category (including a new table for categories) can be null (examples - deserts, breakfast, baking, bread)
• recommended accompaniment (links back to the recipe id for another recipe)

The bottom item on the browse recipes list gets cut off and is hidden behind the nav menu. This should be fixed, possibly by a page component that can be called for any page to prevent the issue in the future.

Bring the project up to standard and align it with the newly created API (https://github.com/MatthewNobes/recipe-book-api).

Using a monorepo tool, like NX, combine the front end app and API into a single repository, will require pipelines to be rebuilt

An SQLite database is needed, full details will be provided soon.

The following activities need to be done ahead of release one:

• re-versioning the package
• package updates
• check unit tests
• refactor any inefficient code
• set up table switch when in dev and prod
• check manifest for missing properties
• removal of redundant code (old console.log's etc.)

Create a system that will allow a user to add items to their favorites, the heart icon next to a recipe reflecting if it is in their favorites or not.

There should be an option under the settings page to open the favorites page, this page should show a list of the favorite recipes.

It should also make sure that the favorites heart icon button is not visible unless the user is logged in

As a user, I wish to be able to modify parts of the application's appearance, such as changing the text size and switching between light and dark mode.

Create a form for creating a new recipe. This page will need space for:

• recipe name
• description
• preparation time
• cook time
• personal difficulty
• A list block for adding the instructions in, items in here should have a number, instruction and an X button on the end to delete it
  • Instructions should be drag and dropable
• A similar list block for ingredients, with the following options
  • x remove button on the right-hand side
  • textbox for the ingredient name
  • number box for quantity (e.g. 1)
  • autocomplete box for measurement type (e.g. teaspoon, g, kg, etc.)

Options

All this content will only be sent to the database once the user has hit the save button.
An add to my favourites button should also be available. Upon completion, it will load up the recipe page with this recipe loaded into it (yet to be created).
A clear button will also be present to clear the form of all information (reload it)
A cancel button should also be present to cancel the addition of a new recipe.

Changes

The form is being remade to fit into a stepped approach. It also not allow the user to:

• add new countries
• add new categories
• add new regions

They will be able to add new ingredients still

The recipes on the home screen should be chosen at random from all the recipes in the recipes table.

It may also be worth looking at how the gallery scales on larger screens.

Add a settings page, replacing my account. It should have a list of pages (not setup yet), containing the following pages:

• my account
• accessibility
• admin options (eventually will be visible to only admin users)

Create the login system. This will require an authentication system (username and password), it will also be used for authentication with the API (permissions system).

Users will be prompted to authenticate before accessing their account, adding or editing recipes.

The browse page should be capped at a reasonable number of recipes, this will prevent issues when the database gets larger. When the user gets to the end of the list, it should either have a button to load more or automatically load some more.

The user should be allowed to set a cook time of 0 if no cooking is required for the recipe.

Add a system for adding notes about a recipe. A recipe should be able to have multiple notes, ideally stored as an array in the table, for simplicity of retrieval.

This will require a new form section where notes can be added for notes. Notes should be optional.

A new section under the method should be in place for notes, they should be displayed in a MUI list

Add a toast notification system that is declared at the high app level that can be called at any point in the app by resetting the redux state for it to be true, passing it a new message and colour property.

Set up the initial structure, complete with:

• Header
• Four routable pages using https://mui.com/material-ui/react-bottom-navigation/ & react-router
  • Browse all
  • Favourites
  • My Cupboards
  • My Account

As an admin, I wish to be able to add, edit and delete countries, categories and regions. I should be unable to delete ones that are in use by active recipes.

An app icon needs to be created to reflect the apps purpose. This should then be made to be scaled for a wide range of devices.

The units combobox on the add ingredients model needs to be updated to pull values from the database rather than using manually fed values.

Add a column in the DB for vegetarian/vegan, this can be one of three different options:

• null: not vegetarian or vegan
• vegetarian
• vegan

Create the about page to inform users about this project, provide a link to the repository and a link to the API swagger for the current instance.

The application and express server need to be packaged up into a docker image or two.

If packaging separately, the react app needs to be able to receive the port of the API or standard ports need to be agreed. The IP will also need to be set for whatever server it is running on.

This issue required testing on the deployment server before closing.

Generate a CI pipeline for running the unit tests. There should also be an ESLint workflow and a CodeQL one too. This may also involve mocking up the API and rewriting some tests, so tests can be executed without the API running.

All tests are passing but some warnings have been raised, these should be resolved.

The appearance menu is broken, when you apply settings it causes the page to lag and the setting is not applied. This needs to be fixed.

On larger screens, the cut-down description used in the list is too short, it should be allowed to run for longer.

The API should be divided into a separate repository, enabling easier management of the API.

Make an error 404 page

Add a back button on the left of the header, this will be enabled for when on pages that are when on pages that are spun off from the main pages, like some of the settings pages.

Experiment with the text placement at the same time, it may look better with the text centred.

Add a recipe search on the browse recipe page. Users will be able to search by name, description, keyword or ingredient.

It will use a debouncer and could in future be open to autofill using AI.

Make a picture gallery for the home page that cycles through 5 images, with (imaginary linked recipes). This is a starter for the home page that will be built on more in the future.

Add a system to allow the browse recipe list to be filtered. The following filter options should be available:

• country
• difficulty
• total time

More options may be added in the future

Create a recipe list card component that can be used on the browse all page.

Set up the recipe card list component properly that is fed an array of recipe ID's and requests each recipe from the table.

Calls to the database will need to be made for

• getting all recipe ID's (/api/recipe/all) - a view should be made in the database to simplify this
• getting a recipes details from its ID (/api/recipe/:recipeID)

Add a can be frozen badge, this will let you know if cooked portions can be frozen and if so for how long. It will require additional database and API work.

A code license should be decided and attached to the project.