Click here to view website

Developer: Mark Wilde

1. Project Instructions
2. Cookbook Information
3. UX
   • Design
   • User Stories
4. Features
5. Technologies
6. Database Schema
7. Testing
   • User Stories
   • Manual Testing
   • Other
8. Deployment
9. Installation
10. Credits

Guidelines for project development:

• Create a web application that allows users to store and easily access cooking recipes
• Put some effort into designing a database schema based on recipes, and any other related properties and entities.
• Make sure to put some thought into the relationships between them, and use foreign keys to connect these pieces of data.
• Create the backend code and frontend form to allow users to add new recipes to the site. Create the backend code to group and summarize the recipes on the site, based on their attributes such as cuisine or country of origin etc. Create a frontend page to show this summary, and make the categories clickable to drill down into a filtered view based on that category.
• Create the backend code to retrieve a list of recipes.
• Create a detailed view for each recipes, that would just show all attributes for that recipe, and the full preparation instructions.
• Allow for editing and deleting of the recipe records, either on separate pages, or built into the list/detail pages.
• Optionally, you may choose to add basic user registration and authentication to the site.
• You should conduct and document tests to ensure that all of your website’s functionality works well.
• Write a README.md file for your project.
• Use Git & GitHub for version control.
• Deploy the final version of your code to a hosting platform such as Heroku.

• This app is for people who may be interesting in learning more about meat and dairy free Asian cuisine.
• The Cookbook was created with simplicity and ease of use in mind. Users can add, view, edit and delete their own recipes.
• Users can also view, edit and delete recipes of other users.
• With this in mind it is hoped users will personalize their cookbook, keeping the recipes they like best.

• Development of the website adhered to a mobile first approach, it implements a simplistic design with minimal content.

• The Materialize CSS framework underpins the project and was implemented as per convention.

• Users are asked to register or login before being granted access to the website.

• All pages share the same navbar and footer, though each page has a clear purpose and some unique functionality.

• Soft colors were used throughout the website in an attempt to help users feel relaxed.

Several user stories were considered before development began:

1. "I eat a plant-based diet and would like to visit a website with 100% vegan recipes."
2. "I am interested in veganism and would like to visit a website that has a collection of plant-based recipes."
3. "As a parent I want to encourage my children to eat fruits and vegetables, I would like to visit a website with healthy food options."
4. "I live by myself and want to learn about making wholesome meals at home so I don't just order takeaway."
5. "As a person who wants to improve their cooking skills, I'm looking for new recipes to try."
6. "I currently eat an unhealthy diet and want access to recipes that are good for my health."
7. "I want to be able to store all my favorite recipes online, with minimum fuss."
8. "I want to edit and delete recipes."
9. "I want to encourage my friends to consider eating less meat and dairy, and would like to be able to recommend a good recipe website to them."

• An option for users to upload an image which would display on their recipe card (has since been implemented).

• A search bar so that users could search recipes by ingredients.

• Visual Studio Code
  • The project was developed using the Visual Studio Code code editor.

• HTML

  • The project uses HTML to create the pages.

• CSS

  • The project uses CSS to style the pages.

• Materialize CSS Framework

  • The project uses Materialize for styling and responsive design.

• Material Icons

  • The project uses Material Icons icons in it's forms.

• JQuery

  • The project uses JQuery for responsiveness.

• JavaScript

  • The project uses JavaScript for responsiveness.

• Python

  • The project uses Python to write the sites logic.

• Flask

  • The project uses the Flask micro web framework for the apps backend functionality.

• Flask-PyMongo

  • The project uses the Flask-PyMongo as per instructions.

• MongoDB

  • The project uses the MongoDB for the apps database.

• The project uses Git as it's version control system.

• The project uses a Github repository.

{
    "_id": {
        "$oid": "5bb367d579c4182d22c1e738"
    },
    "country_name": "Vietnam",
    "course_type": "Dessert",
    "user_name": "Teresa May",
    "recipe_name": "Banana, Tapioca and Coconut Pudding",
    "recipe_description": "Great combination of sweet banana and chewy tapioca pearl in a rich coconut sauce.",
    "preparation_time": "5 minutes",
    "cooking_time": "30 minutes",
    "total_time": "35 Minutes",
    "servings": "8",
    "ingredients": "\r\n\r\n 1kg of very ripe asian bananas.\r\n1/2 cup sugar.\r\n1 tsp kosher salt.\r\n5 cup water.\r\n1 package 3.5 OZ dried shredded Tapioca - Soaked.\r\n1/3 cup Tapioca pearls.\r\n1-1/2 can coconut milk (13.5 OZ can).\r\n1/4 to 1/3 cup white sugar.\r\n1/4 tsp kosher salt.\r\nVanilla sugar or 3 Pandan leaves washed and tied into a knot.",
    "instructions": "Bring water and coconut milk to boil in a medium saucepan.\r\nAdd sugar, salt, tapioca.\r\nReduce heat to medium low, let it cook for about 30 minutes, stir frequently.\r\nStir in bananas, remove from heat and let stand for 15 minutes.\r\nNote: after you add the bananas, don\u2019t stir too much, it\u2019ll break up the fruit.\r\nServe hot, or chill for 3-4 hours.",
    "tags": "banana tapioca coconut",
    "allergens": "none",
    "recipe_creator": "Teresa May",
    "img_url": "https://img.taste.com.au/HAHYDv8F/w720-h480-cfill-q80/taste/2016/11/banana-coconut-tapioca-puddings-che-chuoi-33083-1.jpeg"
}

The website has been deployed to Heroku and can be accessed here

Heroku Deployment

1. Create an Heroku account.

2. Create a new app 'flask-riddle' on heroku.com

3. Install Heroku CLI:

   $ brew install heroku/brew/heroku
   

4. Login to heroku:

   $ heroku login
   

5. Check app has been created by heroku:

   $ heroku apps
   

6. Add heroku remote:

   $ heroku git:remote -a flask-riddle
   

7. Add requirements.txt file:

   $ sudo pip3 freeze --local > requirements.txt
   $ git add requirements.txt
   $ git commit -m " Added a requirements.txt"
   $ git push heroku master
   

8. Add Procfile (instructs heroku how start running the project):

   $ echo web: python app.py > Procfile
   $ git add Procfile
   $ git commit -m 'Added Procfile'
   $ git push heroku master
   

9. Set up dynos:

   $ heroku ps:scale web=1
   

10. Setup config variables on heroku dashboard:

    • Go to settings and click on reveal config vars
    • Set IP to 0.0.0.0
    • Set PORT to 5000

11. Restart dynos:

    • Navigate into the 'More' menu and select 'Restart all dynos' to update the apps settings.

12. Open app:

    • Click on the 'Open app' button to view your heroku deployed app in the browser.

from the console type:

$ git clone https://github.com/markwilde33/CI-project-four
$ cd CI-project-four
$ pip3 install -r requirements.txt 
$ python3 app.py

App available at http://127.0.0.1:5000/

Code Institute

The Html Fundamentals module, CSS Fundamentals module, Python Fundamentals module,Practical Python module and the Data Centric Development module were used for guidance.

• VeganHeaven was used for recipe information.
• VeganRicha was used for recipe information.

• Google Images was used for the cuisine pictures.

• I received inspiration for this project from Code Institute, The Net Ninja, Brad Traversy and Corey Schafer.