Recipe Website- Dessert Heaven -React project

Contact details of the developers:

Emanuel Sleyman, Depinder Kaur and Magnus Nording

Project documentation:

This project contains a source folder src which further contains the following-

• components folder
• pages folder
• images folder
• App.jsx, App.css and main.jsx files

Each of the above is explained below.

Components

Each component has its own .jsx file and .css file.

Navigate to the components folder as follows-

Project --> src --> components

Within the components folder, the following sub-folders can be found (each of which contains respective components)-

1. Categories

• CategoriesBar is parent to the AvailableCategories component and uses it to get value for the selected category (if any category is selected by user).

• AvailableCategories is child to the CategoriesBar component and passes the value of all available categories. It even handles category selection, by passing the value of selected category to its parent i.e. CategoriesBar.

2. Footer

It contains references to the developers and contributors and name of the contributors group.

3. Header

Contains only the HomeHeader component.

• HomeHeader contains header i.e. site name, some citations to the home page.

4. Main

Contains components Main, AvailableRecipes and RecipeCard which are explained below-

• Main uses AvailableRecipes component to print out all the available recipes on the home page. Even has a ScrollButton component to scroll to top of the page.

• AvailableRecipes contains a function to create a RecipeCard, function which gets all available recipes

• RecipeCard creates a recipe card (which itself is a link to the full-recipe) for each of the available recipes as displayed on the home page.

5. RecipeMetaData

RecipeMetaData folder contains components which can be re-used in the project. eg. IngredientCount and RecipeTime.

• IngredientCount displays the number of ingredients used in the recipe.

• RecipeTime displays the time taken to cook the recipe.

6. ScrollButton

When the button to scroll up automatically is available, how much to scroll until its visible position.

7. Search

Contains only the SearchBar component.

• SearchBar component is used to fetch input from user input and then update the state. it also has a prop that allows parent components to be updated with certain values

8. Utils

• CommentForm component takes in commentData and recipeId as parameters and the makes a post request to the server.

• CommentList component takes in comments and the print them out in a list of comments with username/or anonymized username, comments and date of comment.

• HomePage component has functions to fetch recipes, get sorted recipes and fetch by category.

• RecipeCard contains util functions to display a star-rating, categorize difficulty level for a recipe, calculate the corresponding difficulty bars and format the recipe time.

• ViewRecipe: Important funtions when viewing the recipeCard and view a recipe in a seperate window, fetchComments, saveRecipeRating, getShortUnit and unit conversions.

9. ViewRecipe:

• CommentForm: logic for handling and creating a new comment about a recipe

• CommentList: component for retrieving comments and printing them out in a listed form

• Ratings: Handle rating comment

• ViewRecipe: parent component for creating a new recipe page with all components and having a function to create a pdf from the recipe template

• RecipeMetaData: details about the recipe, rating, time to complete, ingredients

10. ScrollToTop:

This component is used in the Root.jsx file in the pages folder so that we land at the top of the newly opened page.

Pages

Navigate to the pages folder as follows- Project --> src --> pages

• Error: When a page not found, send the error message

• Home: The home page / landing page with contributing components

• Root: Root includes React Outlet which is a component provided by React Router that serves as a placeholder for child routes within a parent route.

Images

The images folder in the src folder contains the image used on the landing page.

Other files

The following files can be found in the src folder as well-

• App.jsx: It contains the React-Router, which further provides route to different pages, eg. ViewRecipe page to view a recipe, CommentForm page to leave a comment, ErrorPage that displays en error.

• App.css: It serves as the main CSS file for the app and therefore contain the root styling.

• main.jsx: This is the main entry point for a React application, responsible for rendering the root component.

Other relevant information

Swagger link to the backend api.

This project has been deployed on Netlify: open project on Netlify

You can even use the following link to open this project in any browser-

https://dessertheaven.netlify.app/

or scan the following QR-code to open it on your mobile

Useful Resources

Folder structure in a React project (1)

Folder structure in a React project (2)

Create recipe ingredients as tickable using React State

Understand prevState in React

Create recipe instructions as tickable using HTML DOM

Create a Scroll-to-top button

How to write JEST test (1)

How to write JEST test (2)