CRUD Recipe Website -- 2

No GitHub or other open source code already uploaded on the web. Server-Side Framework: Node.js with express, nodemon and ES12 syntax Template Engine: Pug CSS Framework: Bootstrap 4 Database: PostgreSQL Host: Will uploaded to a cloud such as Heroku so separate configuration files, for example .[login to view URL] (development) and .[login to view URL] Project files and further explanation here: [login to view URL] Request: • Responsive for all types of devices • If PostgreSQL doesn't have a DATABASE called recipe_manager it CREATES it. If it doesn't have a TABLE called recipes and recipes_deleted it CREATES them or if they are available it QUERIES them • Recipes are sorted by ascending • Main window is fixed, centred and scale-able to each device • Main window title 'RECIPES' is centred and the font size is larger • Main window has a fixed add recipe button, search by keywords field, food type drop-down list, recycle bin button and an export recipes button to .docx giving the option to select individual or all recipes • When hovering over the main window it removes the border and adds a shadow • When hovering over sub accordions, any buttons or drop down lists the mouse cursor changes to pointer • When hovering over the main window and sub window accordions the border removes, and a shadow appears also the collapsing arrows animate and has a shadow to the left to separate from the recipe details • When clicking on a sub window it scrolls to just below the main window (the main window is fixed so you can see add, search etc all the time) and collapses the last accordion that was open • The sub window content scrolls behind the main window and can't be seen, if content is behind the main window an animated arrow appears at the top or bottom • The sub window includes a vertical scroll bar like in android settings • The sub window accordion has a recipe image, recipe title, servings, prep time, cook time and food type • The sub window content has recipe image, recipe title, type, servers, prep, cook, ingredients, method, edit button, delete button and export recipe button • The colour of the text should never be the same for each recipe maybe we choose a flat colour palette for it to cycle through • Under the ingredients and method, you have the option to add a title in case you have DOUGH ingredients FILLING ingredients or a method for DOUGH or FILLING • Clicking on the recipe image in the sub window content it opens the image to the centre of that recipe and adds a black transparency to everything behind it • Also, some type of text or icon to know that the image can be opened • The uploaded image will allow you to drag it to a point of centre you choose • When you click on the edit button the current recipe values appear editable in the same section. Also, the edit button changes to update button and in edit if you click on the update or cancel button it scrolls back to the top of the main window for that recipe only, the export and delete buttons are hidden • Reposition ingredients/methods up, down or remove by dragging finger or mouse • When you click on the delete button it prompts you (modal) are you sure you want to delete and adds a black transparency to everything behind it. When deleted it will collapse the recipe list to exclude it • Total recipe count on main page and total deleted recipes in deleted modal • Search bar in deleted modal • When a recipe has been deleted it moves it to another database called recipes_deleted and in the main window you have a button called recycle bin or icon which opens a modal and shows the list of deleted recipes and a button to delete forever or restore. If restored it will expand that recipe and scroll it to the top of main window • When adding a recipe, it will expand that recipe after being added and scroll to the top of main window • Tips section under the ingredients/method section • Commenting throughout code • Validation • Login system