This repository contains my cookbook app and the extended cookbook api from the advanced web development homework.
Here are some useful information and features of this application.
I have used a framwork called ant design to design this website.
This website is responsive on tablets, laptops and computers. The only component that is not responsive on smartphones is the menu.
To process the whole user input and for its validation i have used formik with yup.
When an user has successfully created, edited or deleted something, the app displays a success message that is sent from the api. When an 400 or 404 error occurs the app displays an error message that is sent from the api. For all other errors that occur the status code and the status text are displayed.
On the dashboard page you have a dropdown menu to sort all recipes by name, rating, calories, fat, newest and last edited. You can filter the recipes according to their ingredients and additionally there is a dropdown menu where you can select multiple ratings and filter after them.
When an user tries to delete a recipe, an ingredient or an ingredient inside a recipe a warning appears. This warning asks the user if he really want to delete the item. So you cant accidentally delete an important recipe, with all his data.
This app and api are fully dockerized, to get the system running you need to have docker version 19.0+ and docker-compose version 18.02.0+ installed on your system.
First we need to pull all needed images with:
docker-compose build
Second we need to start all defined containers with:
docker-compose up
After all container are started, the app runs on port 3000.
Here you can find detailed descriptions for each page in this app.
Accessible over ("/")
The dashboard is the main page of this app. It lists all recipes with their rating, calories and fat. Also it shows the created and updated time of the recipe. Each recipe has an edit button, from where you come to the detailed recipe page and a delete button to delete the recipe. At the top of the dashboard is a toolbar, there you can create a new recipe, and immediatly add ingredients to it. If the ingredient does not exist you can create it during the recipe creation. In the toolbar you can sort the recipes according to a specific field and filter them for a specific ingredient or multiple ratings.
Accessible over ("/recipe/:recipeId")
You need to press the edit button of an recipe in the dashboard to come here. On the recipe page you can edit the recipe. In one section you can edit the name, the cooking instructions and the rating. In an other section you can edit the ingredients inside the recipe or delete them. Also you can add new ingredients to the recipe with an amount and an unit. When your ingredient does not exist, you can directly create it. At the top of the page is a button that you can use to delete the current recipe and it redirect you immediatly to the dashboard page. On the bottem of the page you can see the calories and fat from the whole recipe, with a funny food joke.
Accessible over ("/ingredient")
The ingredient page shows all existing ingredients with their created and updated time. To geht their you must be click in the menu on "Ingredients". Each ingredient has an edit button where you can change its name. Also it has an delete button to delete the ingredient and deletes it from all recipes it is in. At the top of the page is a create button, their you can create a new ingredient.
MIT
Copyright (c) 2020, Julian Segeth
All rights reserved.