Project Documentation

Setup

Open two terminals: one for the frontend and one for the backend.

• In the first terminal, navigate to the client folder and run:

  npm start

  This will start the frontend.

• In the second terminal, navigate to the server folder and run:

  dotnet run

  This will start the backend.

---

Home Page

• You'll start on the Home Page, where you'll find options for Login and Register.
• If you're already a registered user, click the Login button to go to the login page.
• If you're a new user, click the Register button to go to the registration page.

---

Register Page

• On the Register Page, you need to enter a username and password.

• The username must be unique.

• The password and confirm password fields must match.

• By default, all registered users will have the role of "user."

• An admin role can be assigned to a user through the database using:

  UPDATE users SET role = 'admin' WHERE id = user_id;

• After registering, you'll be redirected to the Login Page.

---

Login Page

• On the Login Page, enter your username and password, then click the Login button.
• If the credentials are correct, you'll be redirected to the All Recipes page.

---

All Recipes Page

• On the All Recipes Page, you can view recipes added by all users.
• The header contains a navigation bar with links to the All Recipes page and the My Recipes page.
• It also displays the currently signed-in user and provides a Logout option.
• You can refresh the list using the Refresh button.

Access Control:

• Admins have options to edit and delete any recipe.

  

• Users can only manage their own recipes on the My Recipes Page.

---

My Recipes Page

• Clicking on the My Recipes Page in the navbar will redirect you to the My Recipes Page.
• Here, you can view all the recipes you've added.
• You can view, edit, and delete your recipes.
• To add a new recipe, click the Add New Recipe button.

---

Add New Recipe

• Clicking the Add New Recipe button will display a form modal.
• In the form, you need to fill in:
  • Recipe Name
  • Category
  • Image Link
  • Ingredients
  • Instructions
• After entering the image link, a preview of the image will be displayed to verify if it's supported.
• Click Add Recipe to submit the form.

---

View Recipe

• Clicking the View button on a recipe card will display a view modal.
• The modal will show:
  • Recipe Name
  • Image
  • Category
  • Ingredients
  • Instructions
• At the bottom, there will be options to Edit, Delete, and Close the modal.

---

Edit Recipe

• Clicking the Edit button will display an edit modal.
• This modal contains a form pre-filled with the recipe details.
• You can modify the details and click Save to update the recipe.
• The Edit option is available only to admins and the user who created the recipe.

---

Delete Recipe

• Clicking the Delete button will open a delete modal.

• The modal will display a warning that the process is irreversible and ask:

  "Are you sure you want to delete it?"

• Clicking OK will delete the recipe.

• Clicking Cancel will keep the recipe.

• This option is available only to admins and the user who created the recipe.

---

Logout

• A Logout option is available in the header.
• Clicking Logout will log you out and redirect you to the Login Page.